diff --git a/src/components/common/FadeModal.jsx b/src/components/common/FadeModal.jsx index 745cada..88e11de 100644 --- a/src/components/common/FadeModal.jsx +++ b/src/components/common/FadeModal.jsx @@ -1,4 +1,5 @@ import { Modal, ModalDialog, ModalOverflow } from '@mui/joy' +import Z_INDEX from '../../constants/zIndex' /** * FadeModal component with consistent fade-in/out animations @@ -18,8 +19,10 @@ const FadeModal = ({ open={open} onClose={onClose} sx={{ + zIndex: Z_INDEX.MODAL_BACKDROP, '& .MuiModal-backdrop': { backdropFilter: backdropBlur ? 'blur(3px)' : 'none', + zIndex: Z_INDEX.MODAL_BACKDROP, }, }} keepMounted @@ -39,6 +42,7 @@ const FadeModal = ({ { top: 0, left: 0, width: '100%', - zIndex: 10000, + zIndex: Z_INDEX.ALERTS, overflow: 'hidden', }} > diff --git a/src/views/ChoreEdit/ChoreEdit.jsx b/src/views/ChoreEdit/ChoreEdit.jsx index 9c0958a..a558ccb 100644 --- a/src/views/ChoreEdit/ChoreEdit.jsx +++ b/src/views/ChoreEdit/ChoreEdit.jsx @@ -30,7 +30,7 @@ import { useCreateChore, useUpdateChore, } from '../../queries/ChoreQueries.jsx' -import { useUserProfile } from '../../queries/UserQueries.jsx' +import { useCircleMembers, useUserProfile } from '../../queries/UserQueries.jsx' import { useNotification } from '../../service/NotificationProvider' import { getTextColorFromBackgroundColor } from '../../utils/Colors.jsx' import { @@ -76,8 +76,6 @@ const ChoreEdit = () => { const [performers, setPerformers] = useState([]) const [assignStrategy, setAssignStrategy] = useState(ASSIGN_STRATEGIES[2]) const [dueDate, setDueDate] = useState(null) - const [completed, setCompleted] = useState(false) - const [completedDate, setCompletedDate] = useState('') const [assignedTo, setAssignedTo] = useState(-1) const [frequencyType, setFrequencyType] = useState('once') const [frequency, setFrequency] = useState(1) @@ -110,6 +108,8 @@ const ChoreEdit = () => { isLoading: isChoreLoading, refetch: refetchChore, } = useChore(choreId) + const { data: membersData, isLoading: isMemberDataLoading } = + useCircleMembers() const { showSuccess, showError } = useNotification() const [userLabels, setUserLabels] = useState([]) @@ -309,9 +309,13 @@ const ChoreEdit = () => { setIsNotificable(data.res.notification) setThingTrigger(data.res.thingChore) - // setDueDate(data.res.dueDate) - // setCompleted(data.res.completed) - // setCompletedDate(data.res.completedDate) + setDueDate( + data.res.nextDueDate + ? moment(data.res.nextDueDate).format('YYYY-MM-DDTHH:mm:00') + : null, + ) + setCreatedBy(data.res.createdBy) + setUpdatedBy(data.res.updatedBy) } }, [choreData, isChoreLoading, searchParams]) @@ -380,7 +384,8 @@ const ChoreEdit = () => { if ( (isChoreLoading && choreId) || isUserLabelsLoading || - isUserProfileLoading + isUserProfileLoading || + isMemberDataLoading ) { return } @@ -1009,7 +1014,6 @@ const ChoreEdit = () => { )} - {choreId > 0 && ( { Created by{' '} - {performers.find(f => f.userId === createdBy)?.displayName} + {membersData.res.find(f => f.userId === createdBy)?.displayName} {' '} {moment(chore.createdAt).fromNow()} @@ -1033,7 +1037,10 @@ const ChoreEdit = () => { Updated by{' '} - {performers.find(f => f.userId === updatedBy)?.displayName} + { + membersData.res.find(f => f.userId === updatedBy) + ?.displayName + } {' '} {moment(chore.updatedAt).fromNow()} diff --git a/src/views/components/NavBar.jsx b/src/views/components/NavBar.jsx index a1fd787..bd8bb2e 100644 --- a/src/views/components/NavBar.jsx +++ b/src/views/components/NavBar.jsx @@ -22,6 +22,7 @@ import { ListItemDecorator, Typography, } from '@mui/joy' + import { useState } from 'react' import { useLocation, useNavigate } from 'react-router-dom' import { version } from '../../../package.json' @@ -81,6 +82,8 @@ const links = [ }, ] +import Z_INDEX from '../../constants/zIndex' + const NavBar = () => { const navigate = useNavigate() const [drawerOpen, setDrawerOpen] = useState(false) @@ -110,7 +113,7 @@ const NavBar = () => { style={{ paddingTop: `calc( env(safe-area-inset-top, 0px))`, position: 'sticky', - zIndex: 10000, + zIndex: Z_INDEX.NAVBAR, top: 0, minHeight: '45px', backgroundColor: 'var(--joy-palette-background-body)', @@ -164,7 +167,7 @@ const NavBar = () => { height: 'calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))', overflow: 'auto', - zIndex: 999, + zIndex: Z_INDEX.DRAWER, }, }} > diff --git a/src/views/components/NetworkBanner.jsx b/src/views/components/NetworkBanner.jsx index 50c9806..ca22991 100644 --- a/src/views/components/NetworkBanner.jsx +++ b/src/views/components/NetworkBanner.jsx @@ -1,6 +1,7 @@ import { WifiOff } from '@mui/icons-material' import { Alert, Box } from '@mui/joy' import { useEffect, useState } from 'react' +import Z_INDEX from '../../constants/zIndex' import { networkManager } from '../../hooks/NetworkManager' const NetworkBanner = () => { @@ -23,7 +24,7 @@ const NetworkBanner = () => { position: 'fixed', top: 0, left: 0, - zIndex: 10001, + zIndex: Z_INDEX.NETWORK_BANNER, padding: '4px', pt: `calc( env(safe-area-inset-top, 0px))`, width: '100%',