Update Fetcher.jsx to include UpdateChoreAssignee function and ChoreCard.jsx to handle assignee change

src/utils/Fetcher.jsx

@@ -83,6 +83,15 @@ const SkipChore = id => {
     body: JSON.stringify({}),
   })
 }
+
+const UpdateChoreAssignee = (id, assignee) => {
+  return Fetch(`${API_URL}/chores/${id}/assignee`, {
+    method: 'PUT',
+    headers: HEADERS(),
+    body: JSON.stringify({ assignee:Number(assignee) }),
+  })
+}
+
 const CreateChore = chore => {
   return Fetch(`${API_URL}/chores/`, {
     method: 'POST',
@@ -306,4 +315,5 @@ export {
   UpdateChoreHistory,
   UpdateThingState,
   UpdateUserDetails,
+  UpdateChoreAssignee,
 }

src/views/Chores/ChoreCard.jsx

@@ -39,7 +39,7 @@ import moment from 'moment'
 import React, { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { API_URL } from '../../Config'
-import { MarkChoreComplete, SkipChore } from '../../utils/Fetcher'
+import { MarkChoreComplete, SkipChore, UpdateChoreAssignee } from '../../utils/Fetcher'
 import { Fetch } from '../../utils/TokenManager'
 import ConfirmationModal from '../Modals/Inputs/ConfirmationModal'
 import DateModal from '../Modals/Inputs/DateModal'
@@ -219,7 +219,16 @@ const ChoreCard = ({
     })
   }
   const handleAssigneChange = assigneeId => {
-    // TODO: Implement assignee change
+    UpdateChoreAssignee(chore.id, assigneeId).then(response => {
+      if (response.ok) {
+        response.json().then(data => {
+          const newChore = data.res
+          onChoreUpdate(newChore, 'assigned')
+        })
+      }
+    }
+    )
+    
   }
   const handleCompleteWithNote = note => {
     Fetch(`${API_URL}/chores/${chore.id}/do`, {
@@ -547,10 +556,6 @@ const ChoreCard = ({
                   <RecordVoiceOver />
                   Delegate to someone else
                 </MenuItem>
-                <MenuItem>
-                  <HowToReg />
-                  Complete as someone else
-                </MenuItem>
                 <Divider />
                 <MenuItem
                   onClick={() => {
@@ -620,10 +625,14 @@ const ChoreCard = ({
           options={performers}
           displayKey='displayName'
           title={`Delegate to someone else`}
+          placeholder={'Select a performer'}
           onClose={() => {
             setIsChangeAssigneeModalOpen(false)
           }}
-          onSave={handleAssigneChange}
+          onSave={(selected)=>{            
+            handleAssigneChange(selected.id)
+          }
+        }
         />
         <ConfirmationModal config={confirmModelConfig} />
         <TextModal

src/views/Modals/Inputs/SelectModal.jsx

@@ -9,7 +9,7 @@ import {
 } from '@mui/joy'
 import React from 'react'
 
-function SelectModal({ isOpen, onClose, onSave, options, title, displayKey }) {
+function SelectModal({ isOpen, onClose, onSave, options, title, displayKey,placeholder }) {
   const [selected, setSelected] = React.useState(null)
   const handleSave = () => {
     onSave(options.find(item => item.id === selected))
@@ -20,7 +20,7 @@ function SelectModal({ isOpen, onClose, onSave, options, title, displayKey }) {
     <Modal open={isOpen} onClose={onClose}>
       <ModalDialog>
         <Typography variant='h4'>{title}</Typography>
-        <Select>
+        <Select placeholder={placeholder}>
           {options.map((item, index) => (
             <Option
               value={item.id}

src/views/components/NavBar.jsx

@@ -30,11 +30,11 @@ const links = [
     label: 'Home',
     icon: <HomeOutlined />,
   },
-  {
+  // {
-    to: '/chores',
+  //   to: '/chores',
-    label: 'Desktop View',
+  //   label: 'Desktop View',
-    icon: <ListAltRounded />,
+  //   icon: <ListAltRounded />,
-  },
+  // },
   {
     to: '/things',
     label: 'Things',