diff --git a/src/views/History/ChoreHistory.jsx b/src/views/History/ChoreHistory.jsx index 8d62066..33d7248 100644 --- a/src/views/History/ChoreHistory.jsx +++ b/src/views/History/ChoreHistory.jsx @@ -14,19 +14,11 @@ import { History, Star, Timelapse, - TrendingUp + TrendingUp, } from '@mui/icons-material' import DeleteIcon from '@mui/icons-material/Delete' import EditIcon from '@mui/icons-material/Edit' -import { - Box, - Button, - Card, - Container, - Grid, - Sheet, - Typography -} from '@mui/joy' +import { Box, Button, Card, Container, Grid, Sheet, Typography } from '@mui/joy' import moment from 'moment' import { useEffect, useState } from 'react' import { Link, useParams } from 'react-router-dom' @@ -37,6 +29,7 @@ import { useUpdateChoreHistory, } from '../../queries/ChoreQueries' import { useCircleMembers } from '../../queries/UserQueries' +import { useNotification } from '../../service/NotificationProvider' import { ChoreHistoryStatus } from '../../utils/Chores' import LoadingComponent from '../components/Loading' import EditHistoryModal from '../Modals/EditHistoryModal' @@ -48,10 +41,10 @@ const ChoreHistory = () => { const [historyInfo, setHistoryInfo] = useState([]) const { choreId } = useParams() const [isEditModalOpen, setIsEditModalOpen] = useState(false) - const [editHistory, setEditHistory] = useState({}) + const [editHistory, setEditHistory] = useState(null) const { confirmModalConfig, showConfirmation } = useConfirmationModal() const [showMoreInfoId, setShowMoreInfoId] = useState(null) - + const { showSuccess, showError } = useNotification() // React Query hooks const { data: choreHistoryData, isLoading } = useChoreHistory(choreId) const { data: circleMembersData } = useCircleMembers() @@ -387,8 +380,10 @@ const ChoreHistory = () => { isOpen: isEditModalOpen, onClose: () => { setIsEditModalOpen(false) + setEditHistory(null) }, onSave: updated => { + if (!editHistory?.id) return updateChoreHistory.mutate( { choreId, @@ -400,9 +395,13 @@ const ChoreHistory = () => { }, }, { - onSuccess: data => { - setEditHistory(data.res) + onSuccess: () => { setIsEditModalOpen(false) + setEditHistory(null) + showSuccess({ + title: 'History Updated', + message: `The history record has been updated successfully.`, + }) }, onError: error => { console.error('Failed to update chore history:', error) @@ -411,6 +410,7 @@ const ChoreHistory = () => { ) }, onDelete: () => { + if (!editHistory?.id) return deleteChoreHistory.mutate( { choreId, @@ -419,6 +419,11 @@ const ChoreHistory = () => { { onSuccess: () => { setIsEditModalOpen(false) + setEditHistory(null) + showSuccess({ + title: 'History Deleted', + message: `The history record has been deleted successfully.`, + }) }, }, ) diff --git a/src/views/Modals/EditHistoryModal.jsx b/src/views/Modals/EditHistoryModal.jsx index 0047321..8496c5f 100644 --- a/src/views/Modals/EditHistoryModal.jsx +++ b/src/views/Modals/EditHistoryModal.jsx @@ -8,22 +8,31 @@ import ConfirmationModal from './Inputs/ConfirmationModal' function EditHistoryModal({ config, historyRecord }) { const { ResponsiveModal } = useResponsiveModal() - useEffect(() => { - setCompletedDate( - moment(historyRecord.performedAt).format('YYYY-MM-DDTHH:mm'), - ) - setDueDate(moment(historyRecord.dueDate).format('YYYY-MM-DDTHH:mm')) - setNotes(historyRecord.notes) - }, [historyRecord]) - - const [completedDate, setCompletedDate] = useState( - moment(historyRecord.completedDate).format('YYYY-MM-DDTHH:mm'), - ) - const [dueDate, setDueDate] = useState( - moment(historyRecord.dueDate).format('YYYY-MM-DDTHH:mm'), - ) - const [notes, setNotes] = useState(historyRecord.notes) + const [completedDate, setCompletedDate] = useState('') + const [dueDate, setDueDate] = useState('') + const [notes, setNotes] = useState('') const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false) + + // Reset form when modal opens with new data + useEffect(() => { + if (config?.isOpen && historyRecord?.performedAt) { + setCompletedDate( + moment(historyRecord.performedAt).format('YYYY-MM-DDTHH:mm'), + ) + setDueDate( + historyRecord.dueDate + ? moment(historyRecord.dueDate).format('YYYY-MM-DDTHH:mm') + : '', + ) + setNotes(historyRecord.notes || '') + } + }, [config?.isOpen, historyRecord]) + + // Don't render modal content if no valid historyRecord + if (!historyRecord?.performedAt) { + return null + } + return (