feat: Refactor user profile management and improve token validation

- Introduced `useUserProfile` hook to centralize user profile fetching and management.
- Updated various components to utilize the new `useUserProfile` hook instead of context.
- Enhanced token validation logic in `Fetch` function to prevent unnecessary redirects.
- Added `parseDueDate` function to handle due date parsing with improved logic.
- Cleaned up user profile state management across multiple views and settings.
- Improved loading states and error handling in user-related components.
- remove usercontext and just use react query for userProfile

src/App.jsx

@@ -7,12 +7,10 @@ import { Outlet, useNavigate } from 'react-router-dom'
 import { useRegisterSW } from 'virtual:pwa-register/react'
 import { registerCapacitorListeners } from './CapacitorListener'
 import { ImpersonateUserProvider } from './contexts/ImpersonateUserContext'
-import { UserContext } from './contexts/UserContext'
 import { useResource } from './queries/ResourceQueries'
 import { AuthenticationProvider } from './service/AuthenticationService'
 import { ErrorProvider } from './service/ErrorProvider'
-import { GetUserProfile } from './utils/Fetcher'
+import { apiManager } from './utils/TokenManager'
-import { apiManager, isTokenValid } from './utils/TokenManager'
 import NetworkBanner from './views/components/NetworkBanner'
 const add = className => {
   document.getElementById('root').classList.add(className)
@@ -23,15 +21,14 @@ const remove = className => {
 }
 // TODO: Update the interval to at 60 minutes
 const intervalMS = 5 * 60 * 1000 // 5 minutes
-
+const queryClient = new QueryClient({})
 function App() {
   const resource = useResource()
   const navigate = useNavigate()
   startApiManager(navigate)
   startOpenReplay()
-  const queryClient = new QueryClient()
+
   const { mode, systemMode } = useColorScheme()
-  const [userProfile, setUserProfile] = useState(null)
   const [showUpdateSnackbar, setShowUpdateSnackbar] = useState(true)
 
   const {
@@ -72,23 +69,12 @@ function App() {
 
     return remove('dark')
   }
-  const getUserProfile = () => {
+
-    GetUserProfile()
-      .then(res => {
-        res.json().then(data => {
-          setUserProfile(data.res)
-        })
-      })
-      .catch(error => {})
-  }
   useEffect(() => {
     setThemeClass()
   }, [mode, systemMode])
   useEffect(() => {
     registerCapacitorListeners()
-    if (isTokenValid()) {
-      if (!userProfile) getUserProfile()
-    }
   }, [])
 
   return (
@@ -99,10 +85,8 @@ function App() {
         <AuthenticationProvider />
         <ErrorProvider>
           <ImpersonateUserProvider>
-            <UserContext.Provider value={{ userProfile, setUserProfile }}>
+            <NavBar />
-              <NavBar />
+            <Outlet />
-              <Outlet />
-            </UserContext.Provider>
           </ImpersonateUserProvider>
         </ErrorProvider>
 
@@ -133,6 +117,7 @@ const startOpenReplay = () => {
   const tracker = new Tracker({
     projectKey: import.meta.env.VITE_OPENREPLAY_PROJECT_KEY,
   })
+
   tracker.start()
 }
 export default App

src/components/NotificationTemplate.jsx

@@ -1,3 +1,4 @@
+import { Save } from '@mui/icons-material'
 import AddIcon from '@mui/icons-material/Add'
 import DeleteIcon from '@mui/icons-material/Delete'
 import InfoIcon from '@mui/icons-material/Info'
@@ -14,66 +15,64 @@ import Typography from '@mui/joy/Typography'
 import { useCallback, useEffect, useState } from 'react'
 
 const timeUnits = [
-  { label: 'Minutes', value: 'minutes' },
+  { label: 'Mins', value: 'minutes' },
   { label: 'Hours', value: 'hours' },
   { label: 'Days', value: 'days' },
 ]
 
 const beforeAfterOptions = [
-  { label: 'Before Due', value: 'before' },
+  { label: 'Before', value: 'before' },
   { label: 'On Due', value: 'ondue' },
-  { label: 'After Due', value: 'after' },
+  { label: 'After', value: 'after' },
 ]
 
 function getRelativeLabel(notification) {
-  const { amount, unit, when } = notification
+  const { value, unit, type } = notification
-
+  if (type === 'ondue') {
-  // For "On Due" notification
-  if (when === 'ondue') {
     return 'On due date'
   }
-
+  return `${value} ${unit} ${type === 'before' ? 'before' : 'after'} due`
-  // For before/after notifications
-  return `${amount} ${unit} ${when === 'before' ? 'before' : 'after'} due`
 }
 
-const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {
+const NotificationTemplate = ({
+  maxNotifications = 5,
+  onChange,
+  value,
+  showTimeline = true,
+}) => {
   const [templateName, setTemplateName] = useState(
     value?.name || 'New Notification Template',
   )
-  const [notifications, setNotifications] = useState([
+  const [notifications, setNotifications] = useState(
-    value?.notifications || {
+    value?.templates ||
-      amount: 0,
+      JSON.parse(localStorage.getItem('defaultNotificationTemplate')) ||
-      when: 'ondue',
+      [],
-    },
+  )
-  ])
-  const [error, setError] = useState(null)
 
+  const [error, setError] = useState(null)
+  const [showSaveDefault, setShowSaveDefault] = useState(false)
   // Create a map of notification indices for timeline display
   const [notificationIndexMap, setNotificationIndexMap] = useState({})
 
-  // Use useCallback to memoize the function
   const updateNotificationIndices = useCallback(() => {
     // Sort notifications for consistent ordering
     const sorted = [...notifications].sort((a, b) => {
       // Always ensure correct ordering: Before Due -> On Due -> After Due
-      if (a.when !== b.when) {
+      if (a.type !== b.type) {
-        // Before Due always comes first
+        // Before Due  first
-        if (a.when === 'before') return -1
+        if (a.type === 'before') return -1
-        if (b.when === 'before') return 1
+        if (b.type === 'before') return 1
 
         // On Due comes before After Due
-        if (a.when === 'ondue') return -1
+        if (a.type === 'ondue') return -1
-        if (b.when === 'ondue') return 1
+        if (b.type === 'ondue') return 1
-
+        // DEFAULT CASE ( NOT SURE FOR FUTURE )?
-        // Default case (should not be reached with our options)
         return 0
       }
 
-      // Convert everything to minutes for consistent comparison
       const getMinutes = notif => {
-        const { amount, unit } = notif
+        const { value, unit } = notif
-        let minutes = amount
+        let minutes = value
         if (unit === 'hours') minutes *= 60
         if (unit === 'days') minutes *= 24 * 60
         return minutes
@@ -83,17 +82,16 @@ const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {
       // For After Due: sort in ascending order (closest to due first)
       const aMinutes = getMinutes(a)
       const bMinutes = getMinutes(b)
-      return a.when === 'before' ? bMinutes - aMinutes : aMinutes - bMinutes
+      return a.type === 'before' ? bMinutes - aMinutes : aMinutes - bMinutes
     })
 
-    // Create index mapping
     const indexMap = {}
     sorted.forEach((item, index) => {
       const originalIdx = notifications.findIndex(
         n =>
-          n.amount === item.amount &&
+          n.value === item.value &&
           n.unit === item.unit &&
-          n.when === item.when,
+          n.type === item.type,
       )
       indexMap[originalIdx] = index + 1
     })
@@ -104,27 +102,25 @@ const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {
   // Sort notifications and update the index mapping
   useEffect(() => {
     updateNotificationIndices()
-    // Clear any errors when notifications change
     setError(null)
   }, [updateNotificationIndices])
 
   // Notify parent component of changes including the template name
   useEffect(() => {
     if (onChange) {
-      onChange({ name: templateName, notifications })
+      onChange({ notifications })
     }
-  }, [templateName, notifications, onChange])
+  }, [notifications, onChange])
 
   // Validates if a notification configuration already exists
   const isDuplicate = (notification, currentIdx = -1) => {
     return notifications.some((n, idx) => {
-      // Skip comparing with itself when editing
       if (idx === currentIdx) return false
 
       return (
-        n.amount === notification.amount &&
+        n.value === notification.value &&
         n.unit === notification.unit &&
-        n.when === notification.when
+        n.type === notification.type
       )
     })
   }
@@ -136,17 +132,17 @@ const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {
     }
 
     // Special handling for "On Due" option
-    if (field === 'when' && value === 'ondue') {
+    if (field === 'type' && value === 'ondue') {
       // Set default values for On Due (not applicable)
       updatedNotification = {
         ...updatedNotification,
-        amount: 0,
+        value: 1,
-        unit: 'minutes', // default unit, not displayed to user
+        unit: 'minutes',
       }
 
       // Check if another notification is already "On Due"
       const existingOnDue = notifications.findIndex(
-        (n, i) => i !== idx && n.when === 'ondue',
+        (n, i) => i !== idx && n.type === 'ondue',
       )
 
       if (existingOnDue !== -1) {
@@ -157,7 +153,6 @@ const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {
       }
     }
 
-    // Check for duplicates when changing a notification
     if (isDuplicate(updatedNotification, idx)) {
       setError(
         'This notification setting already exists. Please use a different timing.',
@@ -172,12 +167,9 @@ const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {
     setError(null)
   }
 
-  const handleNameChange = e => {
-    setTemplateName(e.target.value)
-  }
   const addSmartNotification = type => {
     if (notifications.length >= maxNotifications) return
-
+    setShowSaveDefault(true)
     let newNotification
     let suggestions = []
 
@@ -185,28 +177,28 @@ const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {
       case 'reminder':
         // Suggest common reminder times that don't exist
         suggestions = [
-          { amount: 1, unit: 'hours', when: 'before' },
+          { value: 1, unit: 'hours', type: 'before' },
-          { amount: 1, unit: 'days', when: 'before' },
+          { value: 1, unit: 'days', type: 'before' },
-          { amount: 30, unit: 'minutes', when: 'before' },
+          { value: 30, unit: 'minutes', type: 'before' },
-          { amount: 2, unit: 'hours', when: 'before' },
+          { value: 2, unit: 'hours', type: 'before' },
-          { amount: 3, unit: 'days', when: 'before' },
+          { value: 3, unit: 'days', type: 'before' },
         ]
         break
 
       case 'due':
-        if (notifications.some(n => n.when === 'ondue')) {
+        if (notifications.some(n => n.type === 'ondue')) {
           setError('Only one "Due Alert" notification is allowed.')
           return
         }
-        newNotification = { amount: 0, unit: 'minutes', when: 'ondue' }
+        newNotification = { value: 0, unit: 'minutes', type: 'ondue' }
         break
 
       case 'followup':
         suggestions = [
-          { amount: 1, unit: 'hours', when: 'after' },
+          { value: 1, unit: 'hours', type: 'after' },
-          { amount: 1, unit: 'days', when: 'after' },
+          { value: 1, unit: 'days', type: 'after' },
-          { amount: 3, unit: 'days', when: 'after' },
+          { value: 3, unit: 'days', type: 'after' },
-          { amount: 1, unit: 'weeks', when: 'after' },
+          { value: 1, unit: 'weeks', type: 'after' },
         ]
         break
     }
@@ -226,14 +218,14 @@ const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {
       (a, b) => {
         // Convert everything to minutes for consistent comparison
         const getMinutes = notif => {
-          const { amount, unit, when } = notif
+          const { value, unit, type } = notif
           // On Due is exactly at due date (0 minutes)
-          if (when === 'ondue') return 0
+          if (type === 'ondue') return 0
 
-          let minutes = amount
+          let minutes = value
           if (unit === 'hours') minutes *= 60
           if (unit === 'days') minutes *= 24 * 60
-          return when === 'before' ? -minutes : minutes
+          return type === 'before' ? -minutes : minutes
         }
 
         return getMinutes(a) - getMinutes(b)
@@ -249,20 +241,19 @@ const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {
     setNotifications(updated)
     onChange && onChange(updated)
   }
-  // Visualization: improved timeline with better scaling
   const renderTimeline = () => {
     // Sort notifications chronologically
     const sorted = [...notifications].sort((a, b) => {
       // Convert everything to minutes for consistent comparison
       const getMinutes = notif => {
-        const { amount, unit, when } = notif
+        const { value, unit, type } = notif
         // On Due is exactly at due date (0 minutes)
-        if (when === 'ondue') return 0
+        if (type === 'ondue') return 0
 
-        let minutes = amount
+        let minutes = value
         if (unit === 'hours') minutes *= 60
         if (unit === 'days') minutes *= 24 * 60
-        return when === 'before' ? -minutes : minutes
+        return type === 'before' ? -minutes : minutes
       }
 
       return getMinutes(a) - getMinutes(b)
@@ -274,27 +265,24 @@ const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {
       // Find the original index of this item in notifications array
       const originalIdx = notifications.findIndex(
         n =>
-          n.amount === item.amount &&
+          n.value === item.value &&
           n.unit === item.unit &&
-          n.when === item.when,
+          n.type === item.type,
       )
       notificationIndexMap[originalIdx] = index + 1
     }) // Get min and max notification times for dynamic scaling
     const minutesValues = sorted.map(n => {
-      // On Due is exactly at due date (0 minutes)
+      if (n.type === 'ondue') return 0
-      if (n.when === 'ondue') return 0
 
-      let minutes = n.amount
+      let minutes = n.value
       if (n.unit === 'hours') minutes *= 60
       if (n.unit === 'days') minutes *= 24 * 60
-      return n.when === 'before' ? -minutes : minutes
+      return n.type === 'before' ? -minutes : minutes
     })
 
-    // Find min (before) and max (after) notification times
     const minBefore = Math.min(0, ...minutesValues) // Default to 0 if no "before" notifications
     const maxAfter = Math.max(0, ...minutesValues) // Default to 0 if no "after" notifications
 
-    // Dynamic scaling based on notification range
     const getPositionPercent = minutes => {
       // Due date is always at center (50%)
       if (minutes === 0) return 50
@@ -314,7 +302,7 @@ const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {
 
     return (
       <Box sx={{ mt: 3, mb: 2 }}>
-        <Typography level={'body2'} sx={{ mb: 1, fontWeight: 'md' }}>
+        <Typography level={'body-md'} sx={{ mb: 1 }}>
           Notification Timeline
         </Typography>
         <Box
@@ -322,7 +310,7 @@ const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {
             display: 'flex',
             flexDirection: 'column',
             position: 'relative',
-            height: 100,
+            height: 90,
             bgcolor: 'background.level1',
             borderRadius: 'md',
             p: 2,
@@ -375,11 +363,11 @@ const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {
             {sorted.map((n, i) => {
               // Convert to minutes for consistent scale
               let minutes = 0
-              if (n.when !== 'ondue') {
+              if (n.type !== 'ondue') {
-                minutes = n.amount
+                minutes = n.value
                 if (n.unit === 'hours') minutes *= 60
                 if (n.unit === 'days') minutes *= 24 * 60
-                if (n.when === 'before') minutes = -minutes
+                if (n.type === 'before') minutes = -minutes
               }
               // On Due notifications are always at the due date (0 minutes)
 
@@ -394,9 +382,9 @@ const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {
                     left: `${percent}%`,
                     transform: 'translateX(-50%)',
                     color:
-                      n.when === 'before'
+                      n.type === 'before'
                         ? 'primary.600'
-                        : n.when === 'ondue'
+                        : n.type === 'ondue'
                           ? 'warning.600'
                           : 'success.600',
                     display: 'flex',
@@ -418,11 +406,11 @@ const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {
                     size={'sm'}
                     variant={'solid'}
                     color={
-                      n.when === 'before'
+                      n.type === 'before'
-                        ? 'primary'
+                        ? 'success'
-                        : n.when === 'ondue'
+                        : n.type === 'ondue'
                           ? 'warning'
-                          : 'success'
+                          : 'danger'
                     }
                     sx={{
                       '--Badge-paddingX': '4px',
@@ -452,22 +440,24 @@ const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {
 
   return (
     <Box
-      sx={{
+      sx={
-        border: '1px solid',
+        {
-        borderColor: 'neutral.outlinedBorder',
+          // border: '1px solid',
-        borderRadius: 2,
+          // borderColor: 'neutral.outlinedBorder',
-        p: 3,
+          // borderRadius: 2,
-        maxWidth: 500,
+          // p: 3,
-        bgcolor: 'background.body',
+          // maxWidth: 500,
-        boxShadow: 'sm',
+          // bgcolor: 'background.body',
-      }}
+          // boxShadow: 'sm',
+        }
+      }
     >
-      <Typography level={'h4'} sx={{ mb: 2 }}>
+      {/* <Typography level={'h4'} sx={{ mb: 2 }}>
         Schedule Name
-      </Typography>
+      </Typography> */}
 
       {/* Template Name Field */}
-      <Box sx={{ mb: 3 }}>
+      {/* <Box sx={{ mb: 3 }}>
         <Typography level={'body2'} sx={{ mb: 1, fontWeight: 'md' }}>
           Template Name
         </Typography>
@@ -477,7 +467,7 @@ const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {
           placeholder='Enter template name'
           sx={{ width: '100%' }}
         />
-      </Box>
+      </Box> */}
 
       {error && (
         <Alert
@@ -500,9 +490,9 @@ const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {
               sx={{
                 display: 'flex',
                 alignItems: 'center',
-                justifyContent: 'center',
+                justifyContent: 'start',
-                width: 30,
+                width: 18,
-                mr: 1,
+
                 flexShrink: 0,
               }}
             >
@@ -512,23 +502,23 @@ const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {
                 sx={{
                   '--Badge-minHeight': '20px',
                   '--Badge-fontSize': '0.75rem',
+                  //   centering the badge:
                 }}
                 color={
-                  n.when === 'before'
+                  n.type === 'before'
-                    ? 'primary'
+                    ? 'success'
-                    : n.when === 'ondue'
+                    : n.type === 'ondue'
                       ? 'warning'
-                      : 'success'
+                      : 'danger'
                 }
               >
-                <Box sx={{ width: 4, height: 16 }} />
                 {/* Empty box to attach badge to */}
               </Badge>
             </Box>
             <Select
-              value={n.when}
+              value={n.type}
-              onChange={(_, value) => handleChange(idx, 'when', value)}
+              onChange={(_, value) => handleChange(idx, 'type', value)}
-              sx={{ mr: 1, minWidth: 120 }}
+              sx={{ mr: 1, minWidth: 100 }}
               size={'sm'}
             >
               {beforeAfterOptions.map(opt => (
@@ -541,32 +531,32 @@ const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {
             <Input
               type={'number'}
               min={1}
-              disabled={n.when === 'ondue'}
+              disabled={n.type === 'ondue'}
-              value={n.when === 'ondue' ? '—' : n.amount}
+              value={n.type === 'ondue' ? '—' : n.value}
               onChange={e =>
-                handleChange(idx, 'amount', Math.max(1, Number(e.target.value)))
+                handleChange(idx, 'value', Math.max(1, Number(e.target.value)))
               }
               sx={{
                 width: 70,
                 mr: 1,
-                opacity: n.when === 'ondue' ? 0.6 : 1,
+                opacity: n.type === 'ondue' ? 0.6 : 1,
-                ...(n.when === 'ondue' && {
+                ...(n.type === 'ondue' && {
                   '& input': {
                     textAlign: 'center',
                   },
                 }),
               }}
               size={'sm'}
-              placeholder={n.when === 'ondue' ? '—' : ''}
+              placeholder={n.type === 'ondue' ? '—' : ''}
             />
             <Select
               value={n.unit}
-              disabled={n.when === 'ondue'}
+              disabled={n.type === 'ondue'}
               onChange={(_, value) => handleChange(idx, 'unit', value)}
               sx={{
                 mr: 1,
-                minWidth: 100,
+                minWidth: 80,
-                opacity: n.when === 'ondue' ? 0.6 : 1,
+                opacity: n.type === 'ondue' ? 0.6 : 1,
               }}
               size={'sm'}
             >
@@ -604,7 +594,7 @@ const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {
           onClick={() => addSmartNotification('due')}
           disabled={
             notifications.length >= maxNotifications ||
-            notifications.some(n => n.when === 'ondue')
+            notifications.some(n => n.type === 'ondue')
           }
           startDecorator={<AddIcon />}
           size={'sm'}
@@ -619,12 +609,31 @@ const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {
           startDecorator={<AddIcon />}
           size={'sm'}
           variant={'outlined'}
-          color={'success'}
+          color={'danger'}
         >
           Follow-up
         </Button>
       </Box>
-      {renderTimeline()}
+      {showSaveDefault && (
+        <Button
+          variant='outlined'
+          size='sm'
+          color='neutral'
+          // sx={{ ml: 'auto', mt: 0.5 }}
+          startDecorator={<Save />}
+          onClick={() => {
+            localStorage.setItem(
+              'defaultNotificationTemplate',
+              JSON.stringify(notifications),
+            )
+            setShowSaveDefault(false)
+          }}
+        >
+          Save as Default for Future Tasks
+        </Button>
+      )}
+
+      {showTimeline && renderTimeline()}
     </Box>
   )
 }

src/queries/UserQueries.jsx

@@ -1,5 +1,10 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { GetAllCircleMembers, GetAllUsers } from '../utils/Fetcher'
+import {
+  GetAllCircleMembers,
+  GetAllUsers,
+  GetUserProfile,
+} from '../utils/Fetcher'
+import { isTokenValid } from '../utils/TokenManager'
 
 export const useAllUsers = () => {
   return useQuery({
@@ -22,3 +27,27 @@ export const useCircleMembers = () => {
 
   return { data, error, isLoading, handleRefetch }
 }
+
+export const useUserProfile = () => {
+  const queryClient = useQueryClient()
+
+  const { data, error, isLoading } = useQuery({
+    queryKey: ['userProfile'],
+    queryFn: async () => {
+      const resp = await GetUserProfile()
+      const result = await resp.json()
+      if (!isTokenValid()) {
+        return null // Token is invalid, return null to indicate no profile
+      }
+      return result.res // Return the actual user profile data
+    },
+    staleTime: 30 * 60 * 1000, // 30 minutes in milliseconds
+    gcTime: 30 * 60 * 1000, // 30 minutes in milliseconds
+  })
+  return {
+    data,
+    error,
+    isLoading,
+    refetch: () => queryClient.invalidateQueries(['userProfile']),
+  }
+}

src/utils/TokenManager.jsx

@@ -68,12 +68,16 @@ export async function UploadFile(url, options) {
 export async function Fetch(url, options) {
   if (!isTokenValid()) {
     Cookies.set('ca_redirect', window.location.pathname)
-    window.location.href = '/login'
+    if (!window.location.pathname === '/login') {
+      window.location.href = '/login'
+    }
   }
 
   if (!options) {
     options = {}
   }
+  // clone options to avoid mutation
+  const cacheKey = { ...options }
   options.headers = { ...options.headers, ...HEADERS() }
 
   const baseURL = apiManager.getApiURL()

src/views/Authorization/Authenticating.jsx

@@ -1,16 +1,16 @@
 import { Box, Button, CircularProgress, Container, Typography } from '@mui/joy'
-import { useContext, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import Logo from '../../Logo'
 import { apiManager } from '../../utils/TokenManager'
 
 import Cookies from 'js-cookie'
 import { useRef } from 'react'
 import { Link, useNavigate, useParams } from 'react-router-dom'
-import { UserContext } from '../../contexts/UserContext'
+import { useUserProfile } from '../../queries/UserQueries'
 import { GetUserProfile } from '../../utils/Fetcher'
 
 const AuthenticationLoading = () => {
-  const { userProfile, setUserProfile } = useContext(UserContext)
+  const { data: userProfile, refetch: refetchUserProfile } = useUserProfile()
   const Navigate = useNavigate()
   const hasCalledHandleOAuth2 = useRef(false)
   const [message, setMessage] = useState('Authenticating')
@@ -29,15 +29,16 @@ const AuthenticationLoading = () => {
   const getUserProfileAndNavigateToHome = () => {
     GetUserProfile().then(data => {
       data.json().then(data => {
-        setUserProfile(data.res)
+        refetchUserProfile.then(() => {
-        // check if redirect url is set in cookie:
+          // check if redirect url is set in cookie:
-        const redirectUrl = Cookies.get('ca_redirect')
+          const redirectUrl = Cookies.get('ca_redirect')
-        if (redirectUrl) {
+          if (redirectUrl) {
-          Cookies.remove('ca_redirect')
+            Cookies.remove('ca_redirect')
-          Navigate(redirectUrl)
+            Navigate(redirectUrl)
-        } else {
+          } else {
-          Navigate('/my/chores')
+            Navigate('/my/chores')
-        }
+          }
+        })
       })
     })
   }

src/views/ChoreEdit/RepeatSection.jsx

@@ -17,8 +17,9 @@ import {
   Typography,
 } from '@mui/joy'
 import moment from 'moment'
-import { useContext, useEffect, useState } from 'react'
+import { useEffect } from 'react'
-import { UserContext } from '../../contexts/UserContext'
+
+import { useUserProfile } from '../../queries/UserQueries'
 import { isPlusAccount } from '../../utils/Helpers'
 import ThingTriggerSection from './ThingTriggerSection'
 
@@ -68,7 +69,6 @@ const RepeatOnSections = ({
   frequencyMetadata,
   onFrequencyMetadataUpdate,
 }) => {
-  const [intervalUnit, setIntervalUnit] = useState('days')
   // if time on frequencyMetadata is not set, try to set it to the nextDueDate if available,
   // otherwise set it to 18:00 of the current day
   useEffect(() => {
@@ -117,13 +117,16 @@ const RepeatOnSections = ({
                 onFrequencyUpdate(e.target.value)
               }}
             />
-            <Select placeholder='Unit' value={intervalUnit}>
+            <Select
+              placeholder='Unit'
+              value={frequencyMetadata?.unit || 'days'}
+              sx={{ ml: 1 }}
+            >
               {['hours', 'days', 'weeks', 'months', 'years'].map(item => (
                 <Option
                   key={item}
                   value={item}
                   onClick={() => {
-                    setIntervalUnit(item)
                     onFrequencyMetadataUpdate({
                       ...frequencyMetadata,
                       unit: item,
@@ -337,7 +340,8 @@ const RepeatSection = ({
   isAttemptToSave,
   selectedThing,
 }) => {
-  const { userProfile } = useContext(UserContext)
+  const { data: userProfile } = useUserProfile()
+
   return (
     <Box mt={2}>
       <Typography level='h4'>Repeat :</Typography>

src/views/Chores/ChoreCard.jsx

@@ -22,7 +22,7 @@ import moment from 'moment'
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useImpersonateUser } from '../../contexts/ImpersonateUserContext.jsx'
-import { UserContext } from '../../contexts/UserContext'
+import { useUserProfile } from '../../queries/UserQueries.jsx'
 import { useError } from '../../service/ErrorProvider'
 import { notInCompletionWindow } from '../../utils/Chores.jsx'
 import { getTextColorFromBackgroundColor } from '../../utils/Colors.jsx'
@@ -63,7 +63,8 @@ const ChoreCard = ({
   const [isPendingCompletion, setIsPendingCompletion] = React.useState(false)
   const [secondsLeftToCancel, setSecondsLeftToCancel] = React.useState(null)
   const [timeoutId, setTimeoutId] = React.useState(null)
-  const { userProfile } = React.useContext(UserContext)
+  const { data: userProfile } = useUserProfile()
+
   const { impersonatedUser } = useImpersonateUser()
 
   const { showError } = useError()

src/views/Chores/CompactChoreCard.jsx

@@ -18,7 +18,7 @@ import moment from 'moment'
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useImpersonateUser } from '../../contexts/ImpersonateUserContext.jsx'
-import { UserContext } from '../../contexts/UserContext'
+import { useUserProfile } from '../../queries/UserQueries.jsx'
 import { useError } from '../../service/ErrorProvider'
 import { notInCompletionWindow } from '../../utils/Chores.jsx'
 import { getTextColorFromBackgroundColor } from '../../utils/Colors.jsx'
@@ -60,7 +60,8 @@ const CompactChoreCard = ({
   const [isPendingCompletion, setIsPendingCompletion] = React.useState(false)
   const [secondsLeftToCancel, setSecondsLeftToCancel] = React.useState(null)
   const [timeoutId, setTimeoutId] = React.useState(null)
-  const { userProfile } = React.useContext(UserContext)
+  const { data: userProfile } = useUserProfile()
+
   const { impersonatedUser } = useImpersonateUser()
 
   const { showError } = useError()
@@ -577,10 +578,11 @@ const CompactChoreCard = ({
             onDelete={handleDelete}
             sx={{
               width: 28,
+              marginRight: -3,
               height: 28,
               // opacity: 0.6,
               '&:hover': {
-                opacity: 1,
+                opacity: 0,
               },
             }}
           />

src/views/Chores/MyChores.jsx

@@ -30,9 +30,8 @@ import {
   Typography,
 } from '@mui/joy'
 import Fuse from 'fuse.js'
-import { useContext, useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { UserContext } from '../../contexts/UserContext'
 import { useChores } from '../../queries/ChoreQueries'
 import { GetArchivedChores } from '../../utils/Fetcher'
 import Priorities from '../../utils/Priorities'
@@ -42,7 +41,7 @@ import ChoreCard from './ChoreCard'
 import CompactChoreCard from './CompactChoreCard'
 import IconButtonWithMenu from './IconButtonWithMenu'
 
-import { useCircleMembers } from '../../queries/UserQueries'
+import { useCircleMembers, useUserProfile } from '../../queries/UserQueries'
 import { ChoreFilters, ChoresGrouper, ChoreSorter } from '../../utils/Chores'
 import TaskInput from '../components/AddTaskModal'
 import {
@@ -54,7 +53,8 @@ import Sidepanel from './Sidepanel'
 import SortAndGrouping from './SortAndGrouping'
 
 const MyChores = () => {
-  const { userProfile, setUserProfile } = useContext(UserContext)
+  const { data: userProfile, isLoading: isUserProfileLoading } =
+    useUserProfile()
   const [isSnackbarOpen, setIsSnackbarOpen] = useState(false)
   const [snackBarMessage, setSnackBarMessage] = useState(null)
   const [chores, setChores] = useState([])
@@ -119,7 +119,7 @@ const MyChores = () => {
         scheduleChoreNotification(choresData.res, userProfile, membersData.res)
       }
     }
-  }, [membersLoading, choresLoading, userProfile])
+  }, [membersLoading, choresLoading, isUserProfileLoading])
 
   useEffect(() => {
     document.addEventListener('mousedown', handleMenuOutsideClick)
@@ -352,12 +352,39 @@ const MyChores = () => {
   }
 
   if (
-    userProfile === null ||
+    isUserProfileLoading ||
     userLabelsLoading ||
     performers.length === 0 ||
     choresLoading
   ) {
-    return <LoadingComponent />
+    console.log(
+      'userProfile:',
+      userProfile,
+      'userLabelsLoading:',
+      userLabelsLoading,
+      'performers:',
+      performers.length,
+      'choresLoading:',
+      choresLoading,
+    )
+
+    return (
+      <>
+        <Typography level='title-lg' sx={{ mt: 2, mb: 2 }}>
+          {JSON.stringify(userProfile) === 'null'}
+        </Typography>
+        <Typography level='title-lg' sx={{ mt: 2, mb: 2 }}>
+          {userLabelsLoading}
+        </Typography>
+        <Typography level='title-lg' sx={{ mt: 2, mb: 2 }}>
+          {performers.length === 0}
+        </Typography>
+        <Typography level='title-lg' sx={{ mt: 2, mb: 2 }}>
+          {choresLoading}
+        </Typography>
+        <LoadingComponent />
+      </>
+    )
   }
 
   return (

src/views/Chores/WelcomeCard.jsx

@@ -1,15 +1,15 @@
 import { Person } from '@mui/icons-material'
 import { Avatar, Box, Button, Sheet, Typography } from '@mui/joy'
 
-import { useContext, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useImpersonateUser } from '../../contexts/ImpersonateUserContext'
-import { UserContext } from '../../contexts/UserContext'
+import { useCircleMembers, useUserProfile } from '../../queries/UserQueries'
-import { useCircleMembers } from '../../queries/UserQueries'
 import UserModal from '../Modals/Inputs/UserModal'
 const WelcomeCard = () => {
   const { impersonatedUser, setImpersonatedUser } = useImpersonateUser()
   const [isAdmin, setIsAdmin] = useState(false)
-  const { userProfile } = useContext(UserContext)
+  const { data: userProfile } = useUserProfile()
+
   const [isModalOpen, setIsModalOpen] = useState(false)
 
   const { data: circleMembersData, isLoading: isCircleMembersLoading } =

src/views/Circles/JoinCircle.jsx

@@ -2,12 +2,12 @@ import { Box, Container, Input, Sheet, Typography } from '@mui/joy'
 import Logo from '../../Logo'
 
 import { Button } from '@mui/joy'
-import { useContext } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
-import { UserContext } from '../../contexts/UserContext'
+import { useUserProfile } from '../../queries/UserQueries'
 import { JoinCircle } from '../../utils/Fetcher'
 const JoinCircleView = () => {
-  const { userProfile, setUserProfile } = useContext(UserContext)
+  const { data: userProfile } = useUserProfile()
+
   let [searchParams, setSearchParams] = useSearchParams()
   const navigate = useNavigate()
   const code = searchParams.get('code')

src/views/Settings/APITokenSettings.jsx

@@ -10,8 +10,9 @@ import {
   Typography,
 } from '@mui/joy'
 import moment from 'moment'
-import { useContext, useEffect, useState } from 'react'
+
-import { UserContext } from '../../contexts/UserContext'
+import { useEffect, useState } from 'react'
+import { useUserProfile } from '../../queries/UserQueries'
 import {
   CreateLongLiveToken,
   DeleteLongLiveToken,
@@ -21,10 +22,10 @@ import { isPlusAccount } from '../../utils/Helpers'
 import TextModal from '../Modals/Inputs/TextModal'
 
 const APITokenSettings = () => {
+  const { data: userProfile } = useUserProfile()
   const [tokens, setTokens] = useState([])
   const [isGetTokenNameModalOpen, setIsGetTokenNameModalOpen] = useState(false)
   const [showTokenId, setShowTokenId] = useState(null)
-  const { userProfile } = useContext(UserContext)
   useEffect(() => {
     GetLongLiveTokens().then(resp => {
       resp.json().then(data => {

src/views/Settings/MFASettings.jsx

@@ -468,11 +468,6 @@ const MFASettings = () => {
                 fontSize: '1.2em',
                 letterSpacing: verificationCode.length === 0 ? '' : '0.4em',
               }}
-              onKeyDown={e => {
-                if (e.key === 'Enter' && verificationCode.length === 6) {
-                  handleDisableMFA()
-                }
-              }}
               slotProps={{
                 input: {
                   maxLength: 6,

src/views/Settings/NotificationSetting.jsx

@@ -18,27 +18,18 @@ import {
   Switch,
   Typography,
 } from '@mui/joy'
-import React, { useContext, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
-import { UserContext } from '../../contexts/UserContext'
+
+import { useUserProfile } from '../../queries/UserQueries'
 import {
-  GetUserProfile,
   UpdateNotificationTarget,
   UpdateUserDetails,
 } from '../../utils/Fetcher'
 
 const NotificationSetting = () => {
   const [isSnackbarOpen, setIsSnackbarOpen] = useState(false)
-  const { userProfile, setUserProfile } = useContext(UserContext)
+  const { data: userProfile, refetch: refetchUserProfile } = useUserProfile()
-  useEffect(() => {
+
-    if (!userProfile) {
-      GetUserProfile().then(resp => {
-        resp.json().then(data => {
-          setUserProfile(data.res)
-          setChatID(data.res.chatID)
-        })
-      })
-    }
-  }, [])
   const getNotificationPreferences = async () => {
     const ret = await Preferences.get({ key: 'notificationPreferences' })
     return JSON.parse(ret.value)
@@ -134,13 +125,7 @@ const NotificationSetting = () => {
         return
       }
 
-      setUserProfile({
+      refetchUserProfile()
-        ...userProfile,
-        notification_target: {
-          target: chatID,
-          type: Number(notificationTarget),
-        },
-      })
       alert('Notification target updated')
     })
   }
@@ -339,7 +324,7 @@ const NotificationSetting = () => {
                 chatID: Number(0),
               }).then(resp => {
                 resp.json().then(data => {
-                  setUserProfile(data)
+                  refetchUserProfile()
                 })
               })
             }

src/views/Settings/ProfileSettings.jsx

@@ -11,16 +11,16 @@ import {
 } from '@mui/joy'
 import Modal from '@mui/joy/Modal'
 import ModalDialog from '@mui/joy/ModalDialog'
-import { useContext, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import Cropper from 'react-easy-crop'
-import { UserContext } from '../../contexts/UserContext'
+import { useUserProfile } from '../../queries/UserQueries'
 import { UpdateUserDetails } from '../../utils/Fetcher'
 import { resolvePhotoURL } from '../../utils/Helpers'
 import { getCroppedImg } from '../../utils/imageCropUtils'
 import { UploadFile } from '../../utils/TokenManager'
 
 const ProfileSettings = () => {
-  const { userProfile, setUserProfile } = useContext(UserContext)
+  const { data: userProfile } = useUserProfile()
   const [displayName, setDisplayName] = useState(userProfile?.displayName || '')
   const [timezone, setTimezone] = useState(
     userProfile?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
@@ -75,7 +75,6 @@ const ProfileSettings = () => {
       const url = resolvePhotoURL(data.url || data.sign)
 
       setPhotoURL(url)
-      setUserProfile({ ...userProfile, image: url })
       setSnackbar({
         open: true,
         message: 'Profile photo updated!',
@@ -101,7 +100,6 @@ const ProfileSettings = () => {
       const response = await UpdateUserDetails(userDetails)
 
       if (response.ok) {
-        setUserProfile({ ...userProfile, displayName, timezone })
         setSnackbar({
           open: true,
           message: 'Profile updated successfully!',

src/views/Settings/Settings.jsx

@@ -16,9 +16,9 @@ import {
   Typography,
 } from '@mui/joy'
 import moment from 'moment'
-import { useContext, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
-import { UserContext } from '../../contexts/UserContext'
 import Logo from '../../Logo'
+import { useUserProfile } from '../../queries/UserQueries'
 import {
   AcceptCircleMemberRequest,
   CancelSubscription,
@@ -27,7 +27,6 @@ import {
   GetCircleMemberRequests,
   GetSubscriptionSession,
   GetUserCircle,
-  GetUserProfile,
   JoinCircle,
   LeaveCircle,
   PutWebhookURL,
@@ -44,7 +43,8 @@ import StorageSettings from './StorageSettings'
 import ThemeToggle from './ThemeToggle'
 
 const Settings = () => {
-  const { userProfile, setUserProfile } = useContext(UserContext)
+  const { data: userProfile } = useUserProfile()
+
   const [userCircles, setUserCircles] = useState([])
   const [circleMemberRequests, setCircleMemberRequests] = useState([])
   const [circleInviteCode, setCircleInviteCode] = useState('')
@@ -55,11 +55,6 @@ const Settings = () => {
 
   const [changePasswordModal, setChangePasswordModal] = useState(false)
   useEffect(() => {
-    GetUserProfile().then(resp => {
-      resp.json().then(data => {
-        setUserProfile(data.res)
-      })
-    })
     GetUserCircle().then(resp => {
       resp.json().then(data => {
         setUserCircles(data.res ? data.res : [])

src/views/Settings/StorageSettings.jsx

@@ -7,15 +7,15 @@ import {
   LinearProgress,
   Typography,
 } from '@mui/joy'
-import { useContext, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { UserContext } from '../../contexts/UserContext'
+import { useUserProfile } from '../../queries/UserQueries'
 import { GetStorageUsage } from '../../utils/Fetcher'
 import { isPlusAccount } from '../../utils/Helpers'
 
 const StorageSettings = () => {
   const Navigate = useNavigate()
-  const { userProfile } = useContext(UserContext)
+  const { data: userProfile } = useUserProfile()
   const [usage, setUsage] = useState({ used: 0, total: 0 })
   const [loading, setLoading] = useState(true)
 

src/views/User/UserActivities.jsx

@@ -23,9 +23,9 @@ import {
   Typography,
 } from '@mui/joy'
 import React, { useEffect, useState } from 'react'
-import { UserContext } from '../../contexts/UserContext'
+
 import { useChores, useChoresHistory } from '../../queries/ChoreQueries'
-import { useCircleMembers } from '../../queries/UserQueries.jsx'
+import { useCircleMembers, useUserProfile } from '../../queries/UserQueries.jsx'
 import { ChoresGrouper } from '../../utils/Chores'
 import { TASK_COLOR } from '../../utils/Colors.jsx'
 import { resolvePhotoURL } from '../../utils/Helpers.jsx'
@@ -167,7 +167,8 @@ const USER_FILTER = (history, userId) => {
 }
 
 const UserActivites = () => {
-  const { userProfile } = React.useContext(UserContext)
+  const { data: userProfile } = useUserProfile()
+
   const [tabValue, setTabValue] = React.useState(30)
   const [selectedHistory, setSelectedHistory] = React.useState([])
   const [enrichedHistory, setEnrichedHistory] = React.useState([])

src/views/components/CalendarView.jsx

@@ -1,12 +1,11 @@
 import { CalendarMonth } from '@mui/icons-material'
 import { Avatar, Box, Chip, Grid, Typography } from '@mui/joy'
 import moment from 'moment'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import Calendar from 'react-calendar'
 import 'react-calendar/dist/Calendar.css'
 import { useNavigate } from 'react-router-dom'
-import { UserContext } from '../../contexts/UserContext'
+import { useCircleMembers, useUserProfile } from '../../queries/UserQueries'
-import { useCircleMembers } from '../../queries/UserQueries'
 import { TASK_COLOR } from '../../utils/Colors'
 import './Calendar.css'
 
@@ -17,7 +16,8 @@ const getAssigneeColor = (assignee, userProfile) => {
 }
 
 const CalendarView = ({ chores }) => {
-  const { userProfile } = React.useContext(UserContext)
+  const { data: userProfile } = useUserProfile()
+
   const [selectedDate, setSeletedDate] = useState(null)
   const Navigate = useNavigate()
 

src/views/components/CustomParsers.js

@@ -402,3 +402,80 @@ export const parseAssignees = (inputSentence, users) => {
   }
   return { result: null, cleanedSentence: sentence }
 }
+
+export const parseDueDate = (inputSentence, chrono) => {
+  // Parse the due date using chrono
+  const parsedDueDate = chrono.parse(inputSentence, new Date(), {
+    forwardDate: true,
+  })
+
+  if (!parsedDueDate[0] || parsedDueDate[0].index === -1) {
+    return {
+      result: null,
+      highlight: [],
+      cleanedSentence: inputSentence,
+    }
+  }
+
+  const dueDateMatch = parsedDueDate[0]
+  const dueDateText = dueDateMatch.text
+  const dueDateStartIndex = dueDateMatch.index
+  const dueDateEndIndex = dueDateStartIndex + dueDateText.length
+
+  // Define words that might precede the due date and should be removed
+  const precedingWords = [
+    'starting',
+    'from',
+    'beginning',
+    'begin',
+    'commence',
+    'commencing',
+  ]
+
+  // Look for preceding words before the due date
+  let cleanStartIndex = dueDateStartIndex
+  let highlightStartIndex = dueDateStartIndex
+  let precedingWord = ''
+
+  // Extract text before the due date to check for preceding words
+  const textBeforeDueDate = inputSentence.substring(0, dueDateStartIndex).trim()
+
+  for (const word of precedingWords) {
+    // Check if the text before due date ends with this preceding word
+    const wordPattern = new RegExp(`\\b${word}\\s*$`, 'i')
+    const match = textBeforeDueDate.match(wordPattern)
+
+    if (match) {
+      // Found a preceding word, include it in the text to be removed
+      const matchStart = textBeforeDueDate.length - match[0].length
+      cleanStartIndex = matchStart
+      highlightStartIndex = matchStart
+      precedingWord = match[0].trim()
+      break
+    }
+  }
+
+  // Create the highlight text
+  const fullHighlightText = precedingWord
+    ? `${precedingWord} ${dueDateText}`
+    : dueDateText
+
+  // Create cleaned sentence by removing the full match (preceding word + due date)
+  const textToRemove = inputSentence.substring(cleanStartIndex, dueDateEndIndex)
+  const cleanedSentence = inputSentence
+    .replace(textToRemove, '')
+    .replace(/\s+/g, ' ') // Replace multiple spaces with single space
+    .trim()
+
+  return {
+    result: dueDateMatch.start.date(),
+    highlight: [
+      {
+        text: fullHighlightText,
+        start: highlightStartIndex,
+        end: dueDateEndIndex,
+      },
+    ],
+    cleanedSentence: cleanedSentence,
+  }
+}