Merge branch 'release-0.2.18' into main

Author: entrotech

client/package-lock.json

@@ -1,13 +1,14 @@
 {
   "name": "client",
-  "version": "0.2.17",
+  "version": "0.2.18",
   "private": true,
   "proxy": "http://localhost:5000",
   "scripts": {
     "precommit": "lint-staged",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "test:ci": "react-scripts test --watchAll=false",
     "eject": "react-scripts eject",
     "lint": "eslint -c .eslintrc.json --ignore-path .eslintignore  **/*.{js,jsx}",
     "lint:fix": "eslint -c .eslintrc.json --ignore-path .eslintignore --fix  **/*.{js,jsx}"
@@ -31,8 +32,10 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.27",
     "@fortawesome/free-solid-svg-icons": "^5.12.1",
     "@fortawesome/react-fontawesome": "^0.1.9",
+    "@microsoft/applicationinsights-react-js": "^3.0.5",
+    "@microsoft/applicationinsights-web": "^2.5.10",
     "@storybook/preset-create-react-app": "^3.1.4",
-    "axios": "^0.19.2",
+    "axios": "^0.21.1",
     "clsx": "^1.1.0",
     "formik": "^2.1.4",
     "moment": "^2.24.0",
@@ -57,7 +60,7 @@
     "eslint-plugin-jest": "^23.8.2",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.20.0",
-    "lint-staged": "^10.0.8",
+    "lint-staged": "^10.5.3",
     "nock": "^13.0.4",
     "prettier": "^2.0.5",
     "react-test-renderer": "^16.13.0",
@@ -66,6 +69,6 @@
   },
   "lint-staged": {
     "*.{js,css,md}": "prettier --write",
-    "*.js": "eslint --cache --fix"
+    "*.js": "lint"
   }
 }

client/package.json

@@ -30,13 +30,23 @@ const useStyles = createUseStyles({
   }
 });
 
-const App = ({ account, setLoggedInAccount, hasConfirmedTransition }) => {
+const App = ({
+  account,
+  setLoggedInAccount,
+  hasConfirmedTransition,
+  tdmWizardContentContainerRef,
+  mainContentContainerRef
+}) => {
   const classes = useStyles();
 
   return (
     <React.Fragment>
       <Header account={account} />
-      <div className={classes.root}>
+      <div
+        className={classes.root}
+        id="main-content-container"
+        ref={mainContentContainerRef}
+      >
         <Route
           exact
           path="/"
@@ -58,6 +68,7 @@ const App = ({ account, setLoggedInAccount, hasConfirmedTransition }) => {
               account={account}
               hasConfirmedNavTransition={hasConfirmedTransition}
               setLoggedInAccount={setLoggedInAccount}
+              tdmWizardContentContainerRef={tdmWizardContentContainerRef}
             />
           )}
         />
@@ -95,6 +106,7 @@ const App = ({ account, setLoggedInAccount, hasConfirmedTransition }) => {
             );
           }}
         />
+
         <Route path="/forgotpassword" component={ResetPasswordRequest} />
         <Route path="/resetPassword/:token" component={ResetPassword} />
         <Route path="/contactus" component={ContactUs} />
@@ -119,7 +131,9 @@ App.propTypes = {
     isSecurityAdmin: PropTypes.bool
   }),
   setLoggedInAccount: PropTypes.func,
-  hasConfirmedTransition: PropTypes.bool
+  hasConfirmedTransition: PropTypes.bool,
+  mainContentContainerRef: PropTypes.object,
+  tdmWizardContentContainerRef: PropTypes.object
 };
 
 export default withToastProvider(App);

client/src/App.js

@@ -0,0 +1,19 @@
+// AppInsights.js
+import { ApplicationInsights } from "@microsoft/applicationinsights-web";
+import { ReactPlugin } from "@microsoft/applicationinsights-react-js";
+import { createBrowserHistory } from "history";
+
+const browserHistory = createBrowserHistory({ basename: "" });
+const reactPlugin = new ReactPlugin();
+const appInsights = new ApplicationInsights({
+  config: {
+    instrumentationKey: "b04010da-8444-48d2-a8e1-fcc931a8330d",
+    //instrumentationKey: "4965664a-5e02-4704-98a4-7c08c5d238ac",
+    extensions: [reactPlugin],
+    extensionConfig: {
+      [reactPlugin.identifier]: { history: browserHistory }
+    }
+  }
+});
+appInsights.loadAppInsights();
+export { reactPlugin, appInsights };

client/src/AppInsights.js

@@ -1,14 +1,22 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { BrowserRouter as Router } from "react-router-dom";
 import { UserContext } from "./components/user-context";
 import App from "./App";
+import ErrorPage from "./components/ErrorPage";
 import NavConfirmModal from "./components/NavConfirmModal";
+import {
+  AppInsightsContext,
+  AppInsightsErrorBoundary
+} from "@microsoft/applicationinsights-react-js";
+import { reactPlugin } from "./AppInsights";
 
 const AppWrapper = () => {
   const [account, setAccount] = useState({});
   const [confirmTransition, setConfirmTransition] = useState(null);
   const [hasConfirmedTransition, setHasConfirmedTransition] = useState(true);
   const [isOpenNavConfirmModal, setIsOpenNavConfirmModal] = useState(false);
+  const tdmWizardContentContainerRef = useRef();
+  const mainContentContainerRef = useRef();
 
   const setLoggedInAccount = loggedInUser => {
     setAccount(loggedInUser);
@@ -44,20 +52,29 @@ const AppWrapper = () => {
 
   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>
+      <AppInsightsContext.Provider value={reactPlugin}>
+        <UserContext.Provider value={account}>
+          <Router getUserConfirmation={getUserConfirmation}>
+            <AppInsightsErrorBoundary
+              onError={<ErrorPage />}
+              appInsights={reactPlugin}
+            >
+              <NavConfirmModal
+                confirmTransition={confirmTransition}
+                isOpenNavConfirmModal={isOpenNavConfirmModal}
+                setIsOpenNavConfirmModal={setIsOpenNavConfirmModal}
+              />
+              <App
+                account={account}
+                setLoggedInAccount={setLoggedInAccount}
+                hasConfirmedTransition={hasConfirmedTransition}
+                tdmWizardContentContainerRef={tdmWizardContentContainerRef}
+                mainContentContainerRef={mainContentContainerRef}
+              />
+            </AppInsightsErrorBoundary>
+          </Router>
+        </UserContext.Provider>
+      </AppInsightsContext.Provider>
     </React.Fragment>
   );
 };

client/src/AppWrapper.js

@@ -2,6 +2,10 @@ import React from "react";
 import SideBar from "./Sidebar";
 import clsx from "clsx";
 import { createUseStyles } from "react-jss";
+import {
+  useAppInsightsContext,
+  useTrackMetric
+} from "@microsoft/applicationinsights-react-js";
 
 import { version } from "../../package.json";
 
@@ -34,11 +38,24 @@ const useStyles = createUseStyles({
 
 const About = () => {
   const classes = useStyles();
+  const appInsights = useAppInsightsContext();
+
+  //appInsights.trackMetric("AboutPage Component");
+  const trackComponent = useTrackMetric(appInsights, "AboutPage");
+
   return (
-    <div className={classes.root}>
+    <div
+      className={classes.root}
+      onLoad={trackComponent}
+      onClick={trackComponent}
+    >
       <div className={clsx("tdm-wizard", classes.tdmWizard)}>
         <SideBar />
-        <div className="tdm-wizard-content-container">
+        <div
+          className="tdm-wizard-content-container"
+          onLoad={trackComponent}
+          onClick={trackComponent}
+        >
           <h1>About TDM Calculator</h1>
           <br />
           <div className={classes.aboutText}>

client/src/components/About.js

@@ -7,6 +7,11 @@ import * as Yup from "yup";
 import * as accountService from "../../services/account.service";
 import SideBar from "../Sidebar";
 import clsx from "clsx";
+import {
+  useAppInsightsContext,
+  useTrackMetric,
+  useTrackEvent
+} from "@microsoft/applicationinsights-react-js";
 
 const useStyles = createUseStyles({
   root: {
@@ -45,6 +50,13 @@ const Login = props => {
       .required("Password is required")
   });
 
+  const appInsights = useAppInsightsContext();
+
+  // appInsights.trackMetric("TDMCalculationContainer Component");
+  const trackLogin = useTrackEvent(appInsights, "Login");
+  const trackLoginFail = useTrackEvent(appInsights, "Login Failed");
+  const trackComponent = useTrackMetric(appInsights, "Login");
+
   const handleSubmit = async (
     { email, password },
     { setSubmitting },
@@ -55,6 +67,7 @@ const Login = props => {
 
       if (loginResponse.isSuccess) {
         setLoggedInAccount(loginResponse.user);
+        trackLogin({ user: loginResponse.user.id });
         window.dataLayer.push({
           event: "login",
           action: "success",
@@ -63,6 +76,7 @@ const Login = props => {
         history.push("/calculation/1");
       } else if (loginResponse.code === "AUTH_NOT_CONFIRMED") {
         try {
+          trackLoginFail({ reason: loginResponse.code });
           window.dataLayer.push({
             event: "customEvent",
             action: "login failed",
@@ -87,6 +101,7 @@ const Login = props => {
           setSubmitting(false);
         }
       } else if (loginResponse.code === "AUTH_NO_ACCOUNT") {
+        trackLoginFail({ user: email, reason: loginResponse.code });
         window.dataLayer.push({
           event: "customEvent",
           action: "login failed",
@@ -97,6 +112,7 @@ const Login = props => {
         new account.`);
         setSubmitting(false);
       } else {
+        trackLoginFail({ user: email, reason: loginResponse.code });
         window.dataLayer.push({
           event: "customEvent",
           action: "login failed",
@@ -108,6 +124,7 @@ const Login = props => {
         setSubmitting(false);
       }
     } catch (err) {
+      trackLoginFail({ user: email, reason: "unexpected error" });
       setErrorMsg(err.message);
     }
   };
@@ -117,7 +134,7 @@ const Login = props => {
       <div className={clsx("tdm-wizard", classes.tdmWizard)}>
         <div className="tdm-wizard-sidebar" />
         <SideBar />
-        <div className="tdm-wizard-content-container">
+        <div className="tdm-wizard-content-container" onClick={trackComponent}>
           <h1>Welcome to Los Angeles&rsquo; TDM Calculator</h1>
           <h3>Please sign into your account to save progress.</h3>
           <br />

client/src/components/Authorization/Login.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const ErrorPage = () => {
+  return <h1>An unhandled error occurred.</h1>;
+};
+
+export default ErrorPage;