[Experiment] Suggest profiles in profile (#5030)

* Rename variable to disambiguate with parent scope

* More variables where they are used

* Inline variables

* Add suggestions in profile

* Gate it

* rm space

* Remove header suggestions under gate

src/components/FeedInterstitials.tsx

@@ -1,18 +1,21 @@
 import React from 'react'
 import {View} from 'react-native'
 import {ScrollView} from 'react-native-gesture-handler'
-import {AppBskyFeedDefs, AtUri} from '@atproto/api'
+import {AppBskyActorDefs, AppBskyFeedDefs, AtUri} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {NavigationProp} from '#/lib/routes/types'
+import {useGate} from '#/lib/statsig/statsig'
 import {logEvent} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useGetPopularFeedsQuery} from '#/state/queries/feed'
+import {FeedDescriptor} from '#/state/queries/post-feed'
 import {useProfilesQuery} from '#/state/queries/profile'
+import {useSuggestedFollowsByActorQuery} from '#/state/queries/suggested-follows'
 import {useSession} from '#/state/session'
 import {useProgressGuide} from '#/state/shell/progress-guide'
 import * as userActionHistory from '#/state/userActionHistory'
@@ -173,14 +176,63 @@ function useExperimentalSuggestedUsersQuery() {
   }
 }
 
-export function SuggestedFollows() {
+export function SuggestedFollows({feed}: {feed: FeedDescriptor}) {
-  const t = useTheme()
+  const gate = useGate()
-  const {_} = useLingui()
+  const [feedType, feedUri] = feed.split('|')
+  if (feedType === 'author') {
+    if (gate('show_follow_suggestions_in_profile')) {
+      return <SuggestedFollowsProfile did={feedUri} />
+    } else {
+      return null
+    }
+  } else {
+    return <SuggestedFollowsHome />
+  }
+}
+
+export function SuggestedFollowsProfile({did}: {did: string}) {
+  const {
+    isLoading: isSuggestionsLoading,
+    data,
+    error,
+  } = useSuggestedFollowsByActorQuery({
+    did,
+  })
+  return (
+    <ProfileGrid
+      isSuggestionsLoading={isSuggestionsLoading}
+      profiles={data?.suggestions ?? []}
+      error={error}
+    />
+  )
+}
+
+export function SuggestedFollowsHome() {
   const {
     isLoading: isSuggestionsLoading,
     profiles,
     error,
   } = useExperimentalSuggestedUsersQuery()
+  return (
+    <ProfileGrid
+      isSuggestionsLoading={isSuggestionsLoading}
+      profiles={profiles}
+      error={error}
+    />
+  )
+}
+
+export function ProfileGrid({
+  isSuggestionsLoading,
+  error,
+  profiles,
+}: {
+  isSuggestionsLoading: boolean
+  profiles: AppBskyActorDefs.ProfileViewDetailed[]
+  error: Error | null
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
   const moderationOpts = useModerationOpts()
   const navigation = useNavigation<NavigationProp>()
   const {gtMobile} = useBreakpoints()

src/lib/statsig/gates.ts

@@ -4,5 +4,6 @@ export type Gate =
   | 'fixed_bottom_bar'
   | 'onboarding_minimum_interests'
   | 'suggested_feeds_interstitial'
+  | 'show_follow_suggestions_in_profile'
   | 'video_debug'
   | 'videos'

src/screens/Profile/Header/ProfileHeaderStandard.tsx

@@ -10,6 +10,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useGate} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
 import {isIOS} from '#/platform/detection'
 import {Shadow} from '#/state/cache/types'
@@ -59,6 +60,7 @@ let ProfileHeaderStandard = ({
   const profile: Shadow<AppBskyActorDefs.ProfileViewDetailed> =
     useProfileShadow(profileUnshadowed)
   const t = useTheme()
+  const gate = useGate()
   const {currentAccount, hasSession} = useSession()
   const {_} = useLingui()
   const {openModal} = useModalControls()
@@ -203,27 +205,29 @@ let ProfileHeaderStandard = ({
               {hasSession && (
                 <>
                   <MessageProfileButton profile={profile} />
-                  <Button
+                  {!gate('show_follow_suggestions_in_profile') && (
-                    testID="suggestedFollowsBtn"
+                    <Button
-                    size="small"
+                      testID="suggestedFollowsBtn"
-                    color={showSuggestedFollows ? 'primary' : 'secondary'}
+                      size="small"
-                    variant="solid"
+                      color={showSuggestedFollows ? 'primary' : 'secondary'}
-                    shape="round"
+                      variant="solid"
-                    onPress={() =>
+                      shape="round"
-                      setShowSuggestedFollows(!showSuggestedFollows)
+                      onPress={() =>
-                    }
+                        setShowSuggestedFollows(!showSuggestedFollows)
-                    label={_(msg`Show follows similar to ${profile.handle}`)}
-                    style={{width: 36, height: 36}}>
-                    <FontAwesomeIcon
-                      icon="user-plus"
-                      style={
-                        showSuggestedFollows
-                          ? {color: t.palette.white}
-                          : t.atoms.text
                       }
-                      size={14}
+                      label={_(msg`Show follows similar to ${profile.handle}`)}
-                    />
+                      style={{width: 36, height: 36}}>
-                  </Button>
+                      <FontAwesomeIcon
+                        icon="user-plus"
+                        style={
+                          showSuggestedFollows
+                            ? {color: t.palette.white}
+                            : t.atoms.text
+                        }
+                        size={14}
+                      />
+                    </Button>
+                  )}
                 </>
               )}
 

src/view/com/posts/Feed.tsx

@@ -101,7 +101,7 @@ const feedInterstitialType = 'interstitialFeeds'
 const followInterstitialType = 'interstitialFollows'
 const progressGuideInterstitialType = 'interstitialProgressGuide'
 const interstials: Record<
-  'following' | 'discover',
+  'following' | 'discover' | 'profile',
   (FeedItem & {
     type:
       | 'interstitialFeeds'
@@ -128,6 +128,16 @@ const interstials: Record<
       slot: 20,
     },
   ],
+  profile: [
+    {
+      type: followInterstitialType,
+      params: {
+        variant: 'default',
+      },
+      key: followInterstitialType,
+      slot: 5,
+    },
+  ],
 }
 
 export function getFeedPostSlice(feedItem: FeedItem): FeedPostSlice | null {
@@ -193,9 +203,7 @@ let Feed = ({
   const [isPTRing, setIsPTRing] = React.useState(false)
   const checkForNewRef = React.useRef<(() => void) | null>(null)
   const lastFetchRef = React.useRef<number>(Date.now())
-  const [feedType, feedUri] = feed.split('|')
+  const [feedType, feedUri, feedTab] = feed.split('|')
-  const feedIsDiscover = feedUri === DISCOVER_FEED_URI
-  const feedIsFollowing = feedType === 'following'
   const gate = useGate()
 
   const opts = React.useMemo(
@@ -339,14 +347,21 @@ let Feed = ({
     }
 
     if (hasSession) {
-      const feedType = feedIsFollowing
+      let feedKind: 'following' | 'discover' | 'profile' | undefined
-        ? 'following'
+      if (feedType === 'following') {
-        : feedIsDiscover
+        feedKind = 'following'
-        ? 'discover'
+      } else if (feedUri === DISCOVER_FEED_URI) {
-        : undefined
+        feedKind = 'discover'
+      } else if (
+        feedType === 'author' &&
+        (feedTab === 'posts_and_author_threads' ||
+          feedTab === 'posts_with_replies')
+      ) {
+        feedKind = 'profile'
+      }
 
-      if (feedType) {
+      if (feedKind) {
-        for (const interstitial of interstials[feedType]) {
+        for (const interstitial of interstials[feedKind]) {
           const shouldShow =
             (interstitial.type === feedInterstitialType &&
               gate('suggested_feeds_interstitial')) ||
@@ -377,9 +392,9 @@ let Feed = ({
     isEmpty,
     lastFetchedAt,
     data,
+    feedType,
     feedUri,
-    feedIsDiscover,
+    feedTab,
-    feedIsFollowing,
     gate,
     hasSession,
   ])
@@ -470,7 +485,7 @@ let Feed = ({
       } else if (item.type === feedInterstitialType) {
         return <SuggestedFeeds />
       } else if (item.type === followInterstitialType) {
-        return <SuggestedFollows />
+        return <SuggestedFollows feed={feed} />
       } else if (item.type === progressGuideInterstitialType) {
         return <ProgressGuide />
       } else if (item.type === 'slice') {