Fix Assignee Bug, Support loading Archive

src/views/ChoreEdit/ChoreEdit.jsx

@@ -169,6 +169,9 @@ const ChoreEdit = () => {
     return true
   }
 
+  const handleDueDateChange = e => {
+    setDueDate(e.target.value)
+  }
   const HandleSaveChore = () => {
     setAttemptToSave(true)
     if (!HandleValidateChore()) {
@@ -386,12 +389,15 @@ const ChoreEdit = () => {
               <ListItem key={item.id}>
                 <Checkbox
                   // disabled={index === 0}
-                  checked={assignees.find(a => a.userId == item.id) != null}
+                  checked={assignees.find(a => a.userId == item.userId) != null}
                   onClick={() => {
-                    if (assignees.find(a => a.userId == item.id)) {
-                      setAssignees(assignees.filter(i => i.userId !== item.id))
+                    if (assignees.some(a => a.userId === item.userId)) {
+                      const newAssignees = assignees.filter(
+                        a => a.userId !== item.userId,
+                      )
+                      setAssignees(newAssignees)
                     } else {
-                      setAssignees([...assignees, { userId: item.id }])
+                      setAssignees([...assignees, { userId: item.userId }])
                     }
                   }}
                   overlay
@@ -431,10 +437,10 @@ const ChoreEdit = () => {
                 ?.filter(p => assignees.find(a => a.userId == p.userId))
                 .map((item, index) => (
                   <Option
-                    value={item.id}
+                    value={item.userId}
                     key={item.displayName}
                     onClick={() => {
-                      setAssignedTo(item.id)
+                      setAssignedTo(item.userId)
                     }}
                   >
                     {item.displayName}
@@ -552,9 +558,7 @@ const ChoreEdit = () => {
             <Input
               type='datetime-local'
               value={dueDate}
-              onChange={e => {
-                setDueDate(e.target.value)
-              }}
+              onChange={handleDueDateChange}
             />
             <FormHelperText>{errors.dueDate}</FormHelperText>
           </FormControl>

src/views/Chores/MyChores.jsx

@@ -6,6 +6,7 @@ import {
   FilterAlt,
   PriorityHigh,
   Style,
+  Unarchive,
 } from '@mui/icons-material'
 import {
   Accordion,
@@ -29,7 +30,11 @@ import { useContext, useEffect, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { UserContext } from '../../contexts/UserContext'
 import { useChores } from '../../queries/ChoreQueries'
-import { GetAllUsers, GetUserProfile } from '../../utils/Fetcher'
+import {
+  GetAllUsers,
+  GetArchivedChores,
+  GetUserProfile,
+} from '../../utils/Fetcher'
 import Priorities from '../../utils/Priorities'
 import LoadingComponent from '../components/Loading'
 import { useLabels } from '../Labels/LabelQueries'
@@ -41,6 +46,7 @@ const MyChores = () => {
   const [isSnackbarOpen, setIsSnackbarOpen] = useState(false)
   const [snackBarMessage, setSnackBarMessage] = useState(null)
   const [chores, setChores] = useState([])
+  const [archivedChores, setArchivedChores] = useState(null)
   const [filteredChores, setFilteredChores] = useState([])
   const [selectedFilter, setSelectedFilter] = useState('All')
   const [choreSections, setChoreSections] = useState([])
@@ -226,6 +232,7 @@ const MyChores = () => {
       document.removeEventListener('mousedown', handleMenuOutsideClick)
     }
   }, [anchorEl])
+
   const handleMenuOutsideClick = event => {
     if (
       anchorEl &&
@@ -280,6 +287,7 @@ const MyChores = () => {
     })
     setChores(newChores)
     setFilteredChores(newFilteredChores)
+    setChoreSections(sectionSorter('due_date', newChores))
     switch (event) {
       case 'completed':
         setSnackBarMessage('Completed')
@@ -303,6 +311,7 @@ const MyChores = () => {
     )
     setChores(newChores)
     setFilteredChores(newFilteredChores)
+    setChoreSections(sectionSorter('due_date', newChores))
   }
 
   const searchOptions = {
@@ -626,6 +635,65 @@ const MyChores = () => {
           })}
         </AccordionGroup>
       )}
+      <Box
+        sx={{
+          // center the button
+          justifyContent: 'center',
+          mt: 2,
+        }}
+      >
+        {archivedChores === null && (
+          <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+            <Button
+              sx={{}}
+              onClick={() => {
+                GetArchivedChores()
+                  .then(response => response.json())
+                  .then(data => {
+                    setArchivedChores(data.res)
+                  })
+              }}
+              variant='outlined'
+              color='neutral'
+              startDecorator={<Unarchive />}
+            >
+              Show Archived
+            </Button>
+          </Box>
+        )}
+        {archivedChores !== null && (
+          <>
+            <Divider orientation='horizontal'>
+              <Chip
+                variant='soft'
+                color='danger'
+                size='md'
+                startDecorator={
+                  <>
+                    <Chip color='danger' size='sm' variant='plain'>
+                      {archivedChores?.length}
+                    </Chip>
+                  </>
+                }
+              >
+                Archived
+              </Chip>
+            </Divider>
+
+            {archivedChores?.map(chore => (
+              <ChoreCard
+                key={chore.id}
+                chore={chore}
+                onChoreUpdate={handleChoreUpdated}
+                onChoreRemove={handleChoreDeleted}
+                performers={performers}
+                userLabels={userLabels}
+                onChipClick={handleLabelFiltering}
+              />
+            ))}
+          </>
+        )}
+      </Box>
       <Box
         // variant='outlined'
         sx={{
@@ -647,7 +715,6 @@ const MyChores = () => {
             width: 50,
             height: 50,
           }}
-          //   startDecorator={<Add />}
           onClick={() => {
             Navigate(`/chores/create`)
           }}