Google analytics 2

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"
   },

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",

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

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("G-MW23VES3G6");
+  useGoogleAnalytics();
 
   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);

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;

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);
-        history.push("/calculation");
+        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.`);
@@ -160,7 +177,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>

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

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]);
 

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>
   );
 };