OCD-5355: angularJS rewrites

.yarnrc.yml

@@ -20,4 +20,4 @@ packageExtensions:
     dependencies:
       node-gyp: ^8.2.0
 
-yarnPath: .yarn/releases/yarn-4.17.0.cjs
+yarnPath: .yarn/releases/yarn-4.17.1.cjs

package.json

@@ -47,7 +47,6 @@
     "moment": "^2.29.4",
     "ng-file-upload": "^12.2.13",
     "ng-idle": "^1.3.2",
-    "ngstorage": "^0.3.11",
     "notistack": "^1.0.10",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
@@ -116,5 +115,5 @@
   "engines": {
     "node": ">=0.10.0"
   },
-  "packageManager": "yarn@4.17.0"
+  "packageManager": "yarn@4.17.1"
 }

src/app/api/api-keys.jsx

@@ -26,8 +26,15 @@ const usePostConfirmApiKey = () => {
     .then((response) => response.data));
 };
 
+const usePostRequestApiKey = () => {
+  const axios = useAxios();
+  return useMutation(async (data) => axios.post('key/request', data)
+    .then((response) => response.data));
+};
+
 export {
   useDeleteKey,
   useFetchApiKeys,
   usePostConfirmApiKey,
+  usePostRequestApiKey,
 };

src/app/api/axios.jsx

@@ -10,7 +10,6 @@ import { UserContext } from 'shared/contexts';
 const AxiosContext = createContext();
 
 function AxiosProvider({ children }) {
-  const $localStorage = getAngularService('$localStorage');
   const authService = getAngularService('authService');
   const { enqueueSnackbar } = useSnackbar();
   const { setLoginWidgetState } = useContext(UserContext);
@@ -24,18 +23,14 @@ function AxiosProvider({ children }) {
     });
 
     const requestRefresh = (refreshToken) => {
-      const user = JSON.parse(localStorage.getItem('ngStorage-currentUser'));
-      const { cognitoId } = user;
+      const { cognitoId } = JSON.parse(localStorage.getItem('ngStorage-currentUser'));
       const headers = {
         'API-Key': '12909a978483dfb8ecd0596c98ae9094',
       };
       if (cognitoId) {
         // Notice that this is the global axios instance, not the axiosInstance!  <-- important
         return Axios.post('rest/auth/refresh-token', { refreshToken, cognitoId }, { headers })
-          .then((response) => {
-            $localStorage.jwtToken = response.data.accessToken;
-            return response.data.accessToken;
-          })
+          .then((response) => response.data.accessToken)
           .catch(() => {
             setLoginWidgetState('SIGNIN');
             authService.logout();
@@ -53,11 +48,7 @@ function AxiosProvider({ children }) {
       };
       updated.headers['API-Key'] = '12909a978483dfb8ecd0596c98ae9094';
       let accessToken = '';
-      if (JSON.parse(localStorage.getItem('ngStorage-currentUser'))?.cognitoId) {
-        accessToken = await getAccessToken();
-      } else if (JSON.parse(localStorage.getItem('ngStorage-currentUser'))?.userId) {
-        accessToken = $localStorage.jwtToken;
-      }
+      accessToken = await getAccessToken();
       if (accessToken) {
         updated.headers.Authorization = `Bearer ${accessToken}`;
       }

src/app/api/listing.jsx

@@ -1,4 +1,9 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  useMutation,
+  useQueries,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query';
 
 import { useAxios } from './axios';
 import options from './options';
@@ -39,6 +44,19 @@ const useFetchListing = ({ id, fetched = false, enabled = true }) => {
   });
 };
 
+const useFetchListings = ({ ids }) => {
+  const axios = useAxios();
+  return useQueries({
+    queries: ids.map((id) => ({
+      queryKey: ['listing-basic', id],
+      queryFn: async () => {
+        const response = await axios.get(`certified_products/${id}`);
+        return response.data;
+      },
+    })),
+  });
+};
+
 const useFetchRelatedListings = ({ id }) => {
   const axios = useAxios();
   return useQuery(['relatedListings', id], async () => {
@@ -84,6 +102,7 @@ export {
   useDeleteSurveillance,
   useFetchIcsFamilyData,
   useFetchListing,
+  useFetchListings,
   useFetchRelatedListings,
   usePostSurveillance,
   usePutListing,

src/app/components/api-key/api-key-registration.jsx

@@ -14,8 +14,8 @@ import { useSnackbar } from 'notistack';
 import { useFormik } from 'formik';
 import * as yup from 'yup';
 
+import { usePostRequestApiKey } from 'api/api-keys';
 import { eventTrack } from 'services/analytics.service';
-import { getAngularService } from 'services/angular-react-helper';
 import { useAnalyticsContext } from 'shared/contexts';
 import { palette } from 'themes';
 
@@ -40,8 +40,8 @@ const validationSchema = yup.object({
 });
 
 function ChplApiKeyRegistration() {
+  const { mutate } = usePostRequestApiKey();
   const { enqueueSnackbar } = useSnackbar();
-  const networkService = getAngularService('networkService');
   const { analytics } = useAnalyticsContext();
   const classes = useStyles();
   let formik = {};
@@ -54,15 +54,16 @@ function ChplApiKeyRegistration() {
   };
 
   const createRequest = (values) => {
-    networkService.requestApiKey({ email: values.email, name: values.nameOrganization })
-      .then((response) => {
+    mutate({ email: values.email, name: values.nameOrganization }, {
+      onSuccess: (response) => {
         if (response.success) {
           enqueueSnackbar(`To confirm your email address, an email was sent to: ${values.email}  Please follow the instructions in the email to obtain your API key.`, {
             variant: 'success',
           });
           formik.resetForm();
         }
-      }, (error) => {
+      },
+      onError: (error) => {
         if (error.data.error) {
           enqueueSnackbar(error.data.error, {
             variant: 'error',
@@ -72,7 +73,8 @@ function ChplApiKeyRegistration() {
             variant: 'error',
           });
         }
-      });
+      },
+    });
   };
 
   formik = useFormik({

src/app/components/browser/browser-wrapper.jsx

@@ -1,30 +1,30 @@
 import React from 'react';
 import { node } from 'prop-types';
 
-import { getAngularService } from 'services/angular-react-helper';
+import { useLocalStorage as useStorage } from 'services/storage.service';
 import { BrowserContext } from 'shared/contexts';
 
-function BrowserWrapper(props) {
-  const $localStorage = getAngularService('$localStorage');
-  const { children } = props;
+function BrowserWrapper({ children }) {
+  const [previouslyCompared, setPreviouslyCompared] = useStorage('ngStorage-previouslyCompared', []);
+  const [previouslyViewed, setPreviouslyViewed] = useStorage('ngStorage-previouslyViewed', []);
 
   const addToCompared = (listing) => {
-    const next = [listing.id]
-      .concat(($localStorage?.previouslyCompared ?? []).filter((id) => id !== listing.id))
-      .slice(0, 20);
-    $localStorage.previouslyCompared = next;
+    setPreviouslyCompared((prev) => [
+      listing.id,
+      ...prev.filter((id) => id !== listing.id),
+    ].slice(0, 20));
   };
 
   const addToViewed = (listing) => {
-    const next = [listing.id]
-      .concat(($localStorage?.previouslyViewed ?? []).filter((id) => id !== listing.id))
-      .slice(0, 20);
-    $localStorage.previouslyViewed = next;
+    setPreviouslyViewed((prev) => [
+      listing.id,
+      ...prev.filter((id) => id !== listing.id),
+    ].slice(0, 20));
   };
 
-  const getPreviouslyCompared = () => $localStorage?.previouslyCompared ?? [];
+  const getPreviouslyCompared = () => previouslyCompared ?? [];
 
-  const getPreviouslyViewed = () => $localStorage?.previouslyViewed ?? [];
+  const getPreviouslyViewed = () => previouslyViewed ?? [];
 
   const browserState = {
     addToCompared,

src/app/components/components.module.js

@@ -19,7 +19,6 @@ angular
     'ngCytoscape',
     'ngFileUpload',
     'ngResource',
-    'ngStorage',
     'ui.bootstrap',
     'ui.router',
   ])

src/app/components/login/user-wrapper.jsx

@@ -11,7 +11,6 @@ import { getAngularService } from 'services/angular-react-helper';
 import { UserContext, useAnalyticsContext } from 'shared/contexts';
 
 function UserWrapper({ children = <ChplLogin /> }) {
-  const $localStorage = getAngularService('$localStorage');
   const $rootScope = getAngularService('$rootScope');
   const authService = getAngularService('authService');
   const { analytics } = useAnalyticsContext();
@@ -59,9 +58,9 @@ function UserWrapper({ children = <ChplLogin /> }) {
     setUser({});
     removeCookie('cognito_id');
     removeCookie('refresh_token');
-    delete $localStorage.jwtToken;
-    delete $localStorage.refreshToken;
-    delete $localStorage.currentUser;
+    localStorage.removeItem('ngStorage-jwtToken');
+    localStorage.removeItem('ngStorage-refreshToken');
+    localStorage.removeItem('ngStorage-currentUser');
     setLoginWidgetState('SIGNIN');
     clearAuthTokens();
     $rootScope.$broadcast('loggedOut');

src/app/components/surveillance/complaints/complaint-edit.jsx

@@ -23,6 +23,7 @@ import * as yup from 'yup';
 import { useFetchAcbs } from 'api/acbs';
 import { useDeleteComplaint, usePostComplaint, usePutComplaint } from 'api/complaints';
 import { useFetchComplaintTypes, useFetchComplainantTypes } from 'api/data';
+import { useFetchListings as useFetchListingsBasic } from 'api/listing';
 import { useFetchListings } from 'api/search';
 import { useFetchCriteria } from 'api/standards';
 import { ChplTextField } from 'components/util';
@@ -93,9 +94,7 @@ const validationSchema = yup.object({
     }),
 });
 
-function ChplComplaintEdit(props) {
-  const networkService = getAngularService('networkService');
-  const { complaint: initialComplaint, dispatch } = props;
+function ChplComplaintEdit({ complaint: initialComplaint, dispatch }) {
   const [certificationBodies, setCertificationBodies] = useState([]);
   const [complainantTypes, setComplainantTypes] = useState([]);
   const [complaintTypes, setComplaintTypes] = useState([]);
@@ -124,6 +123,9 @@ function ChplComplaintEdit(props) {
     sortDescending: false,
     query,
   });
+  const fetchSurveillanceListings = useFetchListingsBasic({
+    ids: complaint.listings?.map((l) => l.listingId) ?? [],
+  });
   const classes = useStyles();
   let formik;
 
@@ -167,33 +169,35 @@ function ChplComplaintEdit(props) {
   }, [listingsData, listingsIsLoading, listingsIsSuccess]);
 
   useEffect(() => {
-    const acbQuery = formik.values.certificationBody ? `certificationBodies=${formik.values.certificationBody.name}` : undefined;
-    const listingQuery = listingValueToAdd ? `searchTerm=${listingValueToAdd}` : undefined;
-    setQuery([acbQuery, listingQuery].filter((v) => v).join('&'));
-  }, [formik?.values?.certificationBody, listingValueToAdd]);
-
-  useEffect(() => {
-    setSurveillances([]);
-    complaint.listings?.forEach((listing) => {
-      networkService.getListingBasic(listing.listingId, true).then((response) => {
-        const newSurveillances = response.surveillance.map((surv) => ({
-          id: surv.id,
-          friendlyId: surv.friendlyId,
-          listingId: response.id,
-          certifiedProductId: response.id,
-          chplProductNumber: response.chplProductNumber,
-        }));
-        setSurveillances((original) => [
+    fetchSurveillanceListings.forEach((f) => {
+      if (f.isLoading || f.isError || !f.data) { return; }
+      setSurveillances((original) => {
+        const newSurveillances = f.data.surveillance
+          .map((surv) => ({
+            id: surv.id,
+            friendlyId: surv.friendlyId,
+            listingId: f.data.id,
+            certifiedProductId: f.data.id,
+            chplProductNumber: f.data.chplProductNumber,
+          }))
+          .filter((s) => !original.some((o) => o.id === s.id));
+        return [
           ...original,
           ...newSurveillances,
         ].sort((a, b) => {
           if (a.chplProductNumber < b.chplProductNumber) { return -1; }
           if (a.chplProductNumber > b.chplProductNumber) { return 1; }
           return a.friendlyId < b.friendlyId ? -1 : 1;
-        }));
+        });
       });
     });
-  }, [complaint.listings]);
+  }, [fetchSurveillanceListings]);
+
+  useEffect(() => {
+    const acbQuery = formik.values.certificationBody ? `certificationBodies=${formik.values.certificationBody.name}` : undefined;
+    const listingQuery = listingValueToAdd ? `searchTerm=${listingValueToAdd}` : undefined;
+    setQuery([acbQuery, listingQuery].filter((v) => v).join('&'));
+  }, [formik?.values?.certificationBody, listingValueToAdd]);
 
   const handleAction = (action, payload) => {
     dispatch({ action, payload });
@@ -655,7 +659,7 @@ function ChplComplaintEdit(props) {
                    <ul className={classes.chips}>
                      {complaint.surveillances
                        .map((surveillance) => (
-                         <li key={surveillance.id}>
+                         <li key={`${surveillance.surveillance.chplProductNumber}-${surveillance.surveillance.friendlyId}`}>
                            <Chip
                              label={`${surveillance.surveillance.chplProductNumber}: ${surveillance.surveillance.friendlyId}`}
                              onDelete={() => removeAssociatedSurveillance(surveillance)}
@@ -668,7 +672,7 @@ function ChplComplaintEdit(props) {
                    </ul>
                  </>
                )}
-              {surveillances.length > 0
+              { surveillances.length > 0
                && (
                  <ChplTextField
                    select

src/app/components/util/chpl-page-header.jsx

@@ -11,10 +11,12 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { node, string } from 'prop-types';
 
 import { eventTrack } from 'services/analytics.service';
+import { useAnalyticsContext } from 'shared/contexts';
 import { palette } from 'themes';
 
 function ChplPageHeader({ text, subtitle }) {
   const [expanded, setExpanded] = useState(true);
+  const { analytics } = useAnalyticsContext();
 
   return (
     <Box position="relative" boxShadow={2} bgcolor={palette.white} p={8}>
@@ -32,8 +34,8 @@ function ChplPageHeader({ text, subtitle }) {
                   const next = !expanded;
                   setExpanded(next);
                   eventTrack({
+                    ...analytics,
                     event: next ? 'Show Page Header Information' : 'Hide Page Header Information',
-                    label: text,
                   });
                 }}
                 endIcon={expanded ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}

src/app/index.js

@@ -16,7 +16,6 @@ import /* ngResource from */ 'angular-resource';
 import /* ngSanitize from */ 'angular-sanitize';
 import /* uiBoostrap from */ 'angular-ui-bootstrap';
 import /* ngFileSaver from */ 'angular-file-saver';
-import /* ngStorage from */ 'ngstorage';
 import 'angular-ui-router';
 
 // import app modules
@@ -26,7 +25,6 @@ import compare from './pages/compare/index';
 import /* complianceDashboardModule from */ './pages/compliance-dashboard/index';
 import /* componentsModule from */ './components/index';
 import listing from './pages/listing/index';
-import /* navigationModule from */ './navigation/index';
 import organizations from './pages/organizations/index';
 import reports from './pages/reports/index';
 import resources from './pages/resources/index';
@@ -54,7 +52,6 @@ const dependencies = [
   'ngCytoscape',
   'ngFileSaver',
   'ngResource',
-  'ngStorage',
   'ngSanitize',
   'ui.bootstrap',
   'ui.router',
@@ -73,7 +70,6 @@ const dependencies = [
   'chpl.search',
   'chpl.components',
   'chpl.constants',
-  'chpl.navigation',
   'chpl.registration',
   'chpl.shared',
 ];