From b8991da4fa7e1d67fd0168029eabbff020946efd Mon Sep 17 00:00:00 2001
From: John Darragh <darragh@entrotech.net>
Date: Mon, 30 Nov 2020 12:35:47 -0800
Subject: [PATCH 1/4] Google Analytics, Take 1

---
 client/.eslintrc.json                         |  10 +-
 client/public/index.html                      |  14 ++
 client/src/App.js                             |  14 +-
 client/src/AppWrapper.js                      | 130 +++++++++---------
 client/src/components/Authorization/Login.js  |   4 +-
 client/src/components/NavBar.js               |   2 +-
 .../ProjectWizard/TdmCalculationWizard.js     |  15 +-
 .../src/components/Projects/ProjectsPage.js   |   6 +-
 .../src/components/TdmCalculationContainer.js |  10 +-
 client/src/contexts/RequiredFieldContext.js   |   5 -
 client/src/hooks/useTracking.js               |  73 +++++-----
 11 files changed, 149 insertions(+), 134 deletions(-)
 delete mode 100644 client/src/contexts/RequiredFieldContext.js

diff --git a/client/.eslintrc.json b/client/.eslintrc.json
index 7178b6de..c0dedbd1 100644
--- a/client/.eslintrc.json
+++ b/client/.eslintrc.json
@@ -5,11 +5,16 @@
     "es6": true,
     "jest/globals": true
   },
+  "globals": {
+    "process": true
+  },
   "extends": [
     "prettier",
     "eslint:recommended",
     "plugin:react/recommended",
-    "plugin:jest/recommended"
+    "plugin:jest/recommended",
+    "plugin:prettier/recommended",
+    "plugin:react-hooks/recommended"
   ],
   "parserOptions": {
     "ecmaFeatures": {
@@ -18,8 +23,9 @@
     "ecmaVersion": 2018,
     "sourceType": "module"
   },
-  "plugins": ["react", "jest"],
+  "plugins": ["react", "jest", "prettier"],
   "rules": {
+    "prettier/prettier": "error",
     "no-console": ["warn", { "allow": ["error"] }],
     "no-alert": "error"
   },
diff --git a/client/public/index.html b/client/public/index.html
index 8f1af29f..5890e733 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -25,6 +25,20 @@
       href="https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap"
       rel="stylesheet"
     />
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=UA-YOUR1KEY-HERE"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", process.env.REACT_APP_GA_ID);
+    </script>
     <style>
       html,
       #body {
diff --git a/client/src/App.js b/client/src/App.js
index 739266ba..355cce59 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -33,7 +33,7 @@ const useStyles = createUseStyles({
 
 const App = ({ account, setLoggedInAccount, hasConfirmedTransition }) => {
   const classes = useStyles();
-  useTracking("G-MW23VES3G6");
+  useTracking(process.env.REACT_APP_GA_ID);
 
   return (
     <React.Fragment>
@@ -44,17 +44,17 @@ const App = ({ account, setLoggedInAccount, hasConfirmedTransition }) => {
           path="/"
           render={() =>
             account.email ? (
-              <Redirect to="/create-project" />
+              <Redirect to="/calculation/1" />
             ) : (
               <Login setLoggedInAccount={setLoggedInAccount} />
             )
           }
         />
-        <Route exact path="/create-project">
-          <Redirect to="/calculation" />
+        <Route exact path="/calculation">
+          <Redirect to="/calculation/1" />
         </Route>
         <Route
-          path="/calculation/:page?/:projectId?"
+          path="/calculation/:page/:projectId?"
           render={() => (
             <TdmCalculationContainer
               account={account}
@@ -76,7 +76,7 @@ const App = ({ account, setLoggedInAccount, hasConfirmedTransition }) => {
           path="/login/:email?"
           render={() =>
             account.email ? (
-              <Redirect to="/create-project" />
+              <Redirect to="/calculation/1" />
             ) : (
               <Login setLoggedInAccount={setLoggedInAccount} />
             )
@@ -121,7 +121,7 @@ App.propTypes = {
     isSecurityAdmin: PropTypes.bool
   }),
   setLoggedInAccount: PropTypes.func,
-  hasConfirmedTransition: PropTypes.func
+  hasConfirmedTransition: PropTypes.bool
 };
 
 export default withToastProvider(App);
diff --git a/client/src/AppWrapper.js b/client/src/AppWrapper.js
index 23897500..7b343cc2 100644
--- a/client/src/AppWrapper.js
+++ b/client/src/AppWrapper.js
@@ -1,65 +1,65 @@
-import React, { useState, useEffect } from "react";
-import { BrowserRouter as Router } from "react-router-dom";
-import { UserContext } from "./components/user-context";
-import App from "./App";
-import NavConfirmModal from "./components/NavConfirmModal";
-
-const AppWrapper = () => {
-  const [account, setAccount] = useState({});
-  const [confirmTransition, setConfirmTransition] = useState(null);
-  const [hasConfirmedTransition, setHasConfirmedTransition] = useState(true);
-  const [isOpenNavConfirmModal, setIsOpenNavConfirmModal] = useState(false);
-
-  const setLoggedInAccount = loggedInUser => {
-    setAccount(loggedInUser);
-    localStorage.setItem("currentUser", JSON.stringify(loggedInUser));
-  };
-
-  useEffect(() => {
-    const currentUser = localStorage.getItem("currentUser");
-    if (currentUser) {
-      try {
-        const parsedAccount = JSON.parse(currentUser);
-        setAccount(parsedAccount);
-      } catch (err) {
-        // TODO: replace with production error logging.
-        console.error(
-          "Unable to parse current user from local storage.",
-          currentUser
-        );
-      }
-    } else {
-      setLoggedInAccount({});
-    }
-  }, []);
-
-  const getUserConfirmation = (_message, defaultConfirmCallback) => {
-    setHasConfirmedTransition(false);
-    setConfirmTransition(() => ({
-      defaultConfirmCallback: defaultConfirmCallback,
-      setHasConfirmedTransition: setHasConfirmedTransition
-    }));
-    setIsOpenNavConfirmModal(!isOpenNavConfirmModal);
-  };
-
-  return (
-    <React.Fragment>
-      <UserContext.Provider value={account}>
-        <Router getUserConfirmation={getUserConfirmation}>
-          <NavConfirmModal
-            confirmTransition={confirmTransition}
-            isOpenNavConfirmModal={isOpenNavConfirmModal}
-            setIsOpenNavConfirmModal={setIsOpenNavConfirmModal}
-          />
-          <App
-            account={account}
-            setLoggedInAccount={setLoggedInAccount}
-            hasConfirmedTransition={hasConfirmedTransition}
-          />
-        </Router>
-      </UserContext.Provider>
-    </React.Fragment>
-  );
-};
-
-export default AppWrapper;
+import React, { useState, useEffect } from "react";
+import { BrowserRouter as Router } from "react-router-dom";
+import { UserContext } from "./components/user-context";
+import App from "./App";
+import NavConfirmModal from "./components/NavConfirmModal";
+
+const AppWrapper = () => {
+  const [account, setAccount] = useState({});
+  const [confirmTransition, setConfirmTransition] = useState(null);
+  const [hasConfirmedTransition, setHasConfirmedTransition] = useState(true);
+  const [isOpenNavConfirmModal, setIsOpenNavConfirmModal] = useState(false);
+
+  const setLoggedInAccount = loggedInUser => {
+    setAccount(loggedInUser);
+    localStorage.setItem("currentUser", JSON.stringify(loggedInUser));
+  };
+
+  useEffect(() => {
+    const currentUser = localStorage.getItem("currentUser");
+    if (currentUser) {
+      try {
+        const parsedAccount = JSON.parse(currentUser);
+        setAccount(parsedAccount);
+      } catch (err) {
+        // TODO: replace with production error logging.
+        console.error(
+          "Unable to parse current user from local storage.",
+          currentUser
+        );
+      }
+    } else {
+      setLoggedInAccount({});
+    }
+  }, []);
+
+  const getUserConfirmation = (_message, defaultConfirmCallback) => {
+    setHasConfirmedTransition(false);
+    setConfirmTransition(() => ({
+      defaultConfirmCallback: defaultConfirmCallback,
+      setHasConfirmedTransition: setHasConfirmedTransition
+    }));
+    setIsOpenNavConfirmModal(!isOpenNavConfirmModal);
+  };
+
+  return (
+    <React.Fragment>
+      <UserContext.Provider value={account}>
+        <Router getUserConfirmation={getUserConfirmation}>
+          <NavConfirmModal
+            confirmTransition={confirmTransition}
+            isOpenNavConfirmModal={isOpenNavConfirmModal}
+            setIsOpenNavConfirmModal={setIsOpenNavConfirmModal}
+          />
+          <App
+            account={account}
+            setLoggedInAccount={setLoggedInAccount}
+            hasConfirmedTransition={hasConfirmedTransition}
+          />
+        </Router>
+      </UserContext.Provider>
+    </React.Fragment>
+  );
+};
+
+export default AppWrapper;
diff --git a/client/src/components/Authorization/Login.js b/client/src/components/Authorization/Login.js
index 76080afa..cc268404 100644
--- a/client/src/components/Authorization/Login.js
+++ b/client/src/components/Authorization/Login.js
@@ -55,7 +55,7 @@ const Login = props => {
 
       if (loginResponse.isSuccess) {
         setLoggedInAccount(loginResponse.user);
-        history.push("/calculation");
+        history.push("/calculation/1");
       } else if (loginResponse.code === "AUTH_NOT_CONFIRMED") {
         try {
           await accountService.resendConfirmationEmail(email);
@@ -160,7 +160,7 @@ const Login = props => {
                   </button>
 
                   {/* <button className="btn-without-saving"> */}
-                  <Link to="/calculation">
+                  <Link to="/calculation/1">
                     <button className="btn-without-saving">
                       Continue without saving
                     </button>
diff --git a/client/src/components/NavBar.js b/client/src/components/NavBar.js
index 7e6ae62d..a2e8032e 100644
--- a/client/src/components/NavBar.js
+++ b/client/src/components/NavBar.js
@@ -118,7 +118,7 @@ const NavBar = ({ account, navbarOpen, setNavbarOpen }) => {
         <NavLink
           className={classes.link}
           activeClassName={classes.currentLink}
-          to="/create-project"
+          to="/calculation/1"
           onClick={handleHamburgerMenuClick}
         >
           Create Project
diff --git a/client/src/components/ProjectWizard/TdmCalculationWizard.js b/client/src/components/ProjectWizard/TdmCalculationWizard.js
index 9f326841..125dc08f 100644
--- a/client/src/components/ProjectWizard/TdmCalculationWizard.js
+++ b/client/src/components/ProjectWizard/TdmCalculationWizard.js
@@ -149,19 +149,16 @@ const TdmCalculationWizard = props => {
   useEffect(() => {
     if (!projectId) {
       history.push("/calculation/1");
+    } else if (projectId && (!account || !account.id)) {
+      // user not logged in, existing project -> log in
+      history.push(`/login`);
     } else if (
+      // Redirect to Summary Page if project exists,
+      // but does not belong to logged-in user
       projectId &&
-      account &&
-      (account.isAdmin || account.id === loginId)
+      !(account.isAdmin || account.id === loginId)
     ) {
-      // Project Calculation is editable if it is not saved
-      // or the project was created by the current logged in
-      // user, or the logged in user is admin.
-      history.push(`/calculation/${page}/${projectId ? projectId : ""}`);
-    } else {
-      // read-only users can only see the summary page.
       history.push(`/calculation/6/${projectId}`);
-      // setPage(6);
     }
   }, [projectId, account, loginId, history]);
 
diff --git a/client/src/components/Projects/ProjectsPage.js b/client/src/components/Projects/ProjectsPage.js
index 8a6a9462..b0354024 100644
--- a/client/src/components/Projects/ProjectsPage.js
+++ b/client/src/components/Projects/ProjectsPage.js
@@ -420,8 +420,7 @@ const ProjectsPage = ({ account, history }) => {
         paginate={paginate}
       />
 
-      {
-        selectedProject && 
+      {selectedProject && (
         <>
           <DuplicateProjectModal
             selectedProject={selectedProject}
@@ -441,8 +440,7 @@ const ProjectsPage = ({ account, history }) => {
             deleteModalOpen={deleteModalOpen}
           />
         </>
-      }
-
+      )}
     </div>
   );
 };
diff --git a/client/src/components/TdmCalculationContainer.js b/client/src/components/TdmCalculationContainer.js
index b38c2aa3..88499d22 100644
--- a/client/src/components/TdmCalculationContainer.js
+++ b/client/src/components/TdmCalculationContainer.js
@@ -107,16 +107,16 @@ export function TdmCalculationContainer({
         setRules(engine.showRulesArray());
       } catch (err) {
         console.error(JSON.stringify(err, null, 2));
-        const errMessage = account.id
-          ? "The project you are trying to view can only be viewed by the user."
-          : "You must be logged in to view project.";
+        // const errMessage = account.id
+        //   ? "The project you are trying to view can only be viewed by the user."
+        //   : "You must be logged in to view project.";
+        // toast.add(errMessage);
         const redirect = account.id ? "/projects" : "/login";
-        toast.add(errMessage);
         history.push(redirect);
       }
     };
     initiateEngine();
-  }, [match.params.projectId, engine, account, toast.add, history]);
+  }, [match.params.projectId, engine, account, history]);
 
   const recalculate = updatedFormInputs => {
     engine.run(updatedFormInputs, resultRuleCodes); //TODO cannot read property 'run' on null when switching from calculation to public form to create project
diff --git a/client/src/contexts/RequiredFieldContext.js b/client/src/contexts/RequiredFieldContext.js
deleted file mode 100644
index 67af0993..00000000
--- a/client/src/contexts/RequiredFieldContext.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from "react";
-
-const RequiredFieldContext = React.createContext([{}, () => {}]);
-
-export default RequiredFieldContext;
diff --git a/client/src/hooks/useTracking.js b/client/src/hooks/useTracking.js
index d0caca45..e3451b55 100644
--- a/client/src/hooks/useTracking.js
+++ b/client/src/hooks/useTracking.js
@@ -1,34 +1,39 @@
-import { useEffect } from "react";
-import { useHistory } from "react-router-dom";
-
-// https://medium.com/javascript-in-plain-english/google-analytics-with-react-router-and-hooks-16d403ddc528
-
-// declare global {
-//   interface Window {
-//     gtag?: (
-//       key: string,
-//       trackingId: string,
-//       config: { page_path: string }
-//     ) => void;
-//   }
-// }
-
-export const useTracking = (trackingId = "G-MW23VES3G6") => {
-  const { listen } = useHistory();
-
-  useEffect(() => {
-    const unlisten = listen(location => {
-      if (!window.gtag) return;
-      if (!trackingId) {
-        console.error(
-          "Tracking not enabled, as `trackingId` was not given and there is no `GA_MEASUREMENT_ID`."
-        );
-        return;
-      }
-
-      window.gtag("config", trackingId, { page_path: location.pathname });
-    });
-
-    return unlisten;
-  }, [trackingId, listen]);
-};
+import { useEffect } from "react";
+import { useHistory } from "react-router-dom";
+
+// https://medium.com/javascript-in-plain-english/google-analytics-with-react-router-and-hooks-16d403ddc528
+
+// declare global {
+//   interface Window {
+//     gtag?: (
+//       key: string,
+//       trackingId: string,
+//       config: { page_path: string }
+//     ) => void;
+//   }
+// }
+
+export const useTracking = trackingId => {
+  const { listen } = useHistory();
+  const gaTrackingId = trackingId || process.env.REACT_APP_GA_ID;
+
+  useEffect(() => {
+    const unlisten = listen(location => {
+      if (!window.gtag) return;
+      if (!gaTrackingId) {
+        console.error(
+          "Tracking not enabled, as `trackingId` was not given and there is no `GA_MEASUREMENT_ID`."
+        );
+        return;
+      }
+
+      window.gtag("config", gaTrackingId, {
+        page_path: location.pathname,
+        page_query_string: location.search
+      });
+      console.log("useTracking: " + location.pathname + " id: " + gaTrackingId);
+    });
+
+    return unlisten;
+  }, [gaTrackingId, listen]);
+};

From 8b0eefed472f4580e818cffc3cee3eff1c6e811b Mon Sep 17 00:00:00 2001
From: John Darragh <darragh@entrotech.net>
Date: Mon, 30 Nov 2020 13:41:28 -0800
Subject: [PATCH 2/4] Switch Google Analytics hook, add some custom events

---
 client/package-lock.json                      |  5 +++
 client/package.json                           |  1 +
 client/src/App.js                             |  4 +-
 client/src/components/Authorization/Login.js  | 17 ++++++++
 .../src/components/TdmCalculationContainer.js |  9 +++++
 client/src/hooks/analytics.js                 | 24 ++++++++++++
 client/src/hooks/useGoogleAnalytics.js        | 22 +++++++++++
 client/src/hooks/useTracking.js               | 39 -------------------
 8 files changed, 80 insertions(+), 41 deletions(-)
 create mode 100644 client/src/hooks/analytics.js
 create mode 100644 client/src/hooks/useGoogleAnalytics.js
 delete mode 100644 client/src/hooks/useTracking.js

diff --git a/client/package-lock.json b/client/package-lock.json
index f49109df..d18a55a5 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -14198,6 +14198,11 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
+    "react-ga": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-3.3.0.tgz",
+      "integrity": "sha512-o8RScHj6Lb8cwy3GMrVH6NJvL+y0zpJvKtc0+wmH7Bt23rszJmnqEQxRbyrqUzk9DTJIHoP42bfO5rswC9SWBQ=="
+    },
     "react-input-mask": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
diff --git a/client/package.json b/client/package.json
index 00be48d3..327cde8e 100644
--- a/client/package.json
+++ b/client/package.json
@@ -38,6 +38,7 @@
     "moment": "^2.24.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
+    "react-ga": "^3.3.0",
     "react-input-mask": "^2.0.4",
     "react-jss": "^10.1.0",
     "react-loader": "^2.4.7",
diff --git a/client/src/App.js b/client/src/App.js
index 355cce59..0fe128f1 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Route, Redirect } from "react-router-dom";
-import { useTracking } from "./hooks/useTracking";
+import useGoogleAnalytics from "./hooks/useGoogleAnalytics";
 import { createUseStyles } from "react-jss";
 import { withToastProvider } from "./contexts/Toast";
 import TdmCalculationContainer from "./components/TdmCalculationContainer";
@@ -33,7 +33,7 @@ const useStyles = createUseStyles({
 
 const App = ({ account, setLoggedInAccount, hasConfirmedTransition }) => {
   const classes = useStyles();
-  useTracking(process.env.REACT_APP_GA_ID);
+  useGoogleAnalytics();
 
   return (
     <React.Fragment>
diff --git a/client/src/components/Authorization/Login.js b/client/src/components/Authorization/Login.js
index cc268404..3adf23e2 100644
--- a/client/src/components/Authorization/Login.js
+++ b/client/src/components/Authorization/Login.js
@@ -7,6 +7,7 @@ import * as Yup from "yup";
 import * as accountService from "../../services/account.service";
 import SideBar from "../Sidebar";
 import clsx from "clsx";
+import analytics from "../../hooks/analytics";
 
 const useStyles = createUseStyles({
   root: {
@@ -55,9 +56,15 @@ const Login = props => {
 
       if (loginResponse.isSuccess) {
         setLoggedInAccount(loginResponse.user);
+        analytics.sendEvent({ category: "User", action: "Login" });
         history.push("/calculation/1");
       } else if (loginResponse.code === "AUTH_NOT_CONFIRMED") {
         try {
+          analytics.sendEvent({
+            category: "User",
+            action: "Login Failed",
+            label: "Unconfirmed Email"
+          });
           await accountService.resendConfirmationEmail(email);
           setErrorMsg(`Your email has not been confirmed.
           Please look through your email for a Registration
@@ -72,11 +79,21 @@ const Login = props => {
           setSubmitting(false);
         }
       } else if (loginResponse.code === "AUTH_NO_ACCOUNT") {
+        analytics.sendEvent({
+          category: "User",
+          action: "Login Failed",
+          label: "Account not found"
+        });
         setErrorMsg(`The email ${email} does not correspond to an
         existing account. Please verify the email or register as a
         new account.`);
         setSubmitting(false);
       } else {
+        analytics.sendEvent({
+          category: "User",
+          action: "Login Failed",
+          label: "Probable Invalid Password"
+        });
         // Presumably loginResponse.code === "AUTH_INVALID_PASSWORD"
         setErrorMsg(`The password is incorrect, please check it
         and try again or use the Forgot Password feature.`);
diff --git a/client/src/components/TdmCalculationContainer.js b/client/src/components/TdmCalculationContainer.js
index 88499d22..a5944f36 100644
--- a/client/src/components/TdmCalculationContainer.js
+++ b/client/src/components/TdmCalculationContainer.js
@@ -10,6 +10,7 @@ import Engine from "../services/tdm-engine";
 import injectSheet from "react-jss";
 import { useToast } from "../contexts/Toast";
 import moment from "moment";
+import analytics from "../hooks/analytics";
 
 const styles = {
   root: {
@@ -346,6 +347,10 @@ export function TdmCalculationContainer({
       requestBody.id = projectId;
       try {
         await projectService.put(requestBody);
+        analytics.sendEvent({
+          category: "User",
+          action: "Save Changes to Project"
+        });
         setFormHasSaved(true);
         toast.add("Saved Project Changes");
       } catch (err) {
@@ -370,6 +375,10 @@ export function TdmCalculationContainer({
       try {
         const postResponse = await projectService.post(requestBody);
         const newPath = history.location.pathname + "/" + postResponse.data.id;
+        analytics.sendEvent({
+          category: "User",
+          action: "Saved New Project"
+        });
         // Update URL to /calculation/<currentPage>/<newProjectId>
         // to keep working on same project.
         history.push(newPath);
diff --git a/client/src/hooks/analytics.js b/client/src/hooks/analytics.js
new file mode 100644
index 00000000..96a020e1
--- /dev/null
+++ b/client/src/hooks/analytics.js
@@ -0,0 +1,24 @@
+import ReactGA from "react-ga";
+
+const TRACKING_ID = process.env.REACT_APP_GA_ID;
+
+function init() {
+  // Enable debug mode on the local development environment
+  const isDev = !process.env.NODE_ENV || process.env.NODE_ENV === "development";
+  ReactGA.initialize(TRACKING_ID, { debug: isDev });
+}
+
+function sendEvent(payload) {
+  ReactGA.event(payload);
+}
+
+function sendPageview(path) {
+  ReactGA.set({ page: path });
+  ReactGA.pageview(path);
+}
+
+export default {
+  init,
+  sendEvent,
+  sendPageview
+};
diff --git a/client/src/hooks/useGoogleAnalytics.js b/client/src/hooks/useGoogleAnalytics.js
new file mode 100644
index 00000000..cf57e648
--- /dev/null
+++ b/client/src/hooks/useGoogleAnalytics.js
@@ -0,0 +1,22 @@
+import React from "react";
+import { useLocation } from "react-router-dom";
+
+import analytics from "./analytics";
+
+/*
+  See this article for explanation:
+  https://raptis.wtf/blog/custom-hook-to-connect-google-analytics-in-react/
+*/
+
+export default function useGoogleAnalytics() {
+  const location = useLocation();
+
+  React.useEffect(() => {
+    analytics.init();
+  }, []);
+
+  React.useEffect(() => {
+    const currentPath = location.pathname + location.search;
+    analytics.sendPageview(currentPath);
+  }, [location]);
+}
diff --git a/client/src/hooks/useTracking.js b/client/src/hooks/useTracking.js
deleted file mode 100644
index e3451b55..00000000
--- a/client/src/hooks/useTracking.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useEffect } from "react";
-import { useHistory } from "react-router-dom";
-
-// https://medium.com/javascript-in-plain-english/google-analytics-with-react-router-and-hooks-16d403ddc528
-
-// declare global {
-//   interface Window {
-//     gtag?: (
-//       key: string,
-//       trackingId: string,
-//       config: { page_path: string }
-//     ) => void;
-//   }
-// }
-
-export const useTracking = trackingId => {
-  const { listen } = useHistory();
-  const gaTrackingId = trackingId || process.env.REACT_APP_GA_ID;
-
-  useEffect(() => {
-    const unlisten = listen(location => {
-      if (!window.gtag) return;
-      if (!gaTrackingId) {
-        console.error(
-          "Tracking not enabled, as `trackingId` was not given and there is no `GA_MEASUREMENT_ID`."
-        );
-        return;
-      }
-
-      window.gtag("config", gaTrackingId, {
-        page_path: location.pathname,
-        page_query_string: location.search
-      });
-      console.log("useTracking: " + location.pathname + " id: " + gaTrackingId);
-    });
-
-    return unlisten;
-  }, [gaTrackingId, listen]);
-};

From ee1bfc12bcf35d24a28da520a7d37f0e25017472 Mon Sep 17 00:00:00 2001
From: John Darragh <darragh@entrotech.net>
Date: Mon, 30 Nov 2020 13:47:12 -0800
Subject: [PATCH 3/4] Remove Google Analytics tag from index.html

---
 client/public/index.html | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/client/public/index.html b/client/public/index.html
index 5890e733..8f1af29f 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -25,20 +25,6 @@
       href="https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap"
       rel="stylesheet"
     />
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=UA-YOUR1KEY-HERE"
-    ></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag("js", new Date());
-
-      gtag("config", process.env.REACT_APP_GA_ID);
-    </script>
     <style>
       html,
       #body {

From 47fbb3e8881748ab44bee3712e1a5625c507d1ba Mon Sep 17 00:00:00 2001
From: John Darragh <darragh@entrotech.net>
Date: Mon, 30 Nov 2020 13:48:32 -0800
Subject: [PATCH 4/4] save changes to index.html

---
 client/public/index.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/public/index.html b/client/public/index.html
index 8f1af29f..9d2d6719 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -31,7 +31,6 @@
         height: 100vh;
         margin: 0;
       }
-
       /* 
         Should be a better way to calculate right of root element to 
         occupy full height of browser window and account for LA City header