Merge pull request #703 from CareTogether/client-updates

Client package updates & ESLint fixes

src/caretogether-pwa/package.json

@@ -2,49 +2,50 @@
   "name": "caretogether-pwa",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "dependencies": {
-    "@azure/msal-browser": "^2.38.3",
+    "@azure/msal-browser": "^3.10.0",
     "@azure/storage-blob": "^12.17.0",
-    "@date-io/date-fns": "^2.17.0",
+    "@date-io/date-fns": "^3.0.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@fullcalendar/core": "^6.1.11",
     "@fullcalendar/daygrid": "^6.1.11",
     "@fullcalendar/list": "^6.1.11",
     "@fullcalendar/react": "^6.1.11",
-    "@microsoft/applicationinsights-react-js": "^3.4.3",
-    "@microsoft/applicationinsights-web": "^2.8.17",
-    "@mui/icons-material": "^5.15.11",
-    "@mui/lab": "5.0.0-alpha.128",
-    "@mui/material": "^5.15.11",
-    "@mui/system": "^5.15.11",
-    "@mui/x-date-pickers": "^6.19.5",
-    "@testing-library/jest-dom": "^5.17.0",
+    "@microsoft/applicationinsights-react-js": "^17.1.0",
+    "@microsoft/applicationinsights-web": "^3.1.0",
+    "@mui/icons-material": "^5.15.12",
+    "@mui/lab": "5.0.0-alpha.167",
+    "@mui/material": "^5.15.12",
+    "@mui/system": "^5.15.12",
+    "@mui/x-date-pickers": "^6.19.6",
+    "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
-    "date-fns": "^2.30.0",
-    "dexie": "^3.2.5",
+    "date-fns": "^3.3.1",
+    "dexie": "^3.2.6",
     "dexie-react-hooks": "^1.1.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.1",
+    "react-router-dom": "^6.22.3",
     "recoil": "^0.7.7",
     "web-vitals": "^3.5.2"
   },
   "devDependencies": {
     "@types/jest": "^29.5.12",
-    "@types/node": "^18.19.18",
-    "@types/react": "^18.2.60",
-    "@types/react-dom": "^18.2.19",
+    "@types/node": "^20.11.25",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.3.5",
-    "typescript": "^4.9.5",
-    "vite": "^4.5.2"
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.5"
   },
   "scripts": {
     "dev": "vite",

src/caretogether-pwa/src/Activities/ActivityTimeline.tsx

@@ -18,7 +18,7 @@ export function ActivityTimeline({ family }: ActivityTimelineProps) {
 
   const activities = (family.partneringFamilyInfo?.history?.slice() || []).concat(
     family.volunteerFamilyInfo?.history?.slice() || []);
-  
+
   const unmatchedNotesAsActivities = family.notes?.filter(note =>
     activities?.every(a => a.noteId !== note.id))?.map(note =>
     ({
@@ -64,41 +64,41 @@ export function ActivityTimeline({ family }: ActivityTimelineProps) {
       sx={{ padding: 0 }}>
       {allActivitiesSorted?.map((activity, i) =>
         <TimelineItem key={i}>
-          <TimelineOppositeContent sx={{display: "none"}} />
+          <TimelineOppositeContent sx={{ display: "none" }} />
           <TimelineSeparator>
-            <TimelineDot sx={{width:36, height:36, textAlign:'center', display:'block'}}>
+            <TimelineDot sx={{ width: 36, height: 36, textAlign: 'center', display: 'block' }}>
               {activity instanceof ReferralRequirementCompleted || activity instanceof ArrangementRequirementCompleted
                 ? "✔"
                 : activity instanceof ChildLocationChanged
-                ? <PersonPinCircleIcon fontSize="medium" />
-                : <EditIcon fontSize="small" />}
+                  ? <PersonPinCircleIcon fontSize="medium" />
+                  : <EditIcon fontSize="small" />}
             </TimelineDot>
             {i < allActivitiesSorted.length - 1 && <TimelineConnector />}
           </TimelineSeparator>
-          <TimelineContent style={{width:200,wordWrap:'break-word',whiteSpace:'pre-wrap'}}>
-            <Box sx={{color: 'text.disabled', margin: 0, padding: 0}}>
-              <span style={{marginRight: 16}}>{format(activity.activityTimestampUtc!, "M/d/yy h:mm a")}</span>
+          <TimelineContent style={{ width: 200, wordWrap: 'break-word', whiteSpace: 'pre-wrap' }}>
+            <Box sx={{ color: 'text.disabled', margin: 0, padding: 0 }}>
+              <span style={{ marginRight: 16 }}>{format(activity.activityTimestampUtc!, "M/d/yy h:mm a")}</span>
               <PersonName person={userLookup(activity.userId)} />
             </Box>
             {activity instanceof ReferralRequirementCompleted || activity instanceof ArrangementRequirementCompleted
               ? activity.requirementName
               : activity instanceof ChildLocationChanged
-              ? <>
+                ? <>
                   <PersonName person={arrangementPartneringPerson(activity.arrangementId)} />
                   <span> &rarr; </span><PersonName
                     person={personLookup(activity.childLocationFamilyId, activity.childLocationReceivingAdultId)} />
                   <span> </span>({activity.plan === ChildLocationPlan.DaytimeChildCare
                     ? "daytime"
                     : activity.plan === ChildLocationPlan.OvernightHousing
-                    ? "overnight"
-                    : "parent"})
-                  
+                      ? "overnight"
+                      : "parent"})
+
                 </>
-              : activity instanceof ReferralOpened
-              ? "Referral opened"
-              : null}
+                : activity instanceof ReferralOpened
+                  ? "Referral opened"
+                  : null}
             {activity.uploadedDocumentId &&
-              <Box sx={{margin: 0, padding: 0}}>
+              <Box sx={{ margin: 0, padding: 0 }}>
                 📃 {documentLookup(activity.uploadedDocumentId)?.uploadedFileName}
               </Box>}
             {activity.noteId && <NoteCard familyId={family.family!.id!} note={noteLookup(activity.noteId)!} />}

src/caretogether-pwa/src/AppRoutes.tsx

@@ -32,8 +32,8 @@ function RouteMigrator() {
         roles: loc.roles
       }))
     })))}`);
-  
-  const [lastVisitedLocation, _] = useLocalStorage<LocationContext | null>(LAST_VISITED_LOCATION, null);
+
+  const [lastVisitedLocation,] = useLocalStorage<LocationContext | null>(LAST_VISITED_LOCATION, null);
   trace(`lastVisitedLocation contents: ${JSON.stringify(lastVisitedLocation)}`);
 
   useEffect(() => {
@@ -42,7 +42,7 @@ function RouteMigrator() {
     }
 
     let migrationTargetContext: LocationContext | null = null;
-    
+
     if (lastVisitedLocation) {
       migrationTargetContext = lastVisitedLocation;
     } else {
@@ -53,7 +53,7 @@ function RouteMigrator() {
         ? { organizationId: firstOrganization.organizationId!, locationId: firstLocation.locationId! }
         : null;
     }
-    
+
     if (migrationTargetContext != null) {
       //TODO: Only do this if the old path is a valid/migrate-able path to begin with.
       const target = `/org/${migrationTargetContext.organizationId}/${migrationTargetContext.locationId}${location.pathname}` +
@@ -85,9 +85,9 @@ function RouteError(): React.ReactElement {
 function LocationContextWrapper() {
   const trace = useScopedTrace("LocationContext");
   const { organizationId, locationId } = useParams<{ organizationId: string, locationId: string }>();
-  
+
   const [selectedLocationContext, setSelectedLocationContext] = useRecoilStateLoadable(selectedLocationContextState);
-  const [_, setLastVisitedLocation] = useLocalStorage<LocationContext | null>(LAST_VISITED_LOCATION, null);
+  const [, setLastVisitedLocation] = useLocalStorage<LocationContext | null>(LAST_VISITED_LOCATION, null);
 
   // We only need to change this on first load or when the location context actually changes.
   useEffect(() => {
@@ -101,17 +101,18 @@ function LocationContextWrapper() {
         `organizationId: '${organizationId}'` +
         `locationId: '${locationId}'`);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [organizationId, locationId, trace, setSelectedLocationContext]);
-  
+
   return (
     // We need to wait for this to have a value before rendering the child tree; otherwise,
     // the tree will suspend as soon as a data dependency on selectedLocationContextState is encountered, and
     // the effect above (that actually sets the selectedLocationContextState) will not fire.
     (selectedLocationContext.state === "hasValue" &&
-    // As an added benefit, we can also use this component to show the spinner when switching locations.
+      // As an added benefit, we can also use this component to show the spinner when switching locations.
       selectedLocationContext.contents.organizationId === organizationId &&
       selectedLocationContext.contents.locationId === locationId)
-    ? <ShellRootLayout>
+      ? <ShellRootLayout>
         <Routes>
           <Route index element={<Dashboard />} />
           <Route path="families/:familyId" element={<FamilyScreen />} />
@@ -122,7 +123,7 @@ function LocationContextWrapper() {
           <Route path="*" element={<RouteError />} />
         </Routes>
       </ShellRootLayout>
-    : <ProgressBackdrop opaque>
+      : <ProgressBackdrop opaque>
         <p>Setting location...</p>
       </ProgressBackdrop>
   );

src/caretogether-pwa/src/ApplicationInsightsService.tsx

@@ -2,8 +2,8 @@ import { ApplicationInsights, ITelemetryItem } from '@microsoft/applicationinsig
 import { ReactPlugin } from '@microsoft/applicationinsights-react-js';
 import { globalMsalInstance } from './Authentication/Auth';
 
-var aiReactPlugin = new ReactPlugin();
-var appInsights = new ApplicationInsights({
+const aiReactPlugin = new ReactPlugin();
+const appInsights = new ApplicationInsights({
   config: {
     connectionString: import.meta.env.VITE_APP_APPINSIGHTS_CONNECTIONSTRING,
     enableAutoRouteTracking: true,

src/caretogether-pwa/src/Authentication/Auth.ts

@@ -9,7 +9,7 @@ const config = {
   auth: {
     clientId: import.meta.env.VITE_APP_AUTH_CLIENT_ID,
     authority: import.meta.env.VITE_APP_AUTH_AUTHORITY,
-    knownAuthorities: [ import.meta.env.VITE_APP_AUTH_KNOWN_AUTHORITY ],
+    knownAuthorities: [import.meta.env.VITE_APP_AUTH_KNOWN_AUTHORITY],
     redirectUri: import.meta.env.VITE_APP_AUTH_REDIRECT_URI
   },
   cache: {
@@ -82,7 +82,7 @@ async function loginAndSetActiveAccountAsync(): Promise<string> {
       }
     }
   }
-  
+
   // Step 5: If one or more accounts was found but no active account is set, set the active account.
   let activeAccount = globalMsalInstance.getActiveAccount();
   trace(`Login`, `Active account is: ${activeAccount?.localAccountId}`);
@@ -140,7 +140,7 @@ async function loginAndSetActiveAccountAsync(): Promise<string> {
 }
 
 let userIdStateInitialized = false;
-const initializeUserIdStateAsync: AtomEffect<any> = params => {
+const initializeUserIdStateAsync: AtomEffect<string> = params => {
   trace(`InitializeUserIdStateAsync`, params.node.key);
   if (!userIdStateInitialized) {
     userIdStateInitialized = true;

src/caretogether-pwa/src/Authentication/AuthenticationWrapper.tsx

@@ -10,7 +10,7 @@ function AuthenticatedUserWrapper({ children }: React.PropsWithChildren) {
   // This will suspend until a user ID has been set by the `userIdState` initialization logic.
   const userId = useLoadable(userIdState);
   trace(`userId: ${userId}`);
-  
+
   return (
     <>
       {userId

src/caretogether-pwa/src/Communities/AddMemberFamiliesForm.tsx

@@ -48,7 +48,7 @@ export function AddMemberFamiliesForm({ community, onClose }: AddMemberFamiliesF
         a.family!.primaryFamilyContactPersonId === adult.item1!.id)!.item1!;
       const bPrimaryContact = b.family!.adults!.find(adult =>
         b.family!.primaryFamilyContactPersonId === adult.item1!.id)!.item1!;
-      
+
       const aFirst = aPrimaryContact.firstName!;
       const aLast = aPrimaryContact.lastName!;
       const bFirst = bPrimaryContact.firstName!;
@@ -57,7 +57,7 @@ export function AddMemberFamiliesForm({ community, onClose }: AddMemberFamiliesF
       // Sort by last name, then by first name (of the family's primary contact)
       return aLast < bLast ? -1 : aLast > bLast ? 1 :
         aFirst < bFirst ? -1 : aFirst > bFirst ? 1 :
-        0;
+          0;
     }).map(family => ({
       id: family.family!.id!,
       label: familyNameString(family)
@@ -69,10 +69,10 @@ export function AddMemberFamiliesForm({ community, onClose }: AddMemberFamiliesF
         <h3>Add Member Families</h3>
       </Grid>
       <Grid item xs={12}>
-        <FormControl required fullWidth size="small" sx={{marginTop: 1}}> 
+        <FormControl required fullWidth size="small" sx={{ marginTop: 1 }}>
           <Autocomplete
             multiple clearOnEscape disableCloseOnSelect
-            onChange={(event: any, newValue: CandidateFamily[]) => {
+            onChange={(_event, newValue: CandidateFamily[]) => {
               setFamilies(newValue);
             }}
             options={candidateFamilies}

src/caretogether-pwa/src/Communities/AddRoleAssignmentForm.tsx

@@ -44,19 +44,19 @@ export function AddRoleAssignmentForm({ community, onClose }: AddRoleAssignmentF
 
   const allFamilies = useRecoilValue(visibleFamiliesQuery);
   const allAdults = allFamilies.flatMap(family => family.family!.adults!.map(adult => adult.item1!)).sort((a, b) => {
-      const aFirst = a.firstName!;
-      const aLast = a.lastName!;
-      const bFirst = b.firstName!;
-      const bLast = b.lastName!;
+    const aFirst = a.firstName!;
+    const aLast = a.lastName!;
+    const bFirst = b.firstName!;
+    const bLast = b.lastName!;
 
-      // Sort by last name, then by first name
-      return aLast < bLast ? -1 : aLast > bLast ? 1 :
-        aFirst < bFirst ? -1 : aFirst > bFirst ? 1 :
+    // Sort by last name, then by first name
+    return aLast < bLast ? -1 : aLast > bLast ? 1 :
+      aFirst < bFirst ? -1 : aFirst > bFirst ? 1 :
         0;
-    }).map(person => ({
-      id: person.id!,
-      label: personNameString(person)
-    } as CandidatePerson));
+  }).map(person => ({
+    id: person.id!,
+    label: personNameString(person)
+  } as CandidatePerson));
 
   const organizationConfiguration = useRecoilValue(organizationConfigurationQuery);
   const communityRoles = organizationConfiguration?.communityRoles || [];
@@ -70,10 +70,10 @@ export function AddRoleAssignmentForm({ community, onClose }: AddRoleAssignmentF
         <h3>Add Community Role Assignments</h3>
       </Grid>
       <Grid item xs={12}>
-        <FormControl required fullWidth size="small" sx={{marginTop: 1}}> 
+        <FormControl required fullWidth size="small" sx={{ marginTop: 1 }}>
           <Autocomplete
             clearOnEscape
-            onChange={(event: any, newValue: CandidatePerson | null) => {
+            onChange={(_event, newValue: CandidatePerson | null) => {
               setPerson(newValue);
             }}
             options={allAdults}
@@ -88,7 +88,7 @@ export function AddRoleAssignmentForm({ community, onClose }: AddRoleAssignmentF
           <RadioGroup
             aria-labelledby="role"
             value={role || ""}
-            onChange={(event, newValue) => setRole(newValue)}
+            onChange={(_event, newValue) => setRole(newValue)}
           >
             {communityRoles.map(role =>
               <FormControlLabel key={role} value={role}