[🐴] 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/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)
     },
   })
 }