Add a date when having repeatable frequency type, Fix logo bug

5 files changed, 216 insertions, 181 deletions

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 = () => {
           }}
         >
           <Box>
-            <img
-              src='/src/assets/logo.svg'
-              alt='logo'
-              width='128px'
-              height='128px'
-            />
+            <img src={LogoSVG} alt='logo' width='128px' height='128px' />
             {/* <Logo /> */}
             <Typography level='h2'>
               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 = () => {
           ))}
         </Grid>
       </Box>
-      <Divider
+      {/* <Divider
         sx={{
           my: 2,
         }}
-      />
+      /> */}
 
-      <Box>
+      <Card
+        sx={{
+          p: 2,
+          borderRadius: 'md',
+          boxShadow: 'sm',
+          mt: 2,
+        }}
+      >
         <Typography level='title-md'>Additional Notes</Typography>
         <Input
           fullWidth
@@ -260,11 +262,13 @@ const ChoreView = () => {
             my: 1,
           }}
         />
+
         <FormControl size='sm' sx={{ width: 400 }}>
           <Checkbox
             defaultChecked={completedDate !== null}
             checked={completedDate !== null}
             value={completedDate !== null}
+            size='lg'
             onChange={e => {
               if (e.target.checked) {
                 setCompletedDate(
@@ -330,7 +334,7 @@ const ChoreView = () => {
           >
             <Box>Mark as {isPendingCompletion ? 'completed' : 'done'}</Box>
           </Button> */}
-      </Box>
+      </Card>
 
       <Snackbar
         open={isPendingCompletion}
diff --git a/src/views/ChoreEdit/RepeatSection.jsx b/src/views/ChoreEdit/RepeatSection.jsx
index cb680eb..99f196f 100644
--- a/src/views/ChoreEdit/RepeatSection.jsx
+++ b/src/views/ChoreEdit/RepeatSection.jsx
@@ -15,6 +15,7 @@ import {
   Select,
   Typography,
 } from '@mui/joy'
+import moment from 'moment'
 import { useContext, useState } from 'react'
 import { UserContext } from '../../contexts/UserContext'
 import { isPlusAccount } from '../../utils/Helpers'
@@ -59,6 +60,7 @@ const RepeatOnSections = ({
   onFrequencyTypeUpdate,
   frequencyMetadata,
   onFrequencyMetadataUpdate,
+  onFrequencyTimeUpdate,
   things,
 }) => {
   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 = (
+    <Grid item sm={12} sx={{ display: 'flex', alignItems: 'center' }}>
+      <Typography level='h5'>At: </Typography>
+      <Input
+        type='time'
+        defaultValue={
+          frequencyMetadata?.time
+            ? moment(frequencyMetadata?.time).format('HH:mm')
+            : '18:00'
+        }
+        onChange={e => {
+          // create new today date with selected time with Timezone:
+          onFrequencyTimeUpdate(
+            moment(
+              moment(new Date()).format('YYYY-MM-DD') + 'T' + e.target.value,
+            ).format(),
+          )
+        }}
+      />
+    </Grid>
+  )
 
   switch (frequencyType) {
     case 'interval':
       return (
-        <Grid item sm={12} sx={{ display: 'flex', alignItems: 'center' }}>
-          <Typography level='h5'>Every: </Typography>
-          <Input
-            type='number'
-            value={frequency}
-            onChange={e => {
-              if (e.target.value < 1) {
-                e.target.value = 1
-              }
-              onFrequencyUpdate(e.target.value)
-            }}
-          />
-          <Select placeholder='Unit' value={intervalUnit}>
-            {['hours', 'days', 'weeks', 'months', 'years'].map(item => (
-              <Option
-                key={item}
-                value={item}
-                onClick={() => {
-                  setIntervalUnit(item)
-                  onFrequencyMetadataUpdate({
-                    unit: item,
-                  })
-                }}
-              >
-                {item.charAt(0).toUpperCase() + item.slice(1)}
-              </Option>
-            ))}
-          </Select>
-        </Grid>
+        <>
+          <Grid item sm={12} sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography level='h5'>Every: </Typography>
+            <Input
+              type='number'
+              value={frequency}
+              onChange={e => {
+                if (e.target.value < 1) {
+                  e.target.value = 1
+                }
+                onFrequencyUpdate(e.target.value)
+              }}
+            />
+            <Select placeholder='Unit' value={intervalUnit}>
+              {['hours', 'days', 'weeks', 'months', 'years'].map(item => (
+                <Option
+                  key={item}
+                  value={item}
+                  onClick={() => {
+                    setIntervalUnit(item)
+                    onFrequencyMetadataUpdate({
+                      unit: item,
+                    })
+                  }}
+                >
+                  {item.charAt(0).toUpperCase() + item.slice(1)}
+                </Option>
+              ))}
+            </Select>
+          </Grid>
+          {timePickerComponent}
+        </>
       )
     case 'days_of_the_week':
       return (
-        <Grid item sm={12} sx={{ display: 'flex', alignItems: 'center' }}>
-          <Card>
-            <List
-              orientation='horizontal'
-              wrap
-              sx={{
-                '--List-gap': '8px',
-                '--ListItem-radius': '20px',
-              }}
-            >
-              {[
-                'monday',
-                'tuesday',
-                'wednesday',
-                'thursday',
-                'friday',
-                'saturday',
-                'sunday',
-              ].map(item => (
-                <ListItem key={item}>
-                  <Checkbox
-                    // disabled={index === 0}
+        <>
+          <Grid item sm={12} sx={{ display: 'flex', alignItems: 'center' }}>
+            <Card>
+              <List
+                orientation='horizontal'
+                wrap
+                sx={{
+                  '--List-gap': '8px',
+                  '--ListItem-radius': '20px',
+                }}
+              >
+                {[
+                  'monday',
+                  'tuesday',
+                  'wednesday',
+                  'thursday',
+                  'friday',
+                  'saturday',
+                  'sunday',
+                ].map(item => (
+                  <ListItem key={item}>
+                    <Checkbox
+                      // disabled={index === 0}
 
-                    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)
-                      }
+                      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)}
-                  />
-                </ListItem>
-              ))}
-            </List>
-          </Card>
-        </Grid>
+                        onFrequencyMetadataUpdate({
+                          days: newDaysOfTheWeek.sort(),
+                        })
+                      }}
+                      overlay
+                      disableIcon
+                      variant='soft'
+                      label={item.charAt(0).toUpperCase() + item.slice(1)}
+                    />
+                  </ListItem>
+                ))}
+              </List>
+            </Card>
+          </Grid>
+          {timePickerComponent}
+        </>
       )
     case 'day_of_the_month':
       return (
-        <Grid
-          item
-          sm={12}
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            flexDirection: 'column',
-            justifyContent: 'space-between',
-          }}
-        >
+        <>
+          <Grid
+            item
+            sm={12}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              flexDirection: 'column',
+              justifyContent: 'space-between',
+            }}
+          >
+            <Card>
+              <List
+                orientation='horizontal'
+                wrap
+                sx={{
+                  '--List-gap': '8px',
+                  '--ListItem-radius': '20px',
+                }}
+              >
+                {[
+                  'january',
+                  'february',
+                  'march',
+                  'april',
+                  'may',
+                  'june',
+                  'july',
+                  'august',
+                  'september',
+                  'october',
+                  'november',
+                  'december',
+                ].map(item => (
+                  <ListItem key={item}>
+                    <Checkbox
+                      // disabled={index === 0}
+                      checked={frequencyMetadata?.months?.includes(item)}
+                      // checked={months[item] || false}
+                      // onClick={() => {
+                      //   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)}
+                    />
+                  </ListItem>
+                ))}
+              </List>
+            </Card>
+          </Grid>
           <Box
             sx={{
               display: 'flex',
@@ -187,74 +285,10 @@ const RepeatOnSections = ({
                 onFrequencyUpdate(e.target.value)
               }}
             />
-            <Typography>of the following month/s: </Typography>
+            <Typography>of the above month/s</Typography>
           </Box>
-          <Card>
-            <List
-              orientation='horizontal'
-              wrap
-              sx={{
-                '--List-gap': '8px',
-                '--ListItem-radius': '20px',
-              }}
-            >
-              {[
-                'january',
-                'february',
-                'march',
-                'april',
-                'may',
-                'june',
-                'july',
-                'august',
-                'september',
-                'october',
-                'november',
-                'december',
-              ].map(item => (
-                <ListItem key={item}>
-                  <Checkbox
-                    // disabled={index === 0}
-                    checked={frequencyMetadata?.months?.includes(item)}
-                    // checked={months[item] || false}
-                    // onClick={() => {
-                    //   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)}
-                  />
-                </ListItem>
-              ))}
-            </List>
-          </Card>
-        </Grid>
+          {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}
                     />
                   </Grid>
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',
           }}
         >
-          {/* <img
-            src='/src/assets/logo.svg'
-            alt='logo'
-            width='128px'
-            height='128px'
-          /> */}
           <Logo />
 
           <Typography level='h2'>