Update Muted and Blocked accounts screens (react-query refactor) (#1892)

* Add my-blocked-accounts and my-muted-accounts queries

* Update ProfileCard to use the profile shadow cache and useModerationOpts

* Update blocked accounts and muted accounts screens

src/state/queries/my-blocked-accounts.ts

@@ -0,0 +1,28 @@
+import {AppBskyGraphGetBlocks} from '@atproto/api'
+import {useInfiniteQuery, InfiniteData, QueryKey} from '@tanstack/react-query'
+import {useSession} from '../session'
+
+export const RQKEY = () => ['my-blocked-accounts']
+type RQPageParam = string | undefined
+
+export function useMyBlockedAccountsQuery() {
+  const {agent} = useSession()
+  return useInfiniteQuery<
+    AppBskyGraphGetBlocks.OutputSchema,
+    Error,
+    InfiniteData<AppBskyGraphGetBlocks.OutputSchema>,
+    QueryKey,
+    RQPageParam
+  >({
+    queryKey: RQKEY(),
+    async queryFn({pageParam}: {pageParam: RQPageParam}) {
+      const res = await agent.app.bsky.graph.getBlocks({
+        limit: 30,
+        cursor: pageParam,
+      })
+      return res.data
+    },
+    initialPageParam: undefined,
+    getNextPageParam: lastPage => lastPage.cursor,
+  })
+}

src/state/queries/my-muted-accounts.ts

@@ -0,0 +1,28 @@
+import {AppBskyGraphGetMutes} from '@atproto/api'
+import {useInfiniteQuery, InfiniteData, QueryKey} from '@tanstack/react-query'
+import {useSession} from '../session'
+
+export const RQKEY = () => ['my-muted-accounts']
+type RQPageParam = string | undefined
+
+export function useMyMutedAccountsQuery() {
+  const {agent} = useSession()
+  return useInfiniteQuery<
+    AppBskyGraphGetMutes.OutputSchema,
+    Error,
+    InfiniteData<AppBskyGraphGetMutes.OutputSchema>,
+    QueryKey,
+    RQPageParam
+  >({
+    queryKey: RQKEY(),
+    async queryFn({pageParam}: {pageParam: RQPageParam}) {
+      const res = await agent.app.bsky.graph.getMutes({
+        limit: 30,
+        cursor: pageParam,
+      })
+      return res.data
+    },
+    initialPageParam: undefined,
+    getNextPageParam: lastPage => lastPage.cursor,
+  })
+}

src/state/queries/profile.ts

@@ -11,6 +11,8 @@ import {useSession} from '../session'
 import {updateProfileShadow} from '../cache/profile-shadow'
 import {uploadBlob} from '#/lib/api'
 import {until} from '#/lib/async/until'
+import {RQKEY as RQKEY_MY_MUTED} from './my-muted-accounts'
+import {RQKEY as RQKEY_MY_BLOCKED} from './my-blocked-accounts'
 
 export const RQKEY = (did: string) => ['profile', did]
 
@@ -147,6 +149,7 @@ export function useProfileUnfollowMutation() {
 
 export function useProfileMuteMutation() {
   const {agent} = useSession()
+  const queryClient = useQueryClient()
   return useMutation<void, Error, {did: string}>({
     mutationFn: async ({did}) => {
       await agent.mute(did)
@@ -157,6 +160,9 @@ export function useProfileMuteMutation() {
         muted: true,
       })
     },
+    onSuccess() {
+      queryClient.invalidateQueries({queryKey: RQKEY_MY_MUTED()})
+    },
     onError(error, variables) {
       // revert the optimistic update
       updateProfileShadow(variables.did, {
@@ -189,6 +195,7 @@ export function useProfileUnmuteMutation() {
 
 export function useProfileBlockMutation() {
   const {agent, currentAccount} = useSession()
+  const queryClient = useQueryClient()
   return useMutation<{uri: string; cid: string}, Error, {did: string}>({
     mutationFn: async ({did}) => {
       if (!currentAccount) {
@@ -210,6 +217,7 @@ export function useProfileBlockMutation() {
       updateProfileShadow(variables.did, {
         blockingUri: data.uri,
       })
+      queryClient.invalidateQueries({queryKey: RQKEY_MY_BLOCKED()})
     },
     onError(error, variables) {
       // revert the optimistic update