add retries for updating the notifications, to account for latency in creating the notification on the server side

Author: ekraffmiller

src/notifications/domain/hooks/useUnreadCount.ts

@@ -1,39 +1,78 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { needsUpdateStore } from './needsUpdateStore'
 import { NotificationRepository } from '@/notifications/domain/repositories/NotificationRepository'
 import { User } from '@/users/domain/models/User'
 import { useNeedsUpdate } from '@/notifications/domain/hooks/useNeedsUpdate'
 import { getUnreadNotificationsCount } from '@/notifications/domain/useCases/getUnreadNotificationsCount'
 
 const POLLING_INTERVAL = 30000 // 30 seconds
+const INVALIDATION_RETRY_INTERVAL = 1000
+const INVALIDATION_RETRY_ATTEMPTS = 6
 export function useUnreadCount(user: User, notificationRepository: NotificationRepository) {
   const [unreadCount, setUnreadCount] = useState(0)
+  const retryTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const refreshCycleRef = useRef(0)
 
   const needsUpdate = useNeedsUpdate()
-  const fetchUnread = useCallback(async () => {
-    if (user) {
-      const count = await getUnreadNotificationsCount(notificationRepository)
-      setUnreadCount(count)
+
+  const clearRetryTimeout = useCallback(() => {
+    if (retryTimeoutRef.current) {
+      clearTimeout(retryTimeoutRef.current)
+      retryTimeoutRef.current = null
     }
-    needsUpdateStore.setNeedsUpdate(false)
-  }, [user, notificationRepository])
+  }, [])
+
+  const fetchUnread = useCallback(
+    async (refreshCycleId?: number) => {
+      if (user) {
+        const count = await getUnreadNotificationsCount(notificationRepository)
+        if (refreshCycleId === undefined || refreshCycleRef.current === refreshCycleId) {
+          setUnreadCount(count)
+        }
+      }
+    },
+    [user, notificationRepository]
+  )
+
   useEffect(() => {
     if (needsUpdate) {
-      void fetchUnread()
+      const refreshCycleId = refreshCycleRef.current + 1
+      refreshCycleRef.current = refreshCycleId
+      clearRetryTimeout()
+      needsUpdateStore.setNeedsUpdate(false)
+
+      const runRefreshCycle = async (attempt: number) => {
+        await fetchUnread(refreshCycleId)
+
+        if (refreshCycleRef.current !== refreshCycleId) {
+          return
+        }
+
+        if (attempt < INVALIDATION_RETRY_ATTEMPTS - 1) {
+          retryTimeoutRef.current = setTimeout(() => {
+            void runRefreshCycle(attempt + 1)
+          }, INVALIDATION_RETRY_INTERVAL)
+        }
+      }
+
+      void runRefreshCycle(0)
     }
-  }, [needsUpdate, fetchUnread, notificationRepository])
+  }, [needsUpdate, fetchUnread, clearRetryTimeout])
+
   // Polling trigger
   useEffect(() => {
     const interval = setInterval(() => {
       void fetchUnread()
     }, POLLING_INTERVAL)
 
     return () => clearInterval(interval)
-  }, [fetchUnread, notificationRepository])
+  }, [fetchUnread])
 
   useEffect(() => {
     void fetchUnread() // run once when the component mounts
   }, [fetchUnread])
 
+  useEffect(() => clearRetryTimeout, [clearRetryTimeout])
+
   return unreadCount
 }

tests/component/sections/layout/header/LoggedInHeaderActions.spec.tsx

@@ -163,6 +163,36 @@ describe('LoggedInHeaderActions', () => {
     cy.get('[data-testid="unread-notifications-badge"]').should('not.exist')
   })
 
+  it('retries unread notification refresh after an invalidation when the first fetch is stale', () => {
+    const unreadCountStub = cy.stub()
+    unreadCountStub.onFirstCall().resolves(3)
+    unreadCountStub.onSecondCall().resolves(3)
+    unreadCountStub.onThirdCall().resolves(5)
+    notificationRepository.getUnreadNotificationsCount = unreadCountStub
+
+    cy.clock()
+    cy.mountAuthenticated(
+      <LoggedInHeaderActions
+        user={testUser}
+        collectionRepository={collectionRepository}
+        notificationRepository={notificationRepository}
+      />
+    )
+
+    cy.get('[data-testid="unread-notifications-badge"]').should('exist').and('contain', '3')
+    cy.then(() => {
+      needsUpdateStore.setNeedsUpdate(true)
+    })
+
+    cy.wrap(unreadCountStub).should('have.been.calledTwice')
+    cy.get('[data-testid="unread-notifications-badge"]').should('exist').and('contain', '3')
+
+    cy.tick(1_000)
+
+    cy.wrap(unreadCountStub).should('have.been.calledThrice')
+    cy.get('[data-testid="unread-notifications-badge"]').should('exist').and('contain', '5')
+  })
+
   it('calls the logout function when clicking the logout button', () => {
     collectionRepository.getUserPermissions = cy.stub().resolves(userPermissionsMock)
     collectionRepository.getById = cy.stub().resolves(CollectionMother.create())