From e039b732a8f74ae2d2c9ebaf9330c74c09502099 Mon Sep 17 00:00:00 2001 From: Mo Tarbin Date: Sun, 7 Jul 2024 00:25:11 -0400 Subject: [PATCH] Improve MarkChoreComplete, allow complete in past ,etc --- src/utils/Fetcher.jsx | 15 +- src/views/ChoreEdit/ChoreView.jsx | 222 ++++++++++++++++++++---------- src/views/Chores/ChoreCard.jsx | 83 +++++++++-- 3 files changed, 228 insertions(+), 92 deletions(-) diff --git a/src/utils/Fetcher.jsx b/src/utils/Fetcher.jsx index 0acc91f..afa9235 100644 --- a/src/utils/Fetcher.jsx +++ b/src/utils/Fetcher.jsx @@ -57,11 +57,20 @@ const GetChoreDetailById = id => { headers: HEADERS(), }) } - -const MarkChoreComplete = id => { - return Fetch(`${API_URL}/chores/${id}/do`, { +const MarkChoreComplete = (id, note, completedDate) => { + const body = { + note, + } + let completedDateFormated = '' + if (completedDate) { + completedDateFormated = `?completedDate=${new Date( + completedDate, + ).toISOString()}` + } + return Fetch(`${API_URL}/chores/${id}/do${completedDateFormated}`, { method: 'POST', headers: HEADERS(), + body: JSON.stringify(body), }) } const CreateChore = chore => { diff --git a/src/views/ChoreEdit/ChoreView.jsx b/src/views/ChoreEdit/ChoreView.jsx index 8116270..29268bc 100644 --- a/src/views/ChoreEdit/ChoreView.jsx +++ b/src/views/ChoreEdit/ChoreView.jsx @@ -3,14 +3,19 @@ import { CancelScheduleSend, Check, Checklist, + Note, PeopleAlt, Person, } from '@mui/icons-material' import { Box, Button, + Checkbox, Container, + Divider, + FormControl, Grid, + Input, ListItem, ListItemContent, ListItemDecorator, @@ -21,7 +26,7 @@ import { } from '@mui/joy' import moment from 'moment' import { useEffect, useState } from 'react' -import { useParams, useSearchParams } from 'react-router-dom' +import { useNavigate, useParams, useSearchParams } from 'react-router-dom' import { GetAllUsers, GetChoreDetailById, @@ -43,14 +48,16 @@ const ChoreView = () => { const [performers, setPerformers] = useState([]) const [infoCards, setInfoCards] = useState([]) const { choreId } = useParams() + const [note, setNote] = useState(null) - // query param `complete=true` + const Navigate = useNavigate() const [searchParams] = useSearchParams() const [isPendingCompletion, setIsPendingCompletion] = useState(false) const [timeoutId, setTimeoutId] = useState(null) const [secondsLeftToCancel, setSecondsLeftToCancel] = useState(null) + const [completedDate, setCompletedDate] = useState(null) useEffect(() => { Promise.all([ GetChoreDetailById(choreId).then(resp => { @@ -82,7 +89,7 @@ const ChoreView = () => { { icon: , text: 'Due Date', - subtext: moment(chore.dueDate).format('MM/DD/YYYY hh:mm A'), + subtext: moment(chore.nextDueDate).format('MM/DD/YYYY hh:mm A'), }, { icon: , @@ -119,12 +126,21 @@ const ChoreView = () => { subtext: chore.lastCompletedDate ? `${ chore.lastCompletedDate && - moment(chore.lastCompletedDate).format('MM/DD/YYYY hh:mm A') - }(${ - performers.find(p => p.id === chore.lastCompletedBy)?.displayName - })` + moment(chore.lastCompletedDate).fromNow() + // moment(chore.lastCompletedDate).format('MM/DD/YYYY hh:mm A')) + }( + ${ + performers.find(p => p.id === chore.lastCompletedBy) + ?.displayName + } + )` : 'Never', }, + { + icon: , + text: 'Recent Note', + subtext: chore.notes || '--', + }, ] setInfoCards(cards) } @@ -143,10 +159,11 @@ const ChoreView = () => { }, 1000) const id = setTimeout(() => { - MarkChoreComplete(choreId) + MarkChoreComplete(choreId, note, completedDate) .then(resp => { if (resp.ok) { return resp.json().then(data => { + setNote(null) setChore(data.res) }) } @@ -174,75 +191,130 @@ const ChoreView = () => { } return ( - - - - - {chore.name} - - - - {infoCards.map((info, index) => ( - - - - - {info.icon} - - - - {info.text} - - - {info.subtext ? info.subtext : '--'} - - - - - - ))} - - - + + - - {/* + {/* */} - - + + { const navigate = useNavigate() const [isDisabled, setIsDisabled] = React.useState(false) + const [isPendingCompletion, setIsPendingCompletion] = React.useState(false) + const [secondsLeftToCancel, setSecondsLeftToCancel] = React.useState(null) + const [timeoutId, setTimeoutId] = React.useState(null) // useEffect(() => { // GetAllUsers() // .then(response => response.json()) @@ -117,18 +123,41 @@ const ChoreCard = ({ chore, performers, onChoreUpdate, onChoreRemove, sx }) => { }) } - const handleCompleteChore = () => { - MarkChoreComplete(chore.id).then(response => { - if (response.ok) { - response.json().then(data => { - const newChore = data.res - onChoreUpdate(newChore, 'completed') - }) + const handleTaskCompletion = () => { + setIsPendingCompletion(true) + let seconds = 3 // Starting countdown from 3 seconds + setSecondsLeftToCancel(seconds) + + const countdownInterval = setInterval(() => { + seconds -= 1 + setSecondsLeftToCancel(seconds) + + if (seconds <= 0) { + clearInterval(countdownInterval) // Stop the countdown when it reaches 0 } - }) - setIsDisabled(true) - setTimeout(() => setIsDisabled(false), 3000) // Re-enable the button after 5 seconds + }, 1000) + + const id = setTimeout(() => { + MarkChoreComplete(chore.id) + .then(resp => { + if (resp.ok) { + return resp.json().then(data => { + onChoreUpdate(data.res, 'completed') + }) + } + }) + .then(() => { + setIsPendingCompletion(false) + clearTimeout(id) + clearInterval(countdownInterval) // Ensure to clear this interval as well + setTimeoutId(null) + setSecondsLeftToCancel(null) + }) + }, 3000) + + setTimeoutId(id) } + const handleChangeDueDate = newDate => { if (activeUserId === null) { alert('Please select a performer') @@ -353,7 +382,7 @@ const ChoreCard = ({ chore, performers, onChoreUpdate, onChoreRemove, sx }) => { {/* Box in top right with Chip showing next due date */} - {chore.name.charAt(0).toUpperCase()} + {Array.from(chore.name)[0]} {chore.name} @@ -409,8 +438,8 @@ const ChoreCard = ({ chore, performers, onChoreUpdate, onChoreRemove, sx }) => { { >
- {isDisabled && ( + {isPendingCompletion && ( { }, }} /> + + { + if (timeoutId) { + clearTimeout(timeoutId) + setIsPendingCompletion(false) + setTimeoutId(null) + setSecondsLeftToCancel(null) // Reset or adjust as needed + } + }} + size='md' + variant='outlined' + color='primary' + startDecorator={} + > + Cancel + + } + > + + Task will be marked as completed in {secondsLeftToCancel} seconds + + )