feat: Added analytics logging on non-admin pages access

lib/firebase-client.ts

@@ -1,4 +1,5 @@
 import firebase from 'firebase/app';
+import 'firebase/analytics';
 
 export const firebaseConfig = {
   apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
@@ -15,10 +16,17 @@ export const firebaseConfig = {
  *
  * See the contributor docs for more info.
  */
-export function initFirebase() {
-  if (firebase.apps.length > 0) {
-    return;
-  }
-
+if (!firebase.apps.length) {
   firebase.initializeApp(firebaseConfig);
 }
+
+const analytics = firebase.analytics;
+
+export { firebase, analytics };
+// export function initFirebase() {
+//   if (firebase.apps.length > 0) {
+//     return;
+//   }
+
+//   firebase.initializeApp(firebaseConfig);
+// }

pages/_app.tsx

@@ -2,7 +2,7 @@ import Head from 'next/head';
 import { AppProps } from 'next/dist/shared/lib/router/router';
 import 'firebase/auth';
 import AppHeader from '../components/AppHeader';
-import { initFirebase } from '../lib/firebase-client';
+import { analytics } from '../lib/firebase-client';
 import { AuthProvider } from '../lib/user/AuthContext';
 import '../styles/globals.css';
 import '../styles/tailwind.css';
@@ -18,8 +18,8 @@ import 'react-notion-x/src/styles.css';
 import 'prismjs/themes/prism-tomorrow.css';
 // used for rendering equations
 import 'katex/dist/katex.min.css';
-
-initFirebase();
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
 
 /**
  * A Wrapper for the HackPortal web app.
@@ -28,6 +28,22 @@ initFirebase();
  * will load into memory and never re-initialize unless the page refreshes.
  */
 function PortalApp({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production') {
+      const logEvent = (url: string) => {
+        analytics().setCurrentScreen(url);
+        analytics().logEvent('screen_view');
+      };
+      router.events.on('routeChangeComplete', logEvent);
+      logEvent(window.location.pathname);
+      return () => {
+        router.events.off('routeChangeComplete', logEvent);
+      };
+    }
+  });
+
   return (
     <DndProvider backend={HTML5Backend}>
       <LocalizationProvider dateAdapter={AdapterDateFns}>

pages/register.tsx

@@ -5,7 +5,6 @@ import LoadIcon from '../components/LoadIcon';
 import { useUser } from '../lib/profile/user-data';
 import { RequestHelper } from '../lib/request-helper';
 import { useAuthContext } from '../lib/user/AuthContext';
-import firebase from 'firebase/app';
 import { Formik, Form, Field, ErrorMessage } from 'formik';
 import schools from '../public/schools.json';
 import majors from '../public/majors.json';

pages/schedule/index.tsx

@@ -29,7 +29,6 @@ import PinDrop from '@material-ui/icons/PinDrop';
 import ClockIcon from '@material-ui/icons/AccessTime';
 import Backpack from '@material-ui/icons/LocalMall';
 import Description from '@material-ui/icons/BorderColor';
-import firebase from 'firebase';
 
 const styles = ({ palette }: Theme) =>
   createStyles({