Improve unread notif tracking (#2056)

src/state/queries/notifications/feed.ts

@@ -29,6 +29,7 @@ import {useUnreadNotificationsApi} from './unread'
 import {fetchPage} from './util'
 import {FeedPage} from './types'
 import {useMutedThreads} from '#/state/muted-threads'
+import {STALE} from '..'
 
 export type {NotificationType, FeedNotification, FeedPage} from './types'
 
@@ -54,23 +55,30 @@ export function useNotificationFeedQuery(opts?: {enabled?: boolean}) {
     QueryKey,
     RQPageParam
   >({
+    staleTime: STALE.INFINITY,
     queryKey: RQKEY(),
     async queryFn({pageParam}: {pageParam: RQPageParam}) {
-      // for the first page, we check the cached page held by the unread-checker first
+      let page
       if (!pageParam) {
-        const cachedPage = unreads.getCachedUnreadPage()
+        // for the first page, we check the cached page held by the unread-checker first
-        if (cachedPage) {
+        page = unreads.getCachedUnreadPage()
-          return cachedPage
       }
-      }
+      if (!page) {
-      // do a normal fetch
+        page = await fetchPage({
-      return fetchPage({
           limit: PAGE_SIZE,
           cursor: pageParam,
           queryClient,
           moderationOpts,
           threadMutes,
         })
+      }
+
+      // if the first page has an unread, mark all read
+      if (!pageParam && page.items[0] && !page.items[0].notification.isRead) {
+        unreads.markAllRead()
+      }
+
+      return page
     },
     initialPageParam: undefined,
     getNextPageParam: lastPage => lastPage.cursor,

src/view/com/notifications/Feed.tsx

@@ -35,7 +35,7 @@ export function Feed({
   const [isPTRing, setIsPTRing] = React.useState(false)
 
   const moderationOpts = useModerationOpts()
-  const {markAllRead, checkUnread} = useUnreadNotificationsApi()
+  const {checkUnread} = useUnreadNotificationsApi()
   const {
     data,
     isFetching,
@@ -47,15 +47,6 @@ export function Feed({
     fetchNextPage,
   } = useNotificationFeedQuery({enabled: !!moderationOpts})
   const isEmpty = !isFetching && !data?.pages[0]?.items.length
-  const firstItem = data?.pages[0]?.items[0]
-
-  // mark all read on fresh data
-  // (this will fire each time firstItem changes)
-  React.useEffect(() => {
-    if (firstItem) {
-      markAllRead()
-    }
-  }, [firstItem, markAllRead])
 
   const items = React.useMemo(() => {
     let arr: any[] = []