import { Checklist, EventBusy, Group, Timelapse } from '@mui/icons-material' import { Avatar, Button, Chip, Container, Grid, List, ListItem, ListItemContent, Sheet, Typography, } from '@mui/joy' import moment from 'moment' import React, { useEffect, useState } from 'react' import { Link, useParams } from 'react-router-dom' import { API_URL } from '../../Config' import { GetAllCircleMembers } from '../../utils/Fetcher' import { Fetch } from '../../utils/TokenManager' import LoadingComponent from '../components/Loading' import HistoryCard from './HistoryCard' const ChoreHistory = () => { const [choreHistory, setChoresHistory] = useState([]) const [userHistory, setUserHistory] = useState([]) const [performers, setPerformers] = useState([]) const [historyInfo, setHistoryInfo] = useState([]) const [isLoading, setIsLoading] = useState(true) // Add loading state const { choreId } = useParams() useEffect(() => { setIsLoading(true) // Start loading Promise.all([ Fetch(`${API_URL}/chores/${choreId}/history`).then(res => res.json()), GetAllCircleMembers().then(res => res.json()), ]) .then(([historyData, usersData]) => { setChoresHistory(historyData.res) const newUserChoreHistory = {} historyData.res.forEach(choreHistory => { const userId = choreHistory.completedBy newUserChoreHistory[userId] = (newUserChoreHistory[userId] || 0) + 1 }) setUserHistory(newUserChoreHistory) setPerformers(usersData.res) updateHistoryInfo(historyData.res, newUserChoreHistory, usersData.res) }) .catch(error => { console.error('Error fetching data:', error) // Handle errors, e.g., show an error message to the user }) .finally(() => { setIsLoading(false) // Finish loading }) }, [choreId]) const updateHistoryInfo = (histories, userHistories, performers) => { // average delay for task completaion from due date: const averageDelay = histories.reduce((acc, chore) => { if (chore.dueDate) { // Only consider chores with a due date return acc + moment(chore.completedAt).diff(chore.dueDate, 'hours') } return acc }, 0) / histories.length const averageDelayMoment = moment.duration(averageDelay, 'hours') const maximumDelay = histories.reduce((acc, chore) => { if (chore.dueDate) { // Only consider chores with a due date const delay = moment(chore.completedAt).diff(chore.dueDate, 'hours') return delay > acc ? delay : acc } return acc }, 0) const maxDelayMoment = moment.duration(maximumDelay, 'hours') // find max value in userHistories: const userCompletedByMost = Object.keys(userHistories).reduce((a, b) => userHistories[a] > userHistories[b] ? a : b, ) const userCompletedByLeast = Object.keys(userHistories).reduce((a, b) => userHistories[a] < userHistories[b] ? a : b, ) const historyInfo = [ { icon: , text: 'Total Completed', subtext: `${histories.length} times`, }, { icon: , text: 'Usually Within', subtext: moment.duration(averageDelayMoment).humanize(), }, { icon: , text: 'Maximum Delay', subtext: moment.duration(maxDelayMoment).humanize(), }, { icon: , text: ' Completed Most', subtext: `${ performers.find(p => p.userId === Number(userCompletedByMost)) ?.displayName } `, }, // contributes: { icon: , text: 'Total Performers', subtext: `${Object.keys(userHistories).length} users`, }, { icon: , text: 'Last Completed', subtext: `${ performers.find(p => p.userId === Number(histories[0].completedBy)) ?.displayName }`, }, ] setHistoryInfo(historyInfo) } if (isLoading) { return } if (!choreHistory.length) { return ( No History Yet You haven't completed any tasks. Once you start finishing tasks, they'll show up here. ) } return ( Summary: {historyInfo.map((info, index) => ( {/* divider between the list items: */} {info.text} {info.subtext ? info.subtext : '--'} ))} {/* User History Cards */} History: {/* Chore History List (Updated Style) */} {choreHistory.map((historyEntry, index) => ( ))} ) } export default ChoreHistory