Add mutations, hook up profile shadow to list query, use shadow-aware query for convo (#4024)

src/components/dms/ConvoMenu.tsx

@@ -11,12 +11,14 @@ import {useNavigation} from '@react-navigation/native'
 
 import {NavigationProp} from '#/lib/routes/types'
 import {listUriToHref} from '#/lib/strings/url-helpers'
+import {Shadow} from '#/state/cache/types'
 import {
   useConvoQuery,
   useMarkAsReadMutation,
 } from '#/state/queries/messages/conversation'
 import {useLeaveConvo} from '#/state/queries/messages/leave-conversation'
 import {useMuteConvo} from '#/state/queries/messages/mute-conversation'
+import {useProfileBlockMutationQueue} from '#/state/queries/profile'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
@@ -45,7 +47,7 @@ let ConvoMenu = ({
   moderation,
 }: {
   convo: ChatBskyConvoDefs.ConvoView
-  profile: AppBskyActorDefs.ProfileViewBasic
+  profile: Shadow<AppBskyActorDefs.ProfileViewBasic>
   control?: Menu.MenuControlProps
   currentScreen: 'list' | 'conversation'
   showMarkAsRead?: boolean
@@ -61,7 +63,7 @@ let ConvoMenu = ({
   const blockedByListControl = Prompt.usePromptControl()
   const {mutate: markAsRead} = useMarkAsReadMutation()
   const modui = moderation.ui('profileView')
-  const {listBlocks} = React.useMemo(() => {
+  const {listBlocks, userBlock} = React.useMemo(() => {
     const blocks = modui.alerts.filter(alert => alert.type === 'blocking')
     const listBlocks = blocks.filter(alert => alert.source.type === 'list')
     const userBlock = blocks.find(alert => alert.source.type === 'user')
@@ -70,6 +72,7 @@ let ConvoMenu = ({
       userBlock,
     }
   }, [modui])
+  const isBlocking = !!userBlock || !!listBlocks.length
 
   const {data: convo} = useConvoQuery(initialConvo)
 
@@ -90,12 +93,20 @@ let ConvoMenu = ({
     },
   })
 
+  const [queueBlock, queueUnblock] = useProfileBlockMutationQueue(profile)
+
   const toggleBlock = React.useCallback(() => {
     if (listBlocks.length) {
       blockedByListControl.open()
       return
     }
-  }, [listBlocks, blockedByListControl])
+
+    if (userBlock) {
+      queueUnblock()
+    } else {
+      queueBlock()
+    }
+  }, [userBlock, listBlocks, blockedByListControl, queueBlock, queueUnblock])
 
   const {mutate: leaveConvo} = useLeaveConvo(convo?.id, {
     onSuccess: () => {
@@ -173,15 +184,16 @@ let ConvoMenu = ({
             </Menu.Item>
           </Menu.Group>
           <Menu.Divider />
-          {/* TODO(samuel): implement this */}
           <Menu.Group>
-            <Menu.Item label={_(msg`Block account`)} onPress={toggleBlock}>
+            <Menu.Item
+              label={
+                isBlocking ? _(msg`Unblock account`) : _(msg`Block account`)
+              }
+              onPress={toggleBlock}>
               <Menu.ItemText>
-                <Trans>Block account</Trans>
+                {isBlocking ? _(msg`Unblock account`) : _(msg`Block account`)}
               </Menu.ItemText>
-              <Menu.ItemIcon
-                icon={profile.viewer?.blocking ? PersonCheck : PersonX}
-              />
+              <Menu.ItemIcon icon={isBlocking ? PersonX : PersonCheck} />
             </Menu.Item>
             <Menu.Item
               label={_(msg`Report conversation`)}

src/screens/Messages/Conversation/index.tsx

@@ -15,6 +15,7 @@ import {useGate} from '#/lib/statsig/statsig'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
 import {useCurrentConvoId} from '#/state/messages/current-convo-id'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {useProfileQuery} from '#/state/queries/profile'
 import {BACK_HITSLOP} from 'lib/constants'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
 import {isIOS, isWeb} from 'platform/detection'
@@ -141,7 +142,7 @@ function Inner() {
 }
 
 let Header = ({
-  profile,
+  profile: initialProfile,
 }: {
   profile?: AppBskyActorDefs.ProfileViewBasic
 }): React.ReactNode => {
@@ -150,6 +151,7 @@ let Header = ({
   const {gtTablet} = useBreakpoints()
   const navigation = useNavigation<NavigationProp>()
   const moderationOpts = useModerationOpts()
+  const {data: profile} = useProfileQuery({did: initialProfile?.did})
 
   const onPressBack = useCallback(() => {
     if (isWeb) {

src/state/cache/profile-shadow.ts

@@ -6,6 +6,7 @@ import EventEmitter from 'eventemitter3'
 import {batchedUpdates} from '#/lib/batchedUpdates'
 import {findAllProfilesInQueryData as findAllProfilesInActorSearchQueryData} from '../queries/actor-search'
 import {findAllProfilesInQueryData as findAllProfilesInListMembersQueryData} from '../queries/list-members'
+import {findAllProfilesInQueryData as findAllProfilesInListConvosQueryData} from '../queries/messages/list-converations'
 import {findAllProfilesInQueryData as findAllProfilesInMyBlockedAccountsQueryData} from '../queries/my-blocked-accounts'
 import {findAllProfilesInQueryData as findAllProfilesInMyMutedAccountsQueryData} from '../queries/my-muted-accounts'
 import {findAllProfilesInQueryData as findAllProfilesInPostLikedByQueryData} from '../queries/post-liked-by'
@@ -105,4 +106,5 @@ function* findProfilesInCache(
   yield* findAllProfilesInProfileFollowsQueryData(queryClient, did)
   yield* findAllProfilesInSuggestedFollowsQueryData(queryClient, did)
   yield* findAllProfilesInActorSearchQueryData(queryClient, did)
+  yield* findAllProfilesInListConvosQueryData(queryClient, did)
 }

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

@@ -1,6 +1,11 @@
 import {useCallback, useMemo} from 'react'
 import {ChatBskyConvoDefs, ChatBskyConvoListConvos} from '@atproto/api'
-import {useInfiniteQuery, useQueryClient} from '@tanstack/react-query'
+import {
+  InfiniteData,
+  QueryClient,
+  useInfiniteQuery,
+  useQueryClient,
+} from '@tanstack/react-query'
 
 import {useCurrentConvoId} from '#/state/messages/current-convo-id'
 import {DM_SERVICE_HEADERS} from '#/state/queries/messages/const'
@@ -140,3 +145,29 @@ function optimisticUpdate(
     })),
   }
 }
+
+export function* findAllProfilesInQueryData(
+  queryClient: QueryClient,
+  did: string,
+) {
+  const queryDatas = queryClient.getQueriesData<
+    InfiniteData<ChatBskyConvoListConvos.OutputSchema>
+  >({
+    queryKey: RQKEY,
+  })
+  for (const [_queryKey, queryData] of queryDatas) {
+    if (!queryData?.pages) {
+      continue
+    }
+
+    for (const page of queryData.pages) {
+      for (const convo of page.convos) {
+        for (const member of convo.members) {
+          if (member.did === did) {
+            yield member
+          }
+        }
+      }
+    }
+  }
+}

src/state/queries/profile.ts

@@ -22,7 +22,6 @@ import {useToggleMutationQueue} from '#/lib/hooks/useToggleMutationQueue'
 import {logEvent, LogEvents, toClout} from '#/lib/statsig/statsig'
 import {Shadow} from '#/state/cache/types'
 import {STALE} from '#/state/queries'
-import {RQKEY as ListConvosQueryKey} from '#/state/queries/messages/list-converations'
 import {resetProfilePostsQueries} from '#/state/queries/post-feed'
 import {updateProfileShadow} from '../cache/profile-shadow'
 import {useAgent, useSession} from '../session'
@@ -454,7 +453,6 @@ function useProfileBlockMutation() {
     onSuccess(_, {did}) {
       queryClient.invalidateQueries({queryKey: RQKEY_MY_BLOCKED()})
       resetProfilePostsQueries(queryClient, did, 1000)
-      queryClient.invalidateQueries({queryKey: ListConvosQueryKey})
     },
   })
 }
@@ -476,7 +474,6 @@ function useProfileUnblockMutation() {
     },
     onSuccess(_, {did}) {
       resetProfilePostsQueries(queryClient, did, 1000)
-      queryClient.invalidateQueries({queryKey: ListConvosQueryKey})
     },
   })
 }