[🐴] Mutate data instead of invalidating queries when muting or unmuting (#3946)

* mutate for mutes

* mutate data for mutes

* add initial data, `useConvoQuery` in `ConvoMenu`

* `useInitialData`

* don't use `identifier` for notifications, use `dates` instead

* better implementation

* simplify

* simplify

* fix types

src/state/queries/messages/conversation.ts

@@ -1,4 +1,5 @@
 import {BskyAgent} from '@atproto-labs/api'
+import {ConvoView} from '@atproto-labs/api/dist/client/types/chat/bsky/convo/defs'
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 
 import {useOnMarkAsRead} from '#/state/queries/messages/list-converations'
@@ -9,20 +10,21 @@ import {useHeaders} from './temp-headers'
 const RQKEY_ROOT = 'convo'
 export const RQKEY = (convoId: string) => [RQKEY_ROOT, convoId]
 
-export function useConvoQuery(convoId: string) {
+export function useConvoQuery(convo: ConvoView) {
   const headers = useHeaders()
   const {serviceUrl} = useDmServiceUrlStorage()
 
   return useQuery({
-    queryKey: RQKEY(convoId),
+    queryKey: RQKEY(convo.id),
     queryFn: async () => {
       const agent = new BskyAgent({service: serviceUrl})
       const {data} = await agent.api.chat.bsky.convo.getConvo(
-        {convoId},
+        {convoId: convo.id},
         {headers},
       )
       return data.convo
     },
+    initialData: convo,
   })
 }
 
@@ -37,9 +39,11 @@ export function useMarkAsReadMutation() {
       convoId,
       messageId,
     }: {
-      convoId: string
+      convoId?: string
       messageId?: string
     }) => {
+      if (!convoId) throw new Error('No convoId provided')
+
       const agent = new BskyAgent({service: serviceUrl})
       await agent.api.chat.bsky.convo.updateRead(
         {
@@ -53,6 +57,7 @@ export function useMarkAsReadMutation() {
       )
     },
     onMutate({convoId}) {
+      if (!convoId) throw new Error('No convoId provided')
       optimisticUpdate(convoId)
     },
     onSettled() {

src/state/queries/messages/leave-conversation.ts

@@ -11,7 +11,7 @@ import {RQKEY as CONVO_LIST_KEY} from './list-converations'
 import {useHeaders} from './temp-headers'
 
 export function useLeaveConvo(
-  convoId: string,
+  convoId: string | undefined,
   {
     onSuccess,
     onError,
@@ -26,6 +26,8 @@ export function useLeaveConvo(
 
   return useMutation({
     mutationFn: async () => {
+      if (!convoId) throw new Error('No convoId provided')
+
       const agent = new BskyAgent({service: serviceUrl})
       const {data} = await agent.api.chat.bsky.convo.leaveConvo(
         {convoId},
@@ -41,7 +43,6 @@ export function useLeaveConvo(
           pageParams: Array<string | undefined>
           pages: Array<ChatBskyConvoListConvos.OutputSchema>
         }) => {
-          console.log('old', old)
           if (!old) return old
           return {
             ...old,

src/state/queries/messages/mute-conversation.ts

@@ -1,18 +1,18 @@
 import {
   BskyAgent,
+  ChatBskyConvoDefs,
+  ChatBskyConvoListConvos,
   ChatBskyConvoMuteConvo,
-  ChatBskyConvoUnmuteConvo,
 } from '@atproto-labs/api'
-import {useMutation, useQueryClient} from '@tanstack/react-query'
+import {InfiniteData, useMutation, useQueryClient} from '@tanstack/react-query'
 
-import {logger} from '#/logger'
 import {useDmServiceUrlStorage} from '#/screens/Messages/Temp/useDmServiceUrlStorage'
 import {RQKEY as CONVO_KEY} from './conversation'
 import {RQKEY as CONVO_LIST_KEY} from './list-converations'
 import {useHeaders} from './temp-headers'
 
 export function useMuteConvo(
-  convoId: string,
+  convoId: string | undefined,
   {
     onSuccess,
     onError,
@@ -26,59 +26,58 @@ export function useMuteConvo(
   const {serviceUrl} = useDmServiceUrlStorage()
 
   return useMutation({
-    mutationFn: async () => {
-      const agent = new BskyAgent({service: serviceUrl})
-      const {data} = await agent.api.chat.bsky.convo.muteConvo(
-        {convoId},
-        {headers, encoding: 'application/json'},
-      )
+    mutationFn: async ({mute}: {mute: boolean}) => {
+      if (!convoId) throw new Error('No convoId provided')
 
-      return data
+      const agent = new BskyAgent({service: serviceUrl})
+      if (mute) {
+        const {data} = await agent.api.chat.bsky.convo.muteConvo(
+          {convoId},
+          {headers, encoding: 'application/json'},
+        )
+        return data
+      } else {
+        const {data} = await agent.api.chat.bsky.convo.unmuteConvo(
+          {convoId},
+          {headers, encoding: 'application/json'},
+        )
+        return data
+      }
     },
-    onSuccess: data => {
-      queryClient.invalidateQueries({queryKey: CONVO_LIST_KEY})
-      queryClient.invalidateQueries({queryKey: CONVO_KEY(convoId)})
+    onSuccess: (data, params) => {
+      queryClient.setQueryData<ChatBskyConvoDefs.ConvoView>(
+        CONVO_KEY(data.convo.id),
+        prev => {
+          if (!prev) return
+          return {
+            ...prev,
+            muted: params.mute,
+          }
+        },
+      )
+      queryClient.setQueryData<
+        InfiniteData<ChatBskyConvoListConvos.OutputSchema>
+      >(CONVO_LIST_KEY, prev => {
+        if (!prev?.pages) return
+        return {
+          ...prev,
+          pages: prev.pages.map(page => ({
+            ...page,
+            convos: page.convos.map(convo => {
+              if (convo.id !== data.convo.id) return convo
+              return {
+                ...convo,
+                muted: params.mute,
+              }
+            }),
+          })),
+        }
+      })
+
       onSuccess?.(data)
     },
-    onError: error => {
-      logger.error(error)
-      onError?.(error)
-    },
-  })
-}
-
-export function useUnmuteConvo(
-  convoId: string,
-  {
-    onSuccess,
-    onError,
-  }: {
-    onSuccess?: (data: ChatBskyConvoUnmuteConvo.OutputSchema) => void
-    onError?: (error: Error) => void
-  },
-) {
-  const queryClient = useQueryClient()
-  const headers = useHeaders()
-  const {serviceUrl} = useDmServiceUrlStorage()
-
-  return useMutation({
-    mutationFn: async () => {
-      const agent = new BskyAgent({service: serviceUrl})
-      const {data} = await agent.api.chat.bsky.convo.unmuteConvo(
-        {convoId},
-        {headers, encoding: 'application/json'},
-      )
-
-      return data
-    },
-    onSuccess: data => {
-      queryClient.invalidateQueries({queryKey: CONVO_LIST_KEY})
-      queryClient.invalidateQueries({queryKey: CONVO_KEY(convoId)})
-      onSuccess?.(data)
-    },
-    onError: error => {
-      logger.error(error)
-      onError?.(error)
+    onError: e => {
+      onError?.(e)
     },
   })
 }