fixes

client/pages/Admin/WeekStatus/LockWeekButton/useLockWeekButton.ts

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { getFluentIcon } from 'utils/getFluentIcon'
 import { useWeekStatusContext } from '../context'
 import { ILockWeekButtonProps } from './types'
+import { LockedPeriod } from 'types'
 
 /**
  * Component logic hook for the `LockWeekButton` component. Handles
@@ -15,12 +16,14 @@ import { ILockWeekButtonProps } from './types'
 export function useLockWeekButton(props: ILockWeekButtonProps) {
   const { t } = useTranslation()
   const context = useWeekStatusContext()
-  const [lockedPeriod, setLockedPeriod] = useState(null)
+  const [lockedPeriod, setLockedPeriod] = useState<LockedPeriod>(null)
   const [confirmationDialog, getResponse] = useConfirmationDialog()
 
   useEffect(() => {
     setLockedPeriod(
-      context.lockedPeriods?.find(({ periodId }) => periodId === props.period?.id)
+      context.lockedPeriods?.find(
+        ({ periodId }) => periodId === props.period?.id
+      )
     )
   }, [context.lockedPeriods, props.period?.id])
 

client/pages/Admin/WeekStatus/context.ts

@@ -9,7 +9,7 @@ export interface IWeekStatusContext {
 
   /**
    * On lock period handler.
-   * 
+   *
    * @param periodId Period ID
    * @param reason The reason for locking the period
    */

client/pages/Admin/WeekStatus/index.ts

@@ -1,4 +1,4 @@
 export * from './WeekStatus'
 export * from './LockWeekButton'
-export * from './useLockedPeriodsQuery'
+export * from './useLockedPeriods'
 export * from './types'

client/pages/Admin/WeekStatus/useLockedPeriods.ts

@@ -0,0 +1,36 @@
+import { useQuery } from '@apollo/client'
+import { useEffect, useState } from 'react'
+import { LockedPeriod, Subscription } from 'types'
+import lockedPeriodsQuery from './locked-periods.gql'
+
+/**
+ * Hook for managing locked periods.
+ */
+export function useLockedPeriods() {
+  const [lockedPeriods, setLockedPeriods] = useState<LockedPeriod[]>([])
+  const { data, loading } = useQuery<{ subscription: Subscription }>(
+    lockedPeriodsQuery,
+    {
+      fetchPolicy: 'network-only'
+    }
+  )
+
+  useEffect(() => {
+    setLockedPeriods(data?.subscription?.lockedPeriods ?? [])
+  }, [loading])
+
+  return {
+    value: lockedPeriods,
+    add: (periodId: string, reason?: string) =>
+      setLockedPeriods([
+        ...lockedPeriods,
+        { periodId, reason, lockedAt: new Date() }
+      ]),
+    remove: (periodId: string) =>
+      setLockedPeriods(
+        lockedPeriods.filter(({ periodId: id }) => id !== periodId)
+      ),
+    isLocked: (periodId: string) =>
+      lockedPeriods.some(({ periodId: id }) => id === periodId)
+  }
+}

client/pages/Admin/WeekStatus/useWeekStatus.ts

@@ -1,16 +1,19 @@
+import { useMutation } from '@apollo/client'
+import { useAppContext } from 'AppContext'
 import { TabItems } from 'components/Tabs'
 import { ComponentLogicHook, useTimesheetPeriods } from 'hooks'
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import * as s from 'underscore.string'
 import { IWeekStatusContext } from './context'
 import { List } from './List/List'
-import { useLockedPeriodsQuery } from './useLockedPeriodsQuery'
-import { useWeekStatusQuery } from './useWeekStatusQuery'
-import { getPeriodsWithMissingSubmissions, getUsersWithMissingPeriods } from './utils'
-import { useAppContext } from 'AppContext'
 import lockPeriodMutation from './lock-period.gql'
-import { useMutation } from '@apollo/client'
+import { useLockedPeriods } from './useLockedPeriods'
+import { useWeekStatusQuery } from './useWeekStatusQuery'
+import {
+  getPeriodsWithMissingSubmissions,
+  getUsersWithMissingPeriods
+} from './utils'
 
 /**
  * Component logic hook for `<WeekStatus />`
@@ -30,12 +33,7 @@ export const useWeekStatus: ComponentLogicHook<
   const data = useWeekStatusQuery()
   const periods = getPeriodsWithMissingSubmissions(data, datePeriods)
   const users = getUsersWithMissingPeriods(data, datePeriods)
-
-  const [_lockedPeriods] = useLockedPeriodsQuery()
-  const [lockedPeriods, setLockedPeriods] = useState([])
-  useEffect(() => {
-    setLockedPeriods(_lockedPeriods)
-  }, [_lockedPeriods])
+  const lockedPeriods = useLockedPeriods()
 
   const tabs = useMemo<TabItems>(
     () => ({
@@ -50,9 +48,7 @@ export const useWeekStatus: ComponentLogicHook<
           {
             text: t('common.periodName', period),
             description: s.capitalize(period.monthName),
-            iconName: lockedPeriods?.some(
-              ({ periodId }) => periodId === period.id
-            )
+            iconName: lockedPeriods.isLocked(period.id)
               ? 'LockClosed'
               : 'LockOpen'
           },
@@ -66,43 +62,48 @@ export const useWeekStatus: ComponentLogicHook<
 
   /**
    * On lock period handler.
-   * 
+   *
    * @param periodId Period ID
    * @param reason The reason for locking the period
    */
   const onLockPeriod = async (periodId: string, reason?: string) => {
     const period = periods.find((p) => p.id === periodId)
-    const isLocked = lockedPeriods.some(p => p.periodId === periodId)
+    const isLocked = lockedPeriods.isLocked(periodId)
 
     const { data } = await lockPeriod({
       variables: {
         periodId,
-        unlock: isLocked,
+        unlock: lockedPeriods.isLocked(periodId),
         reason
       }
     })
 
     if (!data.result?.success) return
 
-    if(isLocked) {
-      setLockedPeriods(lockedPeriods.filter(({ periodId: pId }) => pId !== periodId))
+    if (isLocked) {
+      lockedPeriods.remove(periodId)
     } else {
-      setLockedPeriods([...lockedPeriods, { periodId, reason, lockedAt: new Date() }])
+      lockedPeriods.add(periodId, reason)
     }
 
     const periodDisplay =
-      period?.weekNumber +
-      (period.monthName ? ` (${period.monthName})` : '')
+      period?.weekNumber + (period.monthName ? ` (${period.monthName})` : '')
     if (isLocked) {
-      displayToast(t('admin.weekStatus.weekUnlocked', { period: periodDisplay }), 'success')
+      displayToast(
+        t('admin.weekStatus.weekUnlocked', { period: periodDisplay }),
+        'success'
+      )
     } else {
-      displayToast(t('admin.weekStatus.weekLocked', { period: periodDisplay }), 'success')
+      displayToast(
+        t('admin.weekStatus.weekLocked', { period: periodDisplay }),
+        'success'
+      )
     }
   }
 
   return {
     tabs,
     defaultSelectedTab: periods[0]?.id,
-    context: { lockedPeriods, onLockPeriod }
+    context: { lockedPeriods: lockedPeriods.value, onLockPeriod }
   }
 }

client/pages/Admin/WeekStatus/utils.ts

@@ -72,4 +72,4 @@ export const getUsersWithMissingPeriods = (
         )
     )
     return missingPeriods.length > 0 && mapUser(user, missingPeriods)
-  })
+  })

client/pages/Timesheet/ActionBar/ConfirmButtons/useConfirmButtons.ts

@@ -6,7 +6,7 @@ import { useMemo } from 'react'
 import { isBrowser } from 'react-device-detect'
 import { useTranslation } from 'react-i18next'
 import { getFluentIcon as icon } from 'utils'
-import { useLockedPeriodsQuery } from '../../../Admin/WeekStatus'
+import { useLockedPeriods } from '../../../Admin/WeekStatus'
 import { useTimesheetContext } from '../../context'
 import { IConfirmButtonsProps } from './types'
 
@@ -21,11 +21,9 @@ import { IConfirmButtonsProps } from './types'
 export function useConfirmButtons(props: IConfirmButtonsProps) {
   const { t } = useTranslation()
   const context = useTimesheetContext()
-  const [lockedPeriods] = useLockedPeriodsQuery()
+  const lockedPeriods = useLockedPeriods()
   const { selectedPeriod, loading, dateRangeType, selectedView } = context.state
-  const isPeriodLocked = lockedPeriods?.some(
-    ({ periodId }) => periodId === selectedPeriod?.id
-  )
+  const isPeriodLocked = lockedPeriods.isLocked(selectedPeriod?.id)
   const isRangeWeek = dateRangeType === DateRangeType.Week
   const isOverview = selectedView?.id === Overview.id
   const isDisabled =