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
2025-06-08 02:09:23 -04:00
parent 10f646f125
commit e21e71b442
20 changed files with 353 additions and 239 deletions
--- a/src/App.jsx
+++ b/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, isTokenValid } from './utils/TokenManager'
+import { apiManager } 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 />
-              <Outlet />
-            </UserContext.Provider>
+            <NavBar />
+            <Outlet />
          </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
--- a/src/components/NotificationTemplate.jsx
+++ b/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
-
-  // For "On Due" notification
-  if (when === 'ondue') {
+  const { value, unit, type } = notification
+  if (type === 'ondue') {
    return 'On due date'
  }
-
-  // For before/after notifications
-  return `${amount} ${unit} ${when === 'before' ? 'before' : 'after'} due`
+  return `${value} ${unit} ${type === '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([
-    value?.notifications || {
-      amount: 0,
-      when: 'ondue',
-    },
-  ])
-  const [error, setError] = useState(null)
+  const [notifications, setNotifications] = useState(
+    value?.templates ||
+      JSON.parse(localStorage.getItem('defaultNotificationTemplate')) ||
+      [],
+  )

+  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) {
-        // Before Due always comes first
-        if (a.when === 'before') return -1
-        if (b.when === 'before') return 1
+      if (a.type !== b.type) {
+        // Before Due  first
+        if (a.type === 'before') return -1
+        if (b.type === 'before') return 1

        // On Due comes before After Due
-        if (a.when === 'ondue') return -1
-        if (b.when === 'ondue') return 1
-
-        // Default case (should not be reached with our options)
+        if (a.type === 'ondue') return -1
+        if (b.type === 'ondue') return 1
+        // DEFAULT CASE ( NOT SURE FOR FUTURE )?
        return 0
      }

-      // Convert everything to minutes for consistent comparison
      const getMinutes = notif => {
-        const { amount, unit } = notif
-        let minutes = amount
+        const { value, unit } = notif
+        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,
-        unit: 'minutes', // default unit, not displayed to user
+        value: 1,
+        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' },
-          { amount: 1, unit: 'days', when: 'before' },
-          { amount: 30, unit: 'minutes', when: 'before' },
-          { amount: 2, unit: 'hours', when: 'before' },
-          { amount: 3, unit: 'days', when: 'before' },
+          { value: 1, unit: 'hours', type: 'before' },
+          { value: 1, unit: 'days', type: 'before' },
+          { value: 30, unit: 'minutes', type: 'before' },
+          { value: 2, unit: 'hours', type: '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' },
-          { amount: 1, unit: 'days', when: 'after' },
-          { amount: 3, unit: 'days', when: 'after' },
-          { amount: 1, unit: 'weeks', when: 'after' },
+          { value: 1, unit: 'hours', type: 'after' },
+          { value: 1, unit: 'days', type: 'after' },
+          { value: 3, unit: 'days', type: '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.when === 'ondue') return 0
+      if (n.type === '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') {
-                minutes = n.amount
+              if (n.type !== 'ondue') {
+                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'
-                        ? 'primary'
-                        : n.when === 'ondue'
+                      n.type === 'before'
+                        ? 'success'
+                        : n.type === 'ondue'
                          ? 'warning'
-                          : 'success'
+                          : 'danger'
                    }
                    sx={{
                      '--Badge-paddingX': '4px',
@@ -452,22 +440,24 @@ const NotificationTemplate = ({ maxNotifications = 5, onChange, value }) => {

  return (
    <Box
-      sx={{
-        border: '1px solid',
-        borderColor: 'neutral.outlinedBorder',
-        borderRadius: 2,
-        p: 3,
-        maxWidth: 500,
-        bgcolor: 'background.body',
-        boxShadow: 'sm',
-      }}
+      sx={
+        {
+          // border: '1px solid',
+          // borderColor: 'neutral.outlinedBorder',
+          // borderRadius: 2,
+          // p: 3,
+          // maxWidth: 500,
+          // 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',
-                width: 30,
-                mr: 1,
+                justifyContent: 'start',
+                width: 18,
+
                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'
-                    ? 'primary'
-                    : n.when === 'ondue'
+                  n.type === 'before'
+                    ? 'success'
+                    : n.type === 'ondue'
                      ? 'warning'
-                      : 'success'
+                      : 'danger'
                }
              >
-                <Box sx={{ width: 4, height: 16 }} />
                {/* Empty box to attach badge to */}
              </Badge>
            </Box>
            <Select
-              value={n.when}
-              onChange={(_, value) => handleChange(idx, 'when', value)}
-              sx={{ mr: 1, minWidth: 120 }}
+              value={n.type}
+              onChange={(_, value) => handleChange(idx, 'type', value)}
+              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'}
-              value={n.when === 'ondue' ? '—' : n.amount}
+              disabled={n.type === 'ondue'}
+              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,
-                ...(n.when === 'ondue' && {
+                opacity: n.type === 'ondue' ? 0.6 : 1,
+                ...(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,
-                opacity: n.when === 'ondue' ? 0.6 : 1,
+                minWidth: 80,
+                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>
  )
 }
--- a/src/queries/UserQueries.jsx
+++ b/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']),
+  }
+}
--- a/src/utils/TokenManager.jsx
+++ b/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()
--- a/src/views/Authorization/Authenticating.jsx
+++ b/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)
-        // check if redirect url is set in cookie:
-        const redirectUrl = Cookies.get('ca_redirect')
-        if (redirectUrl) {
-          Cookies.remove('ca_redirect')
-          Navigate(redirectUrl)
-        } else {
-          Navigate('/my/chores')
-        }
+        refetchUserProfile.then(() => {
+          // check if redirect url is set in cookie:
+          const redirectUrl = Cookies.get('ca_redirect')
+          if (redirectUrl) {
+            Cookies.remove('ca_redirect')
+            Navigate(redirectUrl)
+          } else {
+            Navigate('/my/chores')
+          }
+        })
      })
    })
  }
--- a/src/views/ChoreEdit/RepeatSection.jsx
+++ b/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 { UserContext } from '../../contexts/UserContext'
+import { useEffect } from 'react'
+
+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>
--- a/src/views/Chores/ChoreCard.jsx
+++ b/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()
--- a/src/views/Chores/CompactChoreCard.jsx
+++ b/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,
              },
            }}
          />
--- a/src/views/Chores/MyChores.jsx
+++ b/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 (
--- a/src/views/Chores/WelcomeCard.jsx
+++ b/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 } from '../../queries/UserQueries'
+import { useCircleMembers, useUserProfile } 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 } =
--- a/src/views/Circles/JoinCircle.jsx
+++ b/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')
--- a/src/views/Settings/APITokenSettings.jsx
+++ b/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 => {
--- a/src/views/Settings/MFASettings.jsx
+++ b/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,
--- a/src/views/Settings/NotificationSetting.jsx
+++ b/src/views/Settings/NotificationSetting.jsx
@@ -18,27 +18,18 @@ import {
  Switch,
  Typography,
 } from '@mui/joy'
-import React, { useContext, useEffect, useState } from 'react'
-import { UserContext } from '../../contexts/UserContext'
+import { useEffect, useState } from 'react'
+
+import { useUserProfile } from '../../queries/UserQueries'
 import {
-  GetUserProfile,
  UpdateNotificationTarget,
  UpdateUserDetails,
 } from '../../utils/Fetcher'

 const NotificationSetting = () => {
  const [isSnackbarOpen, setIsSnackbarOpen] = useState(false)
-  const { userProfile, setUserProfile } = useContext(UserContext)
-  useEffect(() => {
-    if (!userProfile) {
-      GetUserProfile().then(resp => {
-        resp.json().then(data => {
-          setUserProfile(data.res)
-          setChatID(data.res.chatID)
-        })
-      })
-    }
-  }, [])
+  const { data: userProfile, refetch: refetchUserProfile } = useUserProfile()
+
  const getNotificationPreferences = async () => {
    const ret = await Preferences.get({ key: 'notificationPreferences' })
    return JSON.parse(ret.value)
@@ -134,13 +125,7 @@ const NotificationSetting = () => {
        return
      }

-      setUserProfile({
-        ...userProfile,
-        notification_target: {
-          target: chatID,
-          type: Number(notificationTarget),
-        },
-      })
+      refetchUserProfile()
      alert('Notification target updated')
    })
  }
@@ -339,7 +324,7 @@ const NotificationSetting = () => {
                chatID: Number(0),
              }).then(resp => {
                resp.json().then(data => {
-                  setUserProfile(data)
+                  refetchUserProfile()
                })
              })
            }
--- a/src/views/Settings/ProfileSettings.jsx
+++ b/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!',
--- a/src/views/Settings/Settings.jsx
+++ b/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 { UserContext } from '../../contexts/UserContext'
+import { useEffect, useState } from 'react'
 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 : [])
--- a/src/views/Settings/StorageSettings.jsx
+++ b/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)

--- a/src/views/User/UserActivities.jsx
+++ b/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([])
--- a/src/views/components/CalendarView.jsx
+++ b/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 } from '../../queries/UserQueries'
+import { useCircleMembers, useUserProfile } 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()

--- a/src/views/components/CustomParsers.js
+++ b/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,
+  }
+}