#2815 make progress bar reactive

src/backend/src/prisma/seed.ts

@@ -1980,7 +1980,7 @@ const performSeed: () => Promise<void> = async () => {
     batman,
     'Include your major and/or year',
     [],
-    false,
+    true,
     null,
     null,
     joinSlackChecklist.checklistId,

src/backend/src/services/onboarding.services.ts

@@ -36,7 +36,15 @@ export default class OnboardingServices {
         dateDeleted: null,
         parentChecklistId: null
       },
-      include: { subtasks: true, teamType: true, usersChecked: true }
+      include: {
+        subtasks: {
+          include: {
+            usersChecked: true
+          }
+        },
+        teamType: true,
+        usersChecked: true
+      }
     });
     return generalChecklists;
   }
@@ -84,7 +92,14 @@ export default class OnboardingServices {
         teamTypeId: { in: teamTypeIds },
         parentChecklistId: null
       },
-      include: { subtasks: true, teamType: true }
+      include: {
+        subtasks: {
+          include: {
+            usersChecked: true
+          }
+        },
+        teamType: true
+      }
     });
 
     const teamChecklists = await prisma.checklist.findMany({
@@ -94,7 +109,14 @@ export default class OnboardingServices {
         teamId: { in: teamIds },
         parentChecklistId: null
       },
-      include: { subtasks: true, team: true }
+      include: {
+        subtasks: {
+          include: {
+            usersChecked: true
+          }
+        },
+        team: true
+      }
     });
 
     return [...teamTypeChecklists, ...teamChecklists];
@@ -400,9 +422,9 @@ export default class OnboardingServices {
       });
 
       if (parentChecklist) {
-        const allSubtasksChecked = parentChecklist.subtasks.every((subtask) =>
-          subtask.usersChecked.some((user) => user.userId === userId)
-        );
+        const allSubtasksChecked = parentChecklist.subtasks
+          .filter((subtask) => !subtask.isOptional)
+          .every((subtask) => subtask.usersChecked.some((user) => user.userId === userId));
         if (allSubtasksChecked) {
           await prisma.checklist.update({
             where: { checklistId: parentChecklist.checklistId },

src/backend/tests/unmocked/onboarding.test.ts

@@ -83,8 +83,8 @@ describe('Onboarding tests', () => {
 
       const checkedChecklists = await OnboardingServices.getCheckedChecklists(batman, organization);
       expect(checkedChecklists.length).toEqual(2);
-      expect(checkedChecklists[0].checklistId).toEqual(checklist1.checklistId);
-      expect(checkedChecklists[1].checklistId).toEqual(checklist3.checklistId);
+      expect(checkedChecklists.some((checklist) => checklist.checklistId === checklist1.checklistId)).toBeTruthy();
+      expect(checkedChecklists.some((checklist) => checklist.checklistId === checklist3.checklistId)).toBeTruthy();
     });
   });
 
@@ -109,8 +109,8 @@ describe('Onboarding tests', () => {
       const checklist3 = await createTestChecklist(batman, orgId, 'Checklist 3', undefined, team1.teamId);
       const teamTypeChecklists = await OnboardingServices.getUsersChecklists(batman.userId, organization);
       expect(teamTypeChecklists.length).toEqual(2);
-      expect(teamTypeChecklists[0].checklistId).toEqual(checklist1.checklistId);
-      expect(teamTypeChecklists[1].checklistId).toEqual(checklist3.checklistId);
+      expect(teamTypeChecklists.some((checklist) => checklist.checklistId === checklist1.checklistId)).toBeTruthy();
+      expect(teamTypeChecklists.some((checklist) => checklist.checklistId === checklist3.checklistId)).toBeTruthy();
     });
   });
 

src/frontend/src/apis/onboarding.api.ts

@@ -34,7 +34,7 @@ export const getCheckedChecklists = () => {
  * API call to fetch all the users checklists
  */
 export const getUsersChecklists = () => {
-  return axios.get<Checklist[]>(apiUrls.usersTeamTypeChecklists(), {
+  return axios.get<Checklist[]>(apiUrls.usersChecklists(), {
     transformResponse: (data) => JSON.parse(data)
   });
 };
@@ -54,6 +54,7 @@ export const toggleChecklist = (payload: ToggleChecklistPayload) => {
     ...payload
   });
 };
+
 /**
  * API Call to download a google image
  * @param fileId file id to be downloaded

src/frontend/src/hooks/onboarding.hook.ts

@@ -9,6 +9,8 @@ import {
   toggleChecklist,
   getCheckedChecklists
 } from '../apis/onboarding.api';
+import { useEffect, useState } from 'react';
+import { isChecklistChecked } from '../utils/onboarding.utils';
 
 export interface ToggleChecklistPayload {
   checklistId: string;
@@ -35,8 +37,8 @@ export const useCheckedChecklists = () => {
   });
 };
 
-export const useUsersTeamTypeChecklists = () => {
-  return useQuery<Checklist[], Error>(['checklists', 'teamTypeChecklists'], async () => {
+export const useUsersChecklists = () => {
+  return useQuery<Checklist[], Error>(['checklists'], async () => {
     const { data } = await getUsersChecklists();
     return data;
   });
@@ -108,3 +110,20 @@ export const useGetImageUrls = (imageFileIds: (string | null)[]) => {
     }
   );
 };
+
+export const useChecklistProgress = (parentChecklists: Checklist[], checkedChecklists: Checklist[]) => {
+  const [progress, setProgress] = useState(0);
+  useEffect(() => {
+    if (!checkedChecklists || parentChecklists.length === 0) return;
+
+    const totalChecklistsLength = parentChecklists.length;
+
+    const completedChecklistsLength = parentChecklists.reduce((count, checklist) => {
+      return isChecklistChecked(checkedChecklists, checklist) ? count + 1 : count;
+    }, 0);
+
+    setProgress((completedChecklistsLength / totalChecklistsLength) * 100);
+  }, [parentChecklists, checkedChecklists]);
+
+  return progress;
+};

src/frontend/src/pages/AdminToolsPage/RecruitmentConfig/AdminToolsRecruitmentConfig.tsx

@@ -6,7 +6,7 @@ import NERUploadButton from '../../../components/NERUploadButton';
 import React, { useState } from 'react';
 import { useCurrentOrganization, useSetOrganizationImages } from '../../../hooks/organizations.hooks';
 import LoadingIndicator from '../../../components/LoadingIndicator';
-import { useGetImageUrl } from '../../../hooks/onboarding.hooks';
+import { useGetImageUrl } from '../../../hooks/onboarding.hook';
 import ErrorPage from '../../ErrorPage';
 
 const AdminToolsRecruitmentConfig: React.FC = () => {

src/frontend/src/pages/HomePage/GuestHomePage.tsx

@@ -9,7 +9,7 @@ import { useHomePageContext } from '../../app/HomePageContext';
 import { useCurrentOrganization } from '../../hooks/organizations.hooks';
 import LoadingIndicator from '../../components/LoadingIndicator';
 import ErrorPage from '../ErrorPage';
-import { useGetImageUrl } from '../../hooks/onboarding.hooks';
+import { useGetImageUrl } from '../../hooks/onboarding.hook';
 
 const GuestHomePage = () => {
   const user = useCurrentUser();

src/frontend/src/pages/HomePage/OnboardingHomePage.tsx

@@ -1,4 +1,4 @@
-import { Box, Grid, Typography } from '@mui/material';
+import { Box, Grid, Typography, useTheme } from '@mui/material';
 import PageLayout from '../../components/PageLayout';
 import { useCurrentOrganization } from '../../hooks/organizations.hooks';
 import React, { useEffect, useState } from 'react';
@@ -9,14 +9,24 @@ import ChecklistSection from './components/ChecklistSection';
 import OnboardingInfoSection from './components/OnboardingInfoSection';
 import ConfirmOnboardingChecklistModal from './components/ConfirmOnboardingChecklistModal';
 import { NERButton } from '../../components/NERButton';
+import {
+  useCheckedChecklists,
+  useUsersChecklists,
+  useAllChecklists,
+  useChecklistProgress
+} from '../../hooks/onboarding.hook';
+import { Checklist } from 'shared';
 import { useToggleCompletedOnboarding } from '../../hooks/users.hooks';
 import { useToast } from '../../hooks/toasts.hooks';
+import OnboardingProgressBar from '../../components/OnboardingProgressBar';
 
 const OnboardingHomePage = () => {
   const { data: organization, isError, error, isLoading } = useCurrentOrganization();
   const { setCurrentHomePage } = useHomePageContext();
   const [isModalOpen, setModalOpen] = useState(false);
 
+  const theme = useTheme();
+
   const toast = useToast();
 
   const toggleCompletedOnboarding = useToggleCompletedOnboarding();
@@ -25,9 +35,59 @@ const OnboardingHomePage = () => {
     setCurrentHomePage('onboarding');
   }, [setCurrentHomePage]);
 
-  if (!organization || isLoading) return <LoadingIndicator />;
+  const {
+    data: allChecklists,
+    isError: allChecklistsIsError,
+    error: allChecklistsError,
+    isLoading: allChecklistsIsLoading
+  } = useAllChecklists();
+
+  const {
+    data: usersChecklists,
+    isError: usersChecklistsIsError,
+    error: usersChecklistsError,
+    isLoading: usersChecklistsIsLoading
+  } = useUsersChecklists();
+
+  const {
+    data: checkedChecklists,
+    isLoading: checkedChecklistsLoading,
+    isError: checkedChecklistsIsError,
+    error: checkedChecklistsError
+  } = useCheckedChecklists();
+
+  const generalChecklists =
+    allChecklists?.filter((checklist: Checklist) => checklist.team === null && checklist.teamType === null) || [];
+
+  const progress = useChecklistProgress([...generalChecklists, ...(usersChecklists || [])], checkedChecklists || []);
+
   if (isError) return <ErrorPage message={error?.message} />;
 
+  if (usersChecklistsIsError) {
+    return <ErrorPage error={usersChecklistsError} />;
+  }
+
+  if (checkedChecklistsIsError) {
+    return <ErrorPage error={checkedChecklistsError} />;
+  }
+
+  if (allChecklistsIsError) {
+    return <ErrorPage error={allChecklistsError} />;
+  }
+
+  if (
+    !organization ||
+    isLoading ||
+    usersChecklistsIsLoading ||
+    !usersChecklists ||
+    checkedChecklistsLoading ||
+    !checkedChecklists ||
+    allChecklistsIsLoading ||
+    !allChecklists
+  ) {
+    return <LoadingIndicator />;
+  }
+
   const handleOpenModal = () => {
     setModalOpen(true);
   };
@@ -48,11 +108,9 @@ const OnboardingHomePage = () => {
         <Grid item xs={12} md={7}>
           <Typography sx={{ fontSize: '2.5em' }}>Welcome to the {organization.name} Team</Typography>
         </Grid>
-        <Grid item xs={12} md={5} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-          <NERButton variant="contained" onClick={handleOpenModal}>
-            Finished?
-          </NERButton>
-        </Grid>
+        <NERButton variant="contained" disabled={progress < 100} onClick={handleOpenModal}>
+          Finished?
+        </NERButton>
       </Grid>
       <Grid
         container
@@ -62,6 +120,28 @@ const OnboardingHomePage = () => {
           flexDirection: 'column'
         }}
       >
+        <Box display="flex" justifyContent="center">
+          <Box
+            sx={{
+              backgroundColor: theme.palette.background.paper,
+              borderRadius: 5,
+              p: 3.5,
+              flexGrow: 1,
+              width: '100%',
+              mt: 5,
+              ml: 4,
+              display: 'flex',
+              alignItems: 'center'
+            }}
+          >
+            <OnboardingProgressBar
+              value={Math.round(progress)}
+              text={`Complete`}
+              typographySx={{ fontSize: '1.2em' }}
+              progressBarSx={{ height: '3vh' }}
+            />
+          </Box>
+        </Box>
         <Box display={'flex'} justifyContent={'center'}>
           <Typography sx={{ fontSize: '2em', mt: 4, ml: 2 }}>Progress Bar</Typography>
         </Box>
@@ -78,7 +158,11 @@ const OnboardingHomePage = () => {
               padding: 2
             }}
           >
-            <ChecklistSection />
+            <ChecklistSection
+              usersChecklists={usersChecklists}
+              checkedChecklists={checkedChecklists}
+              generalChecklists={generalChecklists}
+            />
           </Grid>
           <Grid container item xs={12} md={5} sx={{ display: 'flex', flexDirection: 'column', gap: 2.5, mt: 4 }}>
             <Grid item>