completed member individual tab content for scheduled shifts

.github/pull_request_template.md

@@ -1,28 +1,32 @@
 [//]: # "These comments are meant for your reference. They are invisible and don't need to be deleted!"
 
 ## What's new in this PR
+
 ### Description
+
 [//]: # "Required - Describe what's new in this PR in a few lines. A description and bullet points for specifics will suffice."
 
 ### Screenshots
+
 [//]: # "Required for frontend changes, otherwise optional but strongly recommended. Add screenshots of expected behavior - GIFs if you're feeling fancy!"
 
 ## How to review
-[//]: # "Required - Describe the order in which to review files and what to expect when testing locally. Is there anything specifically you want feedback on? Should this be reviewed commit by commit, or all at once? What are some user flows to test? What are some edge cases to look out for?"
+
+[//]: # 'Required - Describe the order in which to review files and what to expect when testing locally. Is there anything specifically you want feedback on? Should this be reviewed commit by commit, or all at once? What are some user flows to test? What are some edge cases to look out for?'
 
 ## Next steps
+
 [//]: # "Optional - What's NOT in this PR, doesn't work yet, and/or still needs to be done. Note any temporary fixes in this PR that should be cleaned up later."
 
 ## Relevant Links
 
 ### Online sources
-[//]: # "Optional - copy links to any tutorials or documentation that was useful to you when working on this PR"
-
-### Related PRs
-[//]: # "Optional - related PRs you're waiting on/ PRs that will conflict, etc; if this is a refactor, feel free to add PRs that previously modified this code"
 
+[//]: # 'Optional - copy links to any tutorials or documentation that was useful to you when working on this PR'
 
+### Related PRs
 
+[//]: # "Optional - related PRs you're waiting on/ PRs that will conflict, etc; if this is a refactor, feel free to add PRs that previously modified this code"
+[//]: # 'This tags the project leader as a default. Feel free to change, or add on anyone who you should be in on the conversation.'
 
-[//]: # "This tags the project leader as a default. Feel free to change, or add on anyone who you should be in on the conversation."
 CC: @gregoriiaaa

src/components/shared/header/HeaderTabs.tsx

@@ -22,7 +22,11 @@ import { useSelector, useDispatch } from 'react-redux'
 import useUserRolePath from '../../../hooks/useUserRolePath'
 
 //** Constants */
-import { memberTabs, managerTabs, supervisorTabs } from '../../../utils/constants'
+import {
+  memberTabs,
+  managerTabs,
+  supervisorTabs,
+} from '../../../utils/constants'
 
 //** Interfaces */
 import { NavP } from '../../../interfaces/interfaces'

src/features/authorizedUser/authorizedUserApiSlice.ts

@@ -49,10 +49,7 @@ export const authorizedUsersApiSlice = apiSlice.injectEndpoints({
       invalidatesTags: [{ type: 'AuthorizedUser', id: 'LIST' }],
     }),
     updateAuthorizedUser: builder.mutation({
-      query: (data: {
-        userId: string, 
-        data: Partial<AuthorizedUser>
-      }) => ({
+      query: (data: { userId: string; data: Partial<AuthorizedUser> }) => ({
         url: `authorizedUsers/${data.userId}`,
         method: 'PATCH',
         body: {
@@ -91,4 +88,4 @@ export const selectAuthorizedUsersById = (queryParameter: string) =>
       data: { entities: { [x: string]: unknown } },
       authorizedUserId: string | number
     ) => data.entities[authorizedUserId]
-  )
+  )

src/features/scheduledShift/scheduledShiftApiSlice.ts

@@ -36,10 +36,7 @@ export const scheduledShiftsApiSlice = apiSlice.injectEndpoints({
       },
     }),
     addNewScheduledShift: builder.mutation({
-      query: (data: {
-        houseId: string, 
-        data: Partial<ScheduledShift>
-      }) => ({
+      query: (data: { houseId: string; data: Partial<ScheduledShift> }) => ({
         url: `houses/${data.houseId}/scheduledShifts`,
         method: 'POST',
         body: {
@@ -50,8 +47,8 @@ export const scheduledShiftsApiSlice = apiSlice.injectEndpoints({
     }),
     updateScheduledShift: builder.mutation({
       query: (data: {
-        houseId: string,
-        shiftId: string, 
+        houseId: string
+        shiftId: string
         data: Partial<ScheduledShift>
       }) => ({
         url: `houses/${data.houseId}/scheduledShifts/${data.shiftId}`,
@@ -64,7 +61,6 @@ export const scheduledShiftsApiSlice = apiSlice.injectEndpoints({
         { type: 'ScheduledShift', id: arg.shiftId },
       ],
     }),
-
   }),
 })
 
@@ -92,4 +88,4 @@ export const selectScheduledShiftById = (queryParameter: string) =>
       data: { entities: { [x: string]: unknown } },
       scheduledShiftId: string | number
     ) => data.entities[scheduledShiftId]
-  )
+  )

src/features/userAvailability/tabels/AvailabilityTable.tsx

@@ -21,14 +21,16 @@ import { useDispatch, useSelector } from 'react-redux'
 import AvailabilityItem from '../items/AvailabilityItem'
 
 //** Redux state imports */
-import { selectIsAvailabilityError, selectMemberAvailability, setMemberAvailability } from '../../userAvailability/userAvailabilitySlice'
+import {
+  selectIsAvailabilityError,
+  selectMemberAvailability,
+  setMemberAvailability,
+} from '../../userAvailability/userAvailabilitySlice'
 import { selectCurrentUser } from '@/features/auth/authSlice'
 
 //** Redux Api imports */
 import { useEstablishContextMutation } from '@/features/auth/authApiSlice'
-import {
-  useUpdateUserAvailabilityMutation,
-} from '../../userAvailability/userAvailabilityApiSlice'
+import { useUpdateUserAvailabilityMutation } from '../../userAvailability/userAvailabilityApiSlice'
 
 //** Typescript types */
 import { User } from '@/types/schema'
@@ -37,33 +39,34 @@ import { User } from '@/types/schema'
 import { DAYS } from '@/utils/constants'
 import { validateAvailability } from '@/utils/utils'
 
-import Stack from '@mui/material/Stack';
-import Snackbar from '@mui/material/Snackbar';
-import MuiAlert, { AlertProps } from '@mui/material/Alert';
+import Stack from '@mui/material/Stack'
+import Snackbar from '@mui/material/Snackbar'
+import MuiAlert, { AlertProps } from '@mui/material/Alert'
 
 const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
   props,
-  ref,
+  ref
 ) {
-  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
-});
-
+  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
+})
 
 /**
  * @description Displays and edits the current logged in user
- * 
+ *
  */
 export default function AvailabilityTable() {
   //** Get Logged In user from redux */
   const authUser = useSelector(selectCurrentUser) as User
   //** Get Logged In user availability */
-  const userAvailability = useSelector(selectMemberAvailability) as User['availabilities']
+  const userAvailability = useSelector(
+    selectMemberAvailability
+  ) as User['availabilities']
   //** Get error from availability */
   const IsAvailabilityError = useSelector(selectIsAvailabilityError)
-   
+
   //**  Hooks */
   const dispatch = useDispatch()
-  
+
   //** Function from Redux to update user abailability in the backEnd */
   const [
     updateUserAvailability,
@@ -81,13 +84,13 @@ export default function AvailabilityTable() {
   const handleCancel = () => {
     setIsEditing(false)
     // dispatch(setResetStateError({}))
-    dispatch(setMemberAvailability(validateAvailability(authUser.availabilities)))
+    dispatch(
+      setMemberAvailability(validateAvailability(authUser.availabilities))
+    )
   }
 
-
   //** It saves the changes made to the memberAvailability redux state to the backEnd */
   const handleSave = async () => {
-
     // Verify that the authUser is logged in
     if (!authUser) {
       console.log('[ERROR]: authUser is not defined')
@@ -100,12 +103,11 @@ export default function AvailabilityTable() {
       return false
     }
 
-    if(IsAvailabilityError) {
+    if (IsAvailabilityError) {
       console.log('[ERROR]: There is an error in the userAvailability')
       setOpenErrorMsg(true)
       return false
     }
-
 
     try {
       // make sure userId is defined
@@ -133,27 +135,31 @@ export default function AvailabilityTable() {
   }
 
   //** if true it opens the Succes message window */
-  const [openSuccessMsg, setOpenSuccessMsg] = React.useState(false);
+  const [openSuccessMsg, setOpenSuccessMsg] = React.useState(false)
   //** if true it opens the Error message window */
   const [openErrorMsg, setOpenErrorMsg] = React.useState(false)
 
   //** Handles closing both success and error windows. */
-  const handleClose = (event?: React.SyntheticEvent | Event, reason?: string) => {
+  const handleClose = (
+    event?: React.SyntheticEvent | Event,
+    reason?: string
+  ) => {
     if (reason === 'clickaway') {
-      return;
+      return
     }
-    setOpenSuccessMsg(false);
+    setOpenSuccessMsg(false)
     setOpenErrorMsg(false)
-  };
+  }
 
   //** Watch authUser for changes */
   useEffect(() => {
     // Make sure authUser and authUser's availability are defined
     if (authUser && authUser.availabilities) {
-
       // make a copy of the current user availabilities in order to mute it
-      let availabilitiesCopy = {...userAvailability ,...authUser.availabilities }
-
+      let availabilitiesCopy = {
+        ...userAvailability,
+        ...authUser.availabilities,
+      }
 
       // Sort each day's availability by startTime
       Object.keys(availabilitiesCopy).map((dayKey) => {
@@ -170,20 +176,17 @@ export default function AvailabilityTable() {
       // dispatch(setResetStateError({}))
       dispatch(setMemberAvailability(validateAvailability(availabilitiesCopy)))
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [authUser, dispatch])
 
-  useEffect (()=> {
+  useEffect(() => {
     // console.log('authUserChecking')
     if (!authUser.availabilities) {
       handleSave()
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  },[authUser])
-
-
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [authUser])
 
-
   return (
     <Box sx={{ width: '100%' }}>
       <Paper sx={{ width: '100%', mb: 2 }}>
@@ -244,27 +247,38 @@ export default function AvailabilityTable() {
                         key={uuid()}
                         day={day}
                         isEditing={isEditing}
-
                       />
                     )
                   })
-                :null}
+                : null}
             </TableBody>
           </Table>
         </TableContainer>
       </Paper>
       {/* <Stack spacing={2} sx={{ width: '100%' }}> */}
-
-      <Snackbar open={openSuccessMsg} autoHideDuration={6000} onClose={handleClose} anchorOrigin={{ vertical:'top', horizontal:'center' }}>
+
+      <Snackbar
+        open={openSuccessMsg}
+        autoHideDuration={6000}
+        onClose={handleClose}
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      >
         <Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
           Availability updated successfully!
         </Alert>
       </Snackbar>
-      <Snackbar open={openErrorMsg} autoHideDuration={6000} onClose={handleClose} anchorOrigin={{ vertical:'top', horizontal:'center' }}>
-        <Alert onClose={handleClose} severity="error" sx={{ width: '100%' }}>To save availability please fix time blocks!</Alert>
+      <Snackbar
+        open={openErrorMsg}
+        autoHideDuration={6000}
+        onClose={handleClose}
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      >
+        <Alert onClose={handleClose} severity="error" sx={{ width: '100%' }}>
+          To save availability please fix time blocks!
+        </Alert>
       </Snackbar>
-     
-    {/* </Stack> */}
+
+      {/* </Stack> */}
     </Box>
   )
 }

src/features/userAvailability/userAvailabilityApiSlice.ts

@@ -36,11 +36,7 @@ export const userAvailabilityApiSlice = apiSlice.injectEndpoints({
         }
       },
     }),
-
   }),
 })
 
-export const {
-  useUpdateUserAvailabilityMutation,
-} = userAvailabilityApiSlice
-
+export const { useUpdateUserAvailabilityMutation } = userAvailabilityApiSlice