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/views/History/ChoreHistory.jsx | 113 +++------------------------------- src/views/History/HistoryCard.jsx | 120 +++++++++++++++++++++++++++++++++++++ 2 files changed, 129 insertions(+), 104 deletions(-) create mode 100644 src/views/History/HistoryCard.jsx (limited to 'src/views/History') diff --git a/src/views/History/ChoreHistory.jsx b/src/views/History/ChoreHistory.jsx index 22ea6a9..b85e456 100644 --- a/src/views/History/ChoreHistory.jsx +++ b/src/views/History/ChoreHistory.jsx @@ -3,12 +3,10 @@ import { Avatar, Box, Button, - Chip, CircularProgress, Container, Grid, List, - ListDivider, ListItem, ListItemContent, ListItemDecorator, @@ -21,6 +19,7 @@ import { Link, useParams } from 'react-router-dom' import { API_URL } from '../../Config' import { GetAllCircleMembers } from '../../utils/Fetcher' import { Fetch } from '../../utils/TokenManager' +import HistoryCard from './HistoryCard' const ChoreHistory = () => { 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