Fix stale Notifications after push (#3507)

src/lib/notifications/notifications.ts

@@ -4,6 +4,7 @@ import {QueryClient} from '@tanstack/react-query'
 
 import {logger} from '#/logger'
 import {RQKEY as RQKEY_NOTIFS} from '#/state/queries/notifications/feed'
+import {invalidateCachedUnreadPage} from '#/state/queries/notifications/unread'
 import {truncateAndInvalidate} from '#/state/queries/util'
 import {getAgent, SessionAccount} from '#/state/session'
 import {track} from 'lib/analytics/analytics'
@@ -87,6 +88,7 @@ export function useNotificationsListener(queryClient: QueryClient) {
     // handle notifications that are received, both in the foreground or background
     // NOTE: currently just here for debug logging
     const sub1 = Notifications.addNotificationReceivedListener(event => {
+      invalidateCachedUnreadPage()
       logger.debug(
         'Notifications: received',
         {event},
@@ -131,11 +133,13 @@ export function useNotificationsListener(queryClient: QueryClient) {
           )
           track('Notificatons:OpenApp')
           logEvent('notifications:openApp', {})
+          invalidateCachedUnreadPage()
           truncateAndInvalidate(queryClient, RQKEY_NOTIFS())
           resetToTab('NotificationsTab') // open notifications tab
         }
       },
     )
+
     return () => {
       sub1.remove()
       sub2.remove()

src/state/queries/notifications/unread.tsx

@@ -3,24 +3,28 @@
  */
 
 import React from 'react'
+import {AppState} from 'react-native'
 import * as Notifications from 'expo-notifications'
 import {useQueryClient} from '@tanstack/react-query'
+import EventEmitter from 'eventemitter3'
+
 import BroadcastChannel from '#/lib/broadcast'
-import {useSession, getAgent} from '#/state/session'
-import {useModerationOpts} from '../preferences'
-import {fetchPage} from './util'
-import {CachedFeedPage, FeedPage} from './types'
+import {logger} from '#/logger'
 import {isNative} from '#/platform/detection'
 import {useMutedThreads} from '#/state/muted-threads'
-import {RQKEY as RQKEY_NOTIFS} from './feed'
-import {logger} from '#/logger'
+import {getAgent, useSession} from '#/state/session'
+import {useModerationOpts} from '../preferences'
 import {truncateAndInvalidate} from '../util'
-import {AppState} from 'react-native'
+import {RQKEY as RQKEY_NOTIFS} from './feed'
+import {CachedFeedPage, FeedPage} from './types'
+import {fetchPage} from './util'
 
 const UPDATE_INTERVAL = 30 * 1e3 // 30sec
 
 const broadcast = new BroadcastChannel('NOTIFS_BROADCAST_CHANNEL')
 
+const emitter = new EventEmitter()
+
 type StateContext = string
 
 interface ApiContext {
@@ -56,6 +60,18 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     unreadCount: 0,
   })
 
+  React.useEffect(() => {
+    function markAsUnusable() {
+      if (cacheRef.current) {
+        cacheRef.current.usableInFeed = false
+      }
+    }
+    emitter.addListener('invalidate', markAsUnusable)
+    return () => {
+      emitter.removeListener('invalidate', markAsUnusable)
+    }
+  }, [])
+
   // periodic sync
   React.useEffect(() => {
     if (!hasSession || !checkUnreadRef.current) {
@@ -214,3 +230,7 @@ function countUnread(page: FeedPage) {
   }
   return num
 }
+
+export function invalidateCachedUnreadPage() {
+  emitter.emit('invalidate')
+}