Enable analytics

.env

@@ -6,3 +6,4 @@ REACT_APP_FIREBASE_PROJECT_ID="margni-note"
 REACT_APP_FIREBASE_STORAGE_BUCKET="margni-note.appspot.com"
 REACT_APP_FIREBASE_MESSAGING_SENDER_ID=1014018088230
 REACT_APP_FIREBASE_APP_ID="1:1014018088230:web:67f4ad959540df2d6235e7"
+REACT_APP_FIREBASE_MEASUREMENT_ID=G-0DLND3PD1K

package.json

@@ -5,12 +5,12 @@
     "dependencies": {
         "@testing-library/jest-dom": "^5.11.4",
         "@testing-library/react": "^11.0.4",
-        "@testing-library/user-event": "^12.1.6",
+        "@testing-library/user-event": "^12.1.7",
         "cross-env": "^7.0.2",
         "firebase": "^7.23.0",
         "jest-junit": "^12.0.0",
-        "react": "^16.13.1",
-        "react-dom": "^16.13.1",
+        "react": "^17.0.0-rc.3",
+        "react-dom": "^17.0.0-rc.3",
         "react-scripts": "^3.4.3"
     },
     "devDependencies": {

src/component/MainWithNotes.js

@@ -16,7 +16,7 @@ const filter = (tag, notes) =>
     tag ? notes.filter((note) => note.tags.includes(tag)) : notes;
 
 // TODO this is a temporary solution and should be refactored urgently.
-export default ({ onSignOut }) => {
+const MainWithNotes = ({ onSignOut }) => {
     const {
         create,
         update,
@@ -139,3 +139,5 @@ export default ({ onSignOut }) => {
         />
     );
 };
+
+export default MainWithNotes;

src/context/AuthContext.js

@@ -1,25 +1,25 @@
 import React, { useContext, useEffect, useState } from 'react';
 import firebase from 'firebase/app';
 
-import { Firebase } from '../firebase';
+import { firebaseApp } from '../firebaseApp';
 
 export const AuthContext = React.createContext(null);
 
 // TODO add multiple sign-in options
 const signInWithGoogle = () => {
     const provider = new firebase.auth.GoogleAuthProvider();
 
-    Firebase.auth().signInWithRedirect(provider);
+    firebaseApp.auth().signInWithRedirect(provider);
 };
 
 const signOut = () => {
-    Firebase.auth().signOut();
+    firebaseApp.auth().signOut();
 };
 
 export const AuthProvider = ({ children }) => {
     const [user, setUser] = useState(null);
 
-    useEffect(() => Firebase.auth().onAuthStateChanged(setUser), []);
+    useEffect(() => firebaseApp.auth().onAuthStateChanged(setUser), []);
 
     return (
         <AuthContext.Provider value={{ signInWithGoogle, signOut, user }}>

src/context/AuthContext.test.js

@@ -7,7 +7,7 @@ jest.mock('firebase/app', () => ({
     },
 }));
 
-jest.mock('../firebase', () => {
+jest.mock('../firebaseApp', () => {
     const auth = {
         onAuthStateChanged: jest.fn(),
         signInWithRedirect: jest.fn(),
@@ -21,7 +21,7 @@ jest.mock('../firebase', () => {
     };
 });
 
-import { Firebase } from '../firebase';
+import { firebaseApp } from '../firebaseApp';
 
 import { AuthProvider, useAuth } from './AuthContext';
 
@@ -46,6 +46,6 @@ test('AuthProvider', () => {
     fireEvent.click(getByText('SIGNOUT'));
     fireEvent.click(getByText('SIGNIN'));
 
-    expect(Firebase.auth().signOut).toHaveBeenCalled();
-    expect(Firebase.auth().signInWithRedirect).toHaveBeenCalled();
+    expect(firebaseApp.auth().signOut).toHaveBeenCalled();
+    expect(firebaseApp.auth().signInWithRedirect).toHaveBeenCalled();
 });

src/context/NoteContext.js

@@ -1,12 +1,12 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
 import firebase from 'firebase/app';
 
-import { Firebase } from '../firebase';
+import { firebaseApp } from '../firebaseApp';
 import { AuthContext } from './AuthContext';
 
 export const NoteContext = createContext();
 
-const collection = Firebase.firestore().collection('note');
+const collection = firebaseApp.firestore().collection('note');
 
 const create = (user) => {
     const ref = collection.doc();

src/firebase.js → src/firebaseApp.js

@@ -1,23 +1,23 @@
 import firebase from 'firebase/app';
 import 'firebase/auth';
 import 'firebase/firestore';
+import 'firebase/analytics';
 
-const firebaseConfig = {
+// Initialize Firebase
+export const firebaseApp = firebase.initializeApp({
     apiKey: process.env.REACT_APP_FIREBASE_KEY,
     authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
     databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
     projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
     storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
     messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
     appId: process.env.REACT_APP_FIREBASE_APP_ID,
-};
+    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
+});
 
-// Initialize Firebase
-export const Firebase = firebase.initializeApp(firebaseConfig);
+firebaseApp.analytics();
 
-Firebase.firestore()
+firebaseApp
+    .firestore()
     .enablePersistence({ synchronizeTabs: true })
-    .then(
-        () => null,
-        (error) => console.error(error)
-    );
+    .catch((error) => console.error(error));

src/index.js

@@ -3,13 +3,15 @@ import ReactDOM from 'react-dom';
 
 import * as serviceWorker from './serviceWorker';
 import { App } from './layout/App';
-import { Firebase } from './firebase';
+import { firebaseApp } from './firebaseApp';
 
 import './index.css';
 
-Firebase.auth().onAuthStateChanged(() =>
-    ReactDOM.render(<App />, document.getElementById('root'))
-);
+firebaseApp
+    .auth()
+    .onAuthStateChanged(() =>
+        ReactDOM.render(<App />, document.getElementById('root'))
+    );
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.