Optimistically mark as read

src/state/queries/messages/conversation.ts

@@ -5,7 +5,11 @@ import {STALE} from '#/state/queries'
 import {DM_SERVICE_HEADERS} from '#/state/queries/messages/const'
 import {useOnMarkAsRead} from '#/state/queries/messages/list-converations'
 import {useAgent} from '#/state/session'
-import {RQKEY as LIST_CONVOS_KEY} from './list-converations'
+import {
+  ConvoListQueryData,
+  getConvoFromQueryData,
+  RQKEY as LIST_CONVOS_KEY,
+} from './list-converations'
 
 const RQKEY_ROOT = 'convo'
 export const RQKEY = (convoId: string) => [RQKEY_ROOT, convoId]
@@ -57,8 +61,37 @@ export function useMarkAsReadMutation() {
       if (!convoId) throw new Error('No convoId provided')
       optimisticUpdate(convoId)
     },
-    onSettled() {
-      queryClient.invalidateQueries({queryKey: LIST_CONVOS_KEY})
+    onSettled(_data, _error, {convoId}) {
+      if (!convoId) return
+
+      queryClient.setQueryData(LIST_CONVOS_KEY, (old: ConvoListQueryData) => {
+        if (!old) return old
+
+        const existingConvo = getConvoFromQueryData(convoId, old)
+
+        if (existingConvo) {
+          return {
+            ...old,
+            pages: old.pages.map(page => {
+              return {
+                ...page,
+                convos: page.convos.map(convo => {
+                  if (convo.id === convoId) {
+                    return {
+                      ...convo,
+                      unreadCount: 0,
+                    }
+                  }
+                  return convo
+                }),
+              }
+            }),
+          }
+        } else {
+          // If we somehow marked a convo as read that doesn't exist in the
+          // list, then we don't need to do anything.
+        }
+      })
     },
   })
 }

src/state/queries/messages/list-converations.tsx

@@ -252,7 +252,7 @@ export function useUnreadMessageCount() {
   }, [count])
 }
 
-type ConvoListQueryData = {
+export type ConvoListQueryData = {
   pageParams: Array<string | undefined>
   pages: Array<ChatBskyConvoListConvos.OutputSchema>
 }
@@ -303,7 +303,7 @@ function optimisticDelete(chatId: string, old: ConvoListQueryData) {
   }
 }
 
-function getConvoFromQueryData(chatId: string, old: ConvoListQueryData) {
+export function getConvoFromQueryData(chatId: string, old: ConvoListQueryData) {
   for (const page of old.pages) {
     for (const convo of page.convos) {
       if (convo.id === chatId) {