Merge pull request #2216 from Northeastern-Electric-Racing/#2132-user-schedule-settings

#2132: Schedule Settings Section

Author: RChandler234

src/backend/src/services/users.services.ts

@@ -1,4 +1,4 @@
-import { User_Settings, User as PrismaUser, Schedule_Settings } from '@prisma/client';
+import { User_Settings, User as PrismaUser } from '@prisma/client';
 import { OAuth2Client } from 'google-auth-library/build/src/auth/oauth2client';
 import {
   AuthenticatedUser,
@@ -353,7 +353,7 @@ export default class UsersService {
     personalGmail: string,
     personalZoomLink: string,
     availability: number[]
-  ): Promise<Schedule_Settings> {
+  ): Promise<UserScheduleSettings> {
     const existingUser = await prisma.schedule_Settings.findFirst({
       where: { personalGmail, userId: { not: user.userId } } // excludes the current user from check
     });
@@ -376,6 +376,6 @@ export default class UsersService {
         availability
       }
     });
-    return newUserScheduleSettings;
+    return userScheduleSettingsTransformer(newUserScheduleSettings);
   }
 }

src/backend/tests/users.test.ts

@@ -173,7 +173,7 @@ describe('Users', () => {
       vi.spyOn(prisma.schedule_Settings, 'upsert').mockResolvedValue(batmanScheduleSettings);
       const res = await UsersService.setUserScheduleSettings(batman, 'batman@gmail.com', 'https://zoom.com', [1, 2]);
 
-      expect(res).toBe(batmanScheduleSettings);
+      expect(res).toStrictEqual(batmanUserScheduleSettings);
     });
 
     test('setting same email does not work', async () => {

src/frontend/src/apis/users.api.ts

@@ -4,7 +4,7 @@
  */
 
 import axios from '../utils/axios';
-import { Project, User, UserSecureSettings } from 'shared';
+import { Project, User, UserScheduleSettings, UserSecureSettings } from 'shared';
 import { apiUrls } from '../utils/urls';
 import { authUserTransformer, userTransformer } from './transformers/users.transformers';
 import { AuthenticatedUser, UserSettings } from 'shared';
@@ -93,6 +93,16 @@ export const getUserSecureSettings = (id: number) => {
   return axios.get<UserSecureSettings>(apiUrls.userSecureSettings(`${id}`));
 };
 
+/**
+ * Fetch a user's schedule settings
+ *
+ * @param userId User ID of the requested user's schedule settings
+ * @returns the schedule settings
+ */
+export const getUserScheduleSettings = (userId: number) => {
+  return axios.get<UserScheduleSettings>(apiUrls.userScheduleSettings(`${userId}`));
+};
+
 /**
  * Update the given user's settings by UserId
  */
@@ -107,6 +117,13 @@ export const updateUserSecureSettings = (settings: UserSecureSettings) => {
   return axios.post<{ message: string }>(apiUrls.userSecureSettingsSet(), settings);
 };
 
+/**
+ * Update the given user's schedule settings by UserId
+ */
+export const updateUserScheduleSettings = (settings: UserScheduleSettings) => {
+  return axios.post<UserScheduleSettings>(apiUrls.userScheduleSettingsSet(), settings);
+};
+
 export const updateUserRole = (id: number, role: string) => {
   return axios.post<{ message: string }>(apiUrls.userRoleByUserId(`${id}`), { role });
 };

…arPage/SchedulingComponents/TimeSlot.tsx src/frontend/src/components/TimeSlot.tsxsrc/frontend/src/pages/CalendarPage/SchedulingComponents/TimeSlot.tsx renamed to src/frontend/src/components/TimeSlot.tsx src/frontend/src/pages/CalendarPage/SchedulingComponents/TimeSlot.tsx renamed to src/frontend/src/components/TimeSlot.tsx

@@ -51,7 +51,7 @@ const TimeSlot: React.FC<TimeSlotProps> = ({
         height: small ? '25px' : '4.7vh',
         width: small ? '81px' : '12.2%',
         backgroundColor,
-        cursor: 'pointer',
+        cursor: onMouseEnter ? 'pointer' : undefined,
         borderStyle: 'solid',
         borderColor: 'gray',
         borderWidth: '0.1px',

src/frontend/src/hooks/users.hooks.ts

@@ -15,9 +15,19 @@ import {
   getUsersFavoriteProjects,
   updateUserSecureSettings,
   getCurrentUserSecureSettings,
-  getUserSecureSettings
+  getUserSecureSettings,
+  getUserScheduleSettings,
+  updateUserScheduleSettings
 } from '../apis/users.api';
-import { User, AuthenticatedUser, UserSettings, UpdateUserRolePayload, Project, UserSecureSettings } from 'shared';
+import {
+  User,
+  AuthenticatedUser,
+  UserSettings,
+  UpdateUserRolePayload,
+  Project,
+  UserSecureSettings,
+  UserScheduleSettings
+} from 'shared';
 import { useAuth } from './auth.hooks';
 import { useContext } from 'react';
 import { UserContext } from '../app/AppContextUser';
@@ -112,6 +122,23 @@ export const useUserSecureSettings = (id: number) => {
   });
 };
 
+/**
+ * Custom React Hook to supply a single user's schedule settings
+ *
+ * @param id User ID of the requested user's schedule settings
+ * @returns the user's schedule settings
+ */
+export const useUserScheduleSettings = (id: number) => {
+  return useQuery<UserScheduleSettings, Error>(['users', id, 'schedule-settings'], async () => {
+    try {
+      const { data } = await getUserScheduleSettings(id);
+      return data;
+    } catch (error: unknown) {
+      return { drScheduleSettingsId: '', personalGmail: '', personalZoomLink: '', availability: [] };
+    }
+  });
+};
+
 /**
  * Custom React Hook to supply a single user's settings.
  *
@@ -162,6 +189,28 @@ export const useUpdateUserSecureSettings = () => {
   );
 };
 
+/**
+ * Custom Hook to update a user's schedule settings
+ *
+ * @returns The mutation to update a user's schedule settings
+ */
+export const useUpdateUserScheduleSettings = () => {
+  const user = useCurrentUser();
+  const queryClient = useQueryClient();
+  return useMutation<UserScheduleSettings, Error, UserScheduleSettings>(
+    ['users', 'schedule-settings', 'update'],
+    async (settings: UserScheduleSettings) => {
+      const { data } = await updateUserScheduleSettings(settings);
+      return data;
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['users', user.userId, 'schedule-settings']);
+      }
+    }
+  );
+};
+
 /**
  * Custom React Hook to update a user's role.
  */

src/frontend/src/pages/CalendarPage/DesignReviewDetailPage/AvailabilityScheduleView.tsx

@@ -8,7 +8,7 @@ import {
   HeatmapColors,
   getBackgroundColor
 } from '../../../utils/design-review.utils';
-import TimeSlot from '../SchedulingComponents/TimeSlot';
+import TimeSlot from '../../../components/TimeSlot';
 
 interface AvailabilityScheduleViewProps {
   availableUsers: Map<number, User[]>;

src/frontend/src/pages/CalendarPage/SchedulingComponents/AvailabilityEditModal.tsx

@@ -17,6 +17,7 @@ import ErrorPage from '../ErrorPage';
 import UserSecureSettings from './UserSecureSettings/UserSecureSettings';
 import { useAllTeams } from '../../hooks/teams.hooks';
 import { displayEnum } from '../../utils/pipes';
+import UserScheduleSettings from './UserScheduleSettings/UserScheduleSettings';
 
 const NERSwitch = styled((props: SwitchProps) => (
   <Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
@@ -112,7 +113,7 @@ const Settings: React.FC = () => {
 
   return (
     <PageLayout title="Settings">
-      {showAlert && <Alert severity="info">Haha {auth.user?.firstName} bye bye!</Alert>}
+      {showAlert && <Alert severity="info">Haha {user.firstName} bye bye!</Alert>}
       <PageBlock title={'Organization Settings'}>
         <Grid container>
           <Grid item xs={6} md={12}>
@@ -162,6 +163,7 @@ const Settings: React.FC = () => {
       </PageBlock>
       <UserSettings currentSettings={userSettingsData} />
       <UserSecureSettings currentSettings={userSecureSettings} />
+      <UserScheduleSettings user={user} />
     </PageLayout>
   );
 };

src/frontend/src/pages/SettingsPage/Settings.tsx

@@ -0,0 +1,26 @@
+import NERModal from '../../../../components/NERModal';
+import EditAvailability from './EditAvailability';
+
+interface DRCEditModalProps {
+  open: boolean;
+  header: string;
+  availabilites: number[];
+  setAvailabilities: (availabilities: number[]) => void;
+  onHide: () => void;
+}
+
+const AvailabilityEditModal: React.FC<DRCEditModalProps> = ({ open, onHide, header, availabilites, setAvailabilities }) => {
+  const existingMeetingData = new Map<number, string>();
+
+  return (
+    <NERModal open={open} onHide={onHide} title={header} onSubmit={onHide} submitText="Save">
+      <EditAvailability
+        selectedTimes={availabilites}
+        setSelectedTimes={setAvailabilities}
+        existingMeetingData={existingMeetingData}
+      />
+    </NERModal>
+  );
+};
+
+export default AvailabilityEditModal;

src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/AvailabilityEditModal.tsx

@@ -1,7 +1,7 @@
 import { Grid } from '@mui/material';
 import { useState } from 'react';
-import { HeatmapColors, EnumToArray, DAY_NAMES, REVIEW_TIMES } from '../../../utils/design-review.utils';
-import TimeSlot from './TimeSlot';
+import { HeatmapColors, EnumToArray, DAY_NAMES, REVIEW_TIMES } from '../../../../utils/design-review.utils';
+import TimeSlot from '../../../../components/TimeSlot';
 
 interface EditAvailabilityProps {
   selectedTimes: number[];