From a24134f8525373f5707b6c48aa77d3f4aff70799 Mon Sep 17 00:00:00 2001 From: Mo Tarbin Date: Tue, 9 Jul 2024 17:39:16 -0400 Subject: Add useWindowWidth hook and HistoryCard component --- src/hooks/useWindowWidth.js | 19 ++++++ src/views/Chores/ChoreCard.jsx | 10 +++- src/views/History/ChoreHistory.jsx | 113 +++------------------------------- src/views/History/HistoryCard.jsx | 120 +++++++++++++++++++++++++++++++++++++ 4 files changed, 157 insertions(+), 105 deletions(-) create mode 100644 src/hooks/useWindowWidth.js create mode 100644 src/views/History/HistoryCard.jsx (limited to 'src') diff --git a/src/hooks/useWindowWidth.js b/src/hooks/useWindowWidth.js new file mode 100644 index 0000000..92bf184 --- /dev/null +++ b/src/hooks/useWindowWidth.js @@ -0,0 +1,19 @@ +import { useEffect, useState } from 'react' +const useWindowWidth = () => { + const [windowWidth, setWindowWidth] = useState() + + useEffect(() => { + const handleResize = () => { + setWindowWidth(window.innerWidth) + } + + window.addEventListener('resize', handleResize) + + // Cleanup function to remove the event listener + return () => window.removeEventListener('resize', handleResize) + }, []) + + return windowWidth +} + +export default useWindowWidth diff --git a/src/views/Chores/ChoreCard.jsx b/src/views/Chores/ChoreCard.jsx index 5e54e6b..08a5406 100644 --- a/src/views/Chores/ChoreCard.jsx +++ b/src/views/Chores/ChoreCard.jsx @@ -45,7 +45,14 @@ import DateModal from '../Modals/Inputs/DateModal' import SelectModal from '../Modals/Inputs/SelectModal' import TextModal from '../Modals/Inputs/TextModal' import WriteNFCModal from '../Modals/Inputs/WriteNFCModal' -const ChoreCard = ({ chore, performers, onChoreUpdate, onChoreRemove, sx }) => { +const ChoreCard = ({ + chore, + performers, + onChoreUpdate, + onChoreRemove, + sx, + viewOnly, +}) => { const [activeUserId, setActiveUserId] = React.useState(0) const [isChangeDueDateModalOpen, setIsChangeDueDateModalOpen] = React.useState(false) @@ -367,6 +374,7 @@ const ChoreCard = ({ chore, performers, onChoreUpdate, onChoreRemove, sx }) => { { const [choreHistory, setChoresHistory] = useState([]) @@ -144,25 +143,6 @@ const ChoreHistory = () => { setHistoryInfo(historyInfo) } - function formatTimeDifference(startDate, endDate) { - const diffInMinutes = moment(startDate).diff(endDate, 'minutes') - let timeValue = diffInMinutes - let unit = 'minute' - - if (diffInMinutes >= 60) { - const diffInHours = moment(startDate).diff(endDate, 'hours') - timeValue = diffInHours - unit = 'hour' - - if (diffInHours >= 24) { - const diffInDays = moment(startDate).diff(endDate, 'days') - timeValue = diffInDays - unit = 'day' - } - } - - return `${timeValue} ${unit}${timeValue !== 1 ? 's' : ''}` - } if (isLoading) { return // Show loading indicator } @@ -251,89 +231,14 @@ const ChoreHistory = () => { {/* Chore History List (Updated Style) */} - {choreHistory.map((chore, index) => ( - <> - - {' '} - {/* Adjusted spacing and alignment */} - - - {performers - .find(p => p.userId === chore.completedBy) - ?.displayName?.charAt(0) || '?'} - - - - {' '} - {/* Removed vertical margin */} - - - {moment(chore.completedAt).format('ddd MM/DD/yyyy HH:mm')} - - - - {chore.dueDate && chore.completedAt > chore.dueDate - ? 'Late' - : 'On Time'} - - - - - { - performers.find(p => p.userId === chore.completedBy) - ?.displayName - } - {' '} - completed - {chore.completedBy !== chore.assignedTo && ( - <> - {', '} - assigned to{' '} - - { - performers.find(p => p.userId === chore.assignedTo) - ?.displayName - } - - - )} - - {chore.dueDate && ( - - Due: {moment(chore.dueDate).format('ddd MM/DD/yyyy')} - - )} - {chore.notes && ( - - Note: {chore.notes} - - )} - - - {index < choreHistory.length - 1 && ( - <> - - {/* time between two completion: */} - {index < choreHistory.length - 1 && - choreHistory[index + 1].completedAt && ( - - {formatTimeDifference( - chore.completedAt, - choreHistory[index + 1].completedAt, - )}{' '} - before - - )} - - - )} - + {choreHistory.map((historyEntry, index) => ( + ))} diff --git a/src/views/History/HistoryCard.jsx b/src/views/History/HistoryCard.jsx new file mode 100644 index 0000000..c606fbf --- /dev/null +++ b/src/views/History/HistoryCard.jsx @@ -0,0 +1,120 @@ +import { + Avatar, + Box, + Chip, + ListDivider, + ListItem, + ListItemContent, + ListItemDecorator, + Typography, +} from '@mui/joy' +import moment from 'moment' + +const HistoryCard = ({ allHistory, performers, historyEntry, index }) => { + function formatTimeDifference(startDate, endDate) { + const diffInMinutes = moment(startDate).diff(endDate, 'minutes') + let timeValue = diffInMinutes + let unit = 'minute' + + if (diffInMinutes >= 60) { + const diffInHours = moment(startDate).diff(endDate, 'hours') + timeValue = diffInHours + unit = 'hour' + + if (diffInHours >= 24) { + const diffInDays = moment(startDate).diff(endDate, 'days') + timeValue = diffInDays + unit = 'day' + } + } + + return `${timeValue} ${unit}${timeValue !== 1 ? 's' : ''}` + } + return ( + <> + + {' '} + {/* Adjusted spacing and alignment */} + + + {performers + .find(p => p.userId === historyEntry.completedBy) + ?.displayName?.charAt(0) || '?'} + + + + {' '} + {/* Removed vertical margin */} + + + {moment(historyEntry.completedAt).format('ddd MM/DD/yyyy HH:mm')} + + + + {historyEntry.dueDate && + historyEntry.completedAt > historyEntry.dueDate + ? 'Late' + : 'On Time'} + + + + + { + performers.find(p => p.userId === historyEntry.completedBy) + ?.displayName + } + {' '} + completed + {historyEntry.completedBy !== historyEntry.assignedTo && ( + <> + {', '} + assigned to{' '} + + { + performers.find(p => p.userId === historyEntry.assignedTo) + ?.displayName + } + + + )} + + {historyEntry.dueDate && ( + + Due: {moment(historyEntry.dueDate).format('ddd MM/DD/yyyy')} + + )} + {historyEntry.notes && ( + + Note: {historyEntry.notes} + + )} + + + {index < allHistory.length - 1 && ( + <> + + {/* time between two completion: */} + {index < allHistory.length - 1 && + allHistory[index + 1].completedAt && ( + + {formatTimeDifference( + historyEntry.completedAt, + allHistory[index + 1].completedAt, + )}{' '} + before + + )} + + + )} + + ) +} + +export default HistoryCard -- cgit