Create new useSuggestedFollowsByActorWithDismiss hook (#10048)

src/components/FeedInterstitials.tsx

@@ -12,17 +12,13 @@ import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'
 import {useNavigation} from '@react-navigation/native'
-import {useQueryClient} from '@tanstack/react-query'
 
 import {type NavigationProp} from '#/lib/routes/types'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useGetPopularFeedsQuery} from '#/state/queries/feed'
 import {type FeedDescriptor} from '#/state/queries/post-feed'
 import {useProfilesQuery} from '#/state/queries/profile'
-import {
+import {useSuggestedFollowsByActorWithDismiss} from '#/state/queries/suggested-follows'
-  suggestedFollowsByActorQueryKey,
-  useSuggestedFollowsByActorQuery,
-} from '#/state/queries/suggested-follows'
 import {useSession} from '#/state/session'
 import * as userActionHistory from '#/state/userActionHistory'
 import {type SeenPost} from '#/state/userActionHistory'
@@ -219,43 +215,12 @@ export function SuggestedFollows({feed}: {feed: FeedDescriptor}) {
 }
 
 export function SuggestedFollowsProfile({did}: {did: string}) {
-  const {
+  const {profiles, onDismiss, isLoading, error} =
-    isLoading: isSuggestionsLoading,
+    useSuggestedFollowsByActorWithDismiss({did})
-    data,
-    error,
-  } = useSuggestedFollowsByActorQuery({
-    did,
-  })
-  const queryClient = useQueryClient()
-
-  const onDismiss = useCallback(
-    (dismissedDid: string) => {
-      queryClient.setQueryData(
-        suggestedFollowsByActorQueryKey(did),
-        (previous: typeof data) => {
-          if (!previous) return previous
-          return {
-            ...previous,
-            suggestions: previous.suggestions.filter(
-              s => s.did !== dismissedDid,
-            ),
-          }
-        },
-      )
-    },
-    [did, queryClient],
-  )
-
-  const profiles = useMemo(() => {
-    return (data?.suggestions ?? []).map(profile => ({
-      actor: profile,
-      recId: data?.recId,
-    }))
-  }, [data?.suggestions, data?.recId])
 
   return (
     <ProfileGrid
-      isSuggestionsLoading={isSuggestionsLoading}
+      isSuggestionsLoading={isLoading}
       profiles={profiles}
       error={error}
       viewContext="profile"

src/screens/Profile/Header/SuggestedFollows.tsx

@@ -1,14 +1,7 @@
-import {useCallback, useMemo} from 'react'
-import {useQueryClient} from '@tanstack/react-query'
-
 import {AccordionAnimation} from '#/lib/custom-animations/AccordionAnimation'
-import {
+import {useSuggestedFollowsByActorWithDismiss} from '#/state/queries/suggested-follows'
-  suggestedFollowsByActorQueryKey,
-  useSuggestedFollowsByActorQuery,
-} from '#/state/queries/suggested-follows'
 import {ProfileGrid} from '#/components/FeedInterstitials'
 import {IS_ANDROID} from '#/env'
-import type * as bsky from '#/types/bsky'
 
 export function ProfileHeaderSuggestedFollows({
   isExpanded,
@@ -20,7 +13,7 @@ export function ProfileHeaderSuggestedFollows({
   onRequestHide: () => void
 }) {
   const {profiles, onDismiss, isLoading, error} =
-    useProfileHeaderSuggestions(actorDid)
+    useSuggestedFollowsByActorWithDismiss({did: actorDid})
 
   /* NOTE (caidanw):
    * Android does not work well with this feature yet.
@@ -44,42 +37,3 @@ export function ProfileHeaderSuggestedFollows({
     </AccordionAnimation>
   )
 }
-
-function useProfileHeaderSuggestions(actorDid: string) {
-  const {isLoading, data, error} = useSuggestedFollowsByActorQuery({
-    did: actorDid,
-  })
-  const queryClient = useQueryClient()
-
-  const onDismiss = useCallback(
-    (dismissedDid: string) => {
-      queryClient.setQueryData(
-        suggestedFollowsByActorQueryKey(actorDid),
-        (previous: typeof data) => {
-          if (!previous) return previous
-          return {
-            ...previous,
-            suggestions: previous.suggestions.filter(
-              s => s.did !== dismissedDid,
-            ),
-          }
-        },
-      )
-    },
-    [actorDid, queryClient],
-  )
-
-  const profiles = useMemo(() => {
-    return (data?.suggestions ?? []).map(profile => ({
-      actor: profile as bsky.profile.AnyProfileView,
-      recId: data?.recId,
-    }))
-  }, [data?.suggestions, data?.recId])
-
-  return {
-    profiles,
-    onDismiss,
-    isLoading,
-    error,
-  }
-}

src/state/queries/suggested-follows.ts

@@ -1,3 +1,4 @@
+import {useCallback, useMemo} from 'react'
 import {
   type AppBskyActorDefs,
   type AppBskyActorGetSuggestions,
@@ -7,10 +8,12 @@ import {
   type InfiniteData,
   type QueryClient,
   useQuery,
+  useQueryClient,
 } from '@tanstack/react-query'
 
 import {STALE} from '#/state/queries'
 import {useAgent} from '#/state/session'
+import type * as bsky from '#/types/bsky'
 
 const suggestedFollowsQueryKeyRoot = 'suggested-follows'
 
@@ -46,6 +49,55 @@ export function useSuggestedFollowsByActorQuery({
   })
 }
 
+export function useSuggestedFollowsByActorWithDismiss({
+  did,
+  enabled,
+  staleTime,
+}: {
+  did: string
+  enabled?: boolean
+  staleTime?: number
+}) {
+  const {isLoading, data, error} = useSuggestedFollowsByActorQuery({
+    did,
+    enabled,
+    staleTime,
+  })
+  const queryClient = useQueryClient()
+
+  const onDismiss = useCallback(
+    (dismissedDid: string) => {
+      queryClient.setQueryData(
+        suggestedFollowsByActorQueryKey(did),
+        (previous: typeof data) => {
+          if (!previous) return previous
+          return {
+            ...previous,
+            suggestions: previous.suggestions.filter(
+              s => s.did !== dismissedDid,
+            ),
+          }
+        },
+      )
+    },
+    [did, queryClient],
+  )
+
+  const profiles = useMemo(() => {
+    return (data?.suggestions ?? []).map(profile => ({
+      actor: profile as bsky.profile.AnyProfileView,
+      recId: data?.recId,
+    }))
+  }, [data?.suggestions, data?.recId])
+
+  return {
+    profiles,
+    onDismiss,
+    isLoading,
+    error,
+  }
+}
+
 export function* findAllProfilesInQueryData(
   queryClient: QueryClient,
   did: string,