Add Ability to archive and unarchive

src/utils/Fetcher.jsx

@@ -65,6 +65,18 @@ const GetArchivedChores = () => {
     headers: HEADERS(),
   })
 }
+const ArchiveChore = id => {
+  return Fetch(`${API_URL}/chores/${id}/archive`, {
+    method: 'PUT',
+    headers: HEADERS(),
+  })
+}
+const UnArchiveChore = id => {
+  return Fetch(`${API_URL}/chores/${id}/unarchive`, {
+    method: 'PUT',
+    headers: HEADERS(),
+  })
+}
 
 const GetChoreByID = id => {
   return Fetch(`${API_URL}/chores/${id}`, {
@@ -348,6 +360,7 @@ const DeleteLabel = id => {
 
 export {
   AcceptCircleMemberRequest,
+  ArchiveChore,
   CancelSubscription,
   createChore,
   CreateChore,
@@ -384,6 +397,7 @@ export {
   SaveThing,
   signUp,
   SkipChore,
+  UnArchiveChore,
   UpdateChoreAssignee,
   UpdateChoreHistory,
   UpdateChorePriority,

src/views/Chores/ChoreCard.jsx

@@ -1,4 +1,5 @@
 import {
+  Archive,
   CancelScheduleSend,
   Check,
   Delete,
@@ -18,6 +19,7 @@ import {
   Report,
   SwitchAccessShortcut,
   TimesOneMobiledata,
+  Unarchive,
   Update,
   ViewCarousel,
   Webhook,
@@ -43,8 +45,10 @@ import { useNavigate } from 'react-router-dom'
 import { API_URL } from '../../Config'
 import { UserContext } from '../../contexts/UserContext'
 import {
+  ArchiveChore,
   MarkChoreComplete,
   SkipChore,
+  UnArchiveChore,
   UpdateChoreAssignee,
 } from '../../utils/Fetcher'
 import { getTextColorFromBackgroundColor } from '../../utils/LabelColors'
@@ -137,6 +141,30 @@ const ChoreCard = ({
       },
     })
   }
+  const handleArchive = () => {
+    if (chore.isActive) {
+      ArchiveChore(chore.id).then(response => {
+        if (response.ok) {
+          response.json().then(data => {
+            const newChore = { ...chore, isActive: false }
+
+            onChoreUpdate(newChore, 'archive')
+          })
+        }
+      })
+    } else {
+      UnArchiveChore(chore.id).then(response => {
+        if (response.ok) {
+          response.json().then(data => {
+            const newChore = { ...chore, isActive: true }
+            onChoreUpdate(newChore, 'unarchive')
+          })
+        }
+      })
+    }
+
+    handleMenuClose()
+  }
 
   const handleTaskCompletion = () => {
     setIsPendingCompletion(true)
@@ -691,6 +719,12 @@ const ChoreCard = ({
                   <ViewCarousel />
                   View
                 </MenuItem>
+                <MenuItem onClick={handleArchive} color='neutral'>
+                  {chore.isActive ? <Archive /> : <Unarchive />}
+                  {chore.isActive ? 'Archive' : 'Unarchive'}
+                </MenuItem>
+                <Divider />
+
                 <MenuItem onClick={handleDelete} color='danger'>
                   <Delete />
                   Delete

src/views/Chores/MyChores.jsx

@@ -272,22 +272,39 @@ const MyChores = () => {
   }
 
   const handleChoreUpdated = (updatedChore, event) => {
-    const newChores = chores.map(chore => {
+    var newChores = chores.map(chore => {
       if (chore.id === updatedChore.id) {
         return updatedChore
       }
       return chore
     })
 
-    const newFilteredChores = filteredChores.map(chore => {
+    var newFilteredChores = filteredChores.map(chore => {
       if (chore.id === updatedChore.id) {
         return updatedChore
       }
       return chore
     })
+    if (event === 'archive') {
+      newChores = newChores.filter(chore => chore.id !== updatedChore.id)
+      newFilteredChores = newFilteredChores.filter(
+        chore => chore.id !== updatedChore.id,
+      )
+      if (archivedChores !== null) {
+        setArchivedChores([...archivedChores, updatedChore])
+      }
+    }
+    if (event === 'unarchive') {
+      newChores.push(updatedChore)
+      newFilteredChores.push(updatedChore)
+      setArchivedChores(
+        archivedChores.filter(chore => chore.id !== updatedChore.id),
+      )
+    }
     setChores(newChores)
     setFilteredChores(newFilteredChores)
     setChoreSections(sectionSorter('due_date', newChores))
+
     switch (event) {
       case 'completed':
         setSnackBarMessage('Completed')
@@ -298,6 +315,12 @@ const MyChores = () => {
       case 'rescheduled':
         setSnackBarMessage('Rescheduled')
         break
+      case 'unarchive':
+        setSnackBarMessage('Unarchive')
+        break
+      case 'archive':
+        setSnackBarMessage('Archived')
+        break
       default:
         setSnackBarMessage('Updated')
     }