fixed the filtering for unassigned users

src/pages/manager/planner/UnassignedTabContent.tsx

@@ -1,33 +1,34 @@
 import { MenuItem, Select, SelectChangeEvent } from '@mui/material'
 import { useEffect, useState } from 'react'
-import UnassignedShiftList from '../../../components/ManagerComponents/UnassignedShiftsList/UnassignedShiftsList'
+// import UnassignedShiftList from '../../../components/ManagerComponents/UnassignedShiftsList/UnassignedShiftsList'
 import SortedTable from '../../../components/shared/tables/SortedTable'
 import { useUserContext } from '../../../context/UserContext'
-import { getAllShifts } from '../../../firebase/queries/shift'
+// import { getAllShifts } from '../../../firebase/queries/shift'
 import { HeadCell, Shift } from '../../../interfaces/interfaces'
 import { useGetShiftsQuery } from '../../../store/apiSlices/shiftApiSlice'
-import { useDispatch, useSelector } from '@reduxjs/toolkit'
+import { EntityId, Dictionary } from '@reduxjs/toolkit'
 
-const headCells: HeadCell<Shift>[] = [
-  {
-    id: 'name',
-    isNumeric: false,
-    label: 'Shift Name',
-    isSortable: true,
-  },
-  {
-    id: 'timeWindowDisplay',
-    isNumeric: true,
-    label: 'Time',
-    isSortable: false,
-  },
-  {
-    id: 'hours',
-    isNumeric: true,
-    label: 'Value',
-    isSortable: true,
-  },
-]
+const headCells: HeadCell<Shift & { [key in keyof Shift]: string | number }>[] =
+  [
+    {
+      id: 'name',
+      isNumeric: false,
+      label: 'Shift Name',
+      isSortable: true,
+    },
+    {
+      id: 'timeWindowDisplay',
+      isNumeric: true,
+      label: 'Time',
+      isSortable: false,
+    },
+    {
+      id: 'hours',
+      isNumeric: true,
+      label: 'Value',
+      isSortable: true,
+    },
+  ]
 
 const filters = [
   'all',
@@ -42,94 +43,73 @@ const filters = [
 
 export const UnassignedTabContent = () => {
   const { house } = useUserContext()
-  const { data, isLoading, isSuccess, isError, error } =
-    useGetShiftsQuery('EUC')
+  const { data, isLoading, isSuccess, isError } = useGetShiftsQuery(
+    house?.houseID
+  )
 
-  const [shifts, setShifts] = useState<Shift[] | undefined>([])
-  const [displayShifts, setDisplayShifts] = useState<Shift[] | undefined>(
+  const [shifts, setShifts] = useState<EntityId[] | undefined>([])
+  const [displayShifts, setDisplayShifts] = useState<EntityId[] | undefined>(
     shifts
   )
   const [filterBy, setFilterBy] = useState<string>(filters[0])
 
-  function formatMilitaryTime(militaryTime: number): string {
-    const hour = Math.floor(militaryTime / 100)
-    const minute = militaryTime % 100
-    const isPM = hour >= 12
-
-    // Convert hour to 12-hour format
-    const formattedHour = hour % 12 === 0 ? 12 : hour % 12
-
-    // Add leading zero to minute if needed
-    const formattedMinute = minute < 10 ? `0${minute}` : `${minute}`
-
-    // Add AM/PM indicator
-    const ampm = isPM ? 'PM' : 'AM'
-
-    // Return formatted time string
-    return `${formattedHour}:${formattedMinute}${ampm}`
-  }
-
   const handleFilterChange = (event: SelectChangeEvent) => {
     console.log(event.target.value)
     setFilterBy(event.target.value)
   }
 
-  // runs when the component mounts and when the house changes
-  // ALL the shifts (unfiltered)
   useEffect(() => {
-    async function fetchShifts() {
-      const response = await getAllShifts(house.houseID)
-      if (!response) {
-        setShifts([])
-      } else {
-        // format data here before setting the data (in this case, shifts)
-        setShifts(
-          response
-            .filter((shift) => {
-              return shift.usersAssigned?.length == 0
-            })
-            .map((shift) => {
-              const time1 = formatMilitaryTime(shift.timeWindow[0])
-              const time2 = formatMilitaryTime(shift.timeWindow[1])
-              shift.timeWindowDisplay = time1 + ' - ' + time2
-              shift.id = shift.shiftID
-              return shift
-            })
+    if (isSuccess && data) {
+      setShifts(
+        data.ids?.filter(
+          (id: EntityId) => data.entities[id]?.usersAssigned?.length === 0
         )
-      }
+      )
     }
-    fetchShifts()
-  }, [house])
+  }, [isSuccess, data])
 
   // runs when the component mounts and when filterBy or shifts changes
   // the filtered shifts (filtered by day)
   useEffect(() => {
+    console.log('Changing filters')
+
     setDisplayShifts(
       filterBy === filters[0]
         ? shifts
-        : shifts?.filter((shift) =>
-            shift.possibleDays
+        : shifts?.filter((shiftId) =>
+            data?.entities[shiftId]?.possibleDays
               .map((day) => day.toLocaleLowerCase())
               .includes(filterBy)
           )
     )
-  }, [filterBy, shifts])
+  }, [filterBy, shifts, data])
 
-  return (
-    <>
-      {/* <UnassignedShiftList /> */}
-      <Select value={filterBy} onChange={handleFilterChange}>
-        {filters.map((day) => (
-          <MenuItem key={day} value={day}>
-            {day}
-          </MenuItem>
-        ))}
-      </Select>
-      <SortedTable
-        data={displayShifts}
-        headCells={headCells}
-        isCheckable={false}
-      />
-    </>
-  )
+  if (isLoading) {
+    return <div>Loading...</div>
+  } else if (isError) {
+    return <div>Error</div>
+  } else {
+    return (
+      <>
+        {/* <UnassignedShiftList /> */}
+        <Select value={filterBy} onChange={handleFilterChange}>
+          {filters.map((day) => (
+            <MenuItem key={day} value={day}>
+              {day}
+            </MenuItem>
+          ))}
+        </Select>
+        <SortedTable
+          data={displayShifts as EntityId[]}
+          entities={
+            data?.entities as Dictionary<
+              Shift & { [key in keyof Shift]: string | number }
+            >
+          }
+          headCells={headCells}
+          isCheckable={false}
+        />
+      </>
+    )
+  }
 }

src/pages/manager/planner/index.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react'
 import CategoriesView from '../categoryDropdown/categoriesView'
 import { useUserContext } from '../../../context/UserContext'
 import ShiftSchedule from '../../../components/ManagerComponents/shiftSchedule/ShiftSchedule'
-import { UnassignedTabContent } from './NewUnassignedTabContent'
+import { UnassignedTabContent } from './UnassignedTabContent'
 import Testing from './Testing'
 
 interface TabPanelProps {