diff --git a/src/views/Authorization/ForgotPasswordView.jsx b/src/views/Authorization/ForgotPasswordView.jsx index 44601eb..f964a68 100644 --- a/src/views/Authorization/ForgotPasswordView.jsx +++ b/src/views/Authorization/ForgotPasswordView.jsx @@ -1,4 +1,5 @@ // create boilerplate for ResetPasswordView: +import LogoSVG from '@/assets/logo.svg' import { Box, Button, @@ -12,7 +13,6 @@ import { } from '@mui/joy' import { useState } from 'react' import { useNavigate } from 'react-router-dom' - import { API_URL } from './../../Config' const ForgotPasswordView = () => { @@ -105,12 +105,7 @@ const ForgotPasswordView = () => { }} > - logo + logo {/* */} Done diff --git a/src/views/ChoreEdit/ChoreEdit.jsx b/src/views/ChoreEdit/ChoreEdit.jsx index 645a15d..968da24 100644 --- a/src/views/ChoreEdit/ChoreEdit.jsx +++ b/src/views/ChoreEdit/ChoreEdit.jsx @@ -67,7 +67,7 @@ const ChoreEdit = () => { const [frequencyMetadata, setFrequencyMetadata] = useState({}) const [labels, setLabels] = useState([]) const [allUserThings, setAllUserThings] = useState([]) - const [thingTrigger, setThingTrigger] = useState({}) + const [thingTrigger, setThingTrigger] = useState(null) const [isThingValid, setIsThingValid] = useState(false) const [notificationMetadata, setNotificationMetadata] = useState({}) @@ -459,6 +459,12 @@ const ChoreEdit = () => { onFrequencyTypeUpdate={setFrequencyType} frequencyMetadata={frequencyMetadata} onFrequencyMetadataUpdate={setFrequencyMetadata} + onFrequencyTimeUpdate={t => { + setFrequencyMetadata({ + ...frequencyMetadata, + time: t, + }) + }} frequencyError={errors?.frequency} allUserThings={allUserThings} onTriggerUpdate={thingUpdate => { diff --git a/src/views/ChoreEdit/ChoreView.jsx b/src/views/ChoreEdit/ChoreView.jsx index 99b710c..df45aa7 100644 --- a/src/views/ChoreEdit/ChoreView.jsx +++ b/src/views/ChoreEdit/ChoreView.jsx @@ -10,9 +10,9 @@ import { import { Box, Button, + Card, Checkbox, Container, - Divider, FormControl, Grid, Input, @@ -26,7 +26,7 @@ import { } from '@mui/joy' import moment from 'moment' import { useEffect, useState } from 'react' -import { useNavigate, useParams, useSearchParams } from 'react-router-dom' +import { useParams, useSearchParams } from 'react-router-dom' import { GetAllUsers, GetChoreDetailById, @@ -50,8 +50,6 @@ const ChoreView = () => { const { choreId } = useParams() const [note, setNote] = useState(null) - const Navigate = useNavigate() - const [searchParams] = useSearchParams() const [isPendingCompletion, setIsPendingCompletion] = useState(false) @@ -128,12 +126,9 @@ const ChoreView = () => { chore.lastCompletedDate && moment(chore.lastCompletedDate).fromNow() // moment(chore.lastCompletedDate).format('MM/DD/YYYY hh:mm A')) - }( - ${ - performers.find(p => p.id === chore.lastCompletedBy) - ?.displayName - } - )` + }(${ + performers.find(p => p.id === chore.lastCompletedBy)?.displayName + })` : 'Never', }, { @@ -234,13 +229,20 @@ const ChoreView = () => { ))} - + /> */} - + Additional Notes { my: 1, }} /> + { if (e.target.checked) { setCompletedDate( @@ -330,7 +334,7 @@ const ChoreView = () => { > Mark as {isPendingCompletion ? 'completed' : 'done'} */} - + { const [months, setMonths] = useState({}) @@ -66,104 +68,200 @@ const RepeatOnSections = ({ const [daysOfTheWeek, setDaysOfTheWeek] = useState({}) const [monthsOfTheYear, setMonthsOfTheYear] = useState({}) const [intervalUnit, setIntervalUnit] = useState('days') + const [frequancyMetadata, setFrequancyMetadata] = useState({}) + const [time, setTime] = useState('18:00') + const timePickerComponent = ( + + At: + { + // create new today date with selected time with Timezone: + onFrequencyTimeUpdate( + moment( + moment(new Date()).format('YYYY-MM-DD') + 'T' + e.target.value, + ).format(), + ) + }} + /> + + ) switch (frequencyType) { case 'interval': return ( - - Every: - { - if (e.target.value < 1) { - e.target.value = 1 - } - onFrequencyUpdate(e.target.value) - }} - /> - - + <> + + Every: + { + if (e.target.value < 1) { + e.target.value = 1 + } + onFrequencyUpdate(e.target.value) + }} + /> + + + {timePickerComponent} + ) case 'days_of_the_week': return ( - - - - {[ - 'monday', - 'tuesday', - 'wednesday', - 'thursday', - 'friday', - 'saturday', - 'sunday', - ].map(item => ( - - + + + + {[ + 'monday', + 'tuesday', + 'wednesday', + 'thursday', + 'friday', + 'saturday', + 'sunday', + ].map(item => ( + + { - const newDaysOfTheWeek = frequencyMetadata['days'] || [] - if (newDaysOfTheWeek.includes(item)) { - newDaysOfTheWeek.splice( - newDaysOfTheWeek.indexOf(item), - 1, - ) - } else { - newDaysOfTheWeek.push(item) - } + checked={frequencyMetadata?.days?.includes(item) || false} + onClick={() => { + const newDaysOfTheWeek = frequencyMetadata['days'] || [] + if (newDaysOfTheWeek.includes(item)) { + newDaysOfTheWeek.splice( + newDaysOfTheWeek.indexOf(item), + 1, + ) + } else { + newDaysOfTheWeek.push(item) + } - onFrequencyMetadataUpdate({ - days: newDaysOfTheWeek.sort(), - }) - }} - overlay - disableIcon - variant='soft' - label={item.charAt(0).toUpperCase() + item.slice(1)} - /> - - ))} - - - + onFrequencyMetadataUpdate({ + days: newDaysOfTheWeek.sort(), + }) + }} + overlay + disableIcon + variant='soft' + label={item.charAt(0).toUpperCase() + item.slice(1)} + /> + + ))} + + + + {timePickerComponent} + ) case 'day_of_the_month': return ( - + <> + + + + {[ + 'january', + 'february', + 'march', + 'april', + 'may', + 'june', + 'july', + 'august', + 'september', + 'october', + 'november', + 'december', + ].map(item => ( + + { + // const newMonthsOfTheYear = { + // ...monthsOfTheYear, + // } + // newMonthsOfTheYear[item] = !newMonthsOfTheYear[item] + // onFrequencyMetadataUpdate({ + // months: newMonthsOfTheYear, + // }) + // setMonthsOfTheYear(newMonthsOfTheYear) + // }} + onClick={() => { + const newMonthsOfTheYear = + frequencyMetadata['months'] || [] + if (newMonthsOfTheYear.includes(item)) { + newMonthsOfTheYear.splice( + newMonthsOfTheYear.indexOf(item), + 1, + ) + } else { + newMonthsOfTheYear.push(item) + } + + onFrequencyMetadataUpdate({ + months: newMonthsOfTheYear.sort(), + }) + console.log('newMonthsOfTheYear', newMonthsOfTheYear) + // setDaysOfTheWeek(newDaysOfTheWeek) + }} + overlay + disableIcon + variant='soft' + label={item.charAt(0).toUpperCase() + item.slice(1)} + /> + + ))} + + + - of the following month/s: + of the above month/s - - - {[ - 'january', - 'february', - 'march', - 'april', - 'may', - 'june', - 'july', - 'august', - 'september', - 'october', - 'november', - 'december', - ].map(item => ( - - { - // const newMonthsOfTheYear = { - // ...monthsOfTheYear, - // } - // newMonthsOfTheYear[item] = !newMonthsOfTheYear[item] - // onFrequencyMetadataUpdate({ - // months: newMonthsOfTheYear, - // }) - // setMonthsOfTheYear(newMonthsOfTheYear) - // }} - onClick={() => { - const newMonthsOfTheYear = - frequencyMetadata['months'] || [] - if (newMonthsOfTheYear.includes(item)) { - newMonthsOfTheYear.splice( - newMonthsOfTheYear.indexOf(item), - 1, - ) - } else { - newMonthsOfTheYear.push(item) - } - - onFrequencyMetadataUpdate({ - months: newMonthsOfTheYear.sort(), - }) - console.log('newMonthsOfTheYear', newMonthsOfTheYear) - // setDaysOfTheWeek(newDaysOfTheWeek) - }} - overlay - disableIcon - variant='soft' - label={item.charAt(0).toUpperCase() + item.slice(1)} - /> - - ))} - - - + {timePickerComponent} + ) default: @@ -269,6 +303,7 @@ const RepeatSection = ({ onFrequencyTypeUpdate, frequencyMetadata, onFrequencyMetadataUpdate, + onFrequencyTimeUpdate, frequencyError, allUserThings, onTriggerUpdate, @@ -440,6 +475,7 @@ const RepeatSection = ({ onFrequencyTypeUpdate={onFrequencyTypeUpdate} frequencyMetadata={frequencyMetadata || {}} onFrequencyMetadataUpdate={onFrequencyMetadataUpdate} + onFrequencyTimeUpdate={onFrequencyTimeUpdate} things={allUserThings} /> diff --git a/src/views/Circles/JoinCircle.jsx b/src/views/Circles/JoinCircle.jsx index fd6d542..fdf9c8f 100644 --- a/src/views/Circles/JoinCircle.jsx +++ b/src/views/Circles/JoinCircle.jsx @@ -40,12 +40,6 @@ const JoinCircleView = () => { boxShadow: 'md', }} > - {/* logo */}