Set show_follow_suggestions_in_profile to true (#5205)

src/components/FeedInterstitials.tsx

@@ -8,7 +8,6 @@ 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'
@@ -177,14 +176,9 @@ function useExperimentalSuggestedUsersQuery() {
 }
 
 export function SuggestedFollows({feed}: {feed: FeedDescriptor}) {
-  const gate = useGate()
   const [feedType, feedUri] = feed.split('|')
   if (feedType === 'author') {
-    if (gate('show_follow_suggestions_in_profile')) {
+    return <SuggestedFollowsProfile did={feedUri} />
-      return <SuggestedFollowsProfile did={feedUri} />
-    } else {
-      return null
-    }
   } else {
     return <SuggestedFollowsHome />
   }

src/lib/statsig/gates.ts

@@ -3,7 +3,6 @@ export type Gate =
   | 'debug_show_feedcontext'
   | 'onboarding_minimum_interests'
   | 'suggested_feeds_interstitial'
-  | 'show_follow_suggestions_in_profile'
   | 'video_debug' // not recommended
   | 'video_upload' // upload videos
   | 'video_view_on_posts' // see posted videos

src/screens/Profile/Header/ProfileHeaderStandard.tsx

@@ -6,11 +6,9 @@ import {
   ModerationOpts,
   RichText as RichTextAPI,
 } from '@atproto/api'
-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'
@@ -23,10 +21,9 @@ import {useRequireAuth, useSession} from '#/state/session'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
 import {useProfileShadow} from 'state/cache/profile-shadow'
-import {ProfileHeaderSuggestedFollows} from '#/view/com/profile/ProfileHeaderSuggestedFollows'
 import {ProfileMenu} from '#/view/com/profile/ProfileMenu'
 import * as Toast from '#/view/com/util/Toast'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {MessageProfileButton} from '#/components/dms/MessageProfileButton'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
@@ -59,8 +56,6 @@ let ProfileHeaderStandard = ({
 }: Props): React.ReactNode => {
   const profile: Shadow<AppBskyActorDefs.ProfileViewDetailed> =
     useProfileShadow(profileUnshadowed)
-  const t = useTheme()
-  const gate = useGate()
   const {currentAccount, hasSession} = useSession()
   const {_} = useLingui()
   const {openModal} = useModalControls()
@@ -69,7 +64,6 @@ let ProfileHeaderStandard = ({
     () => moderateProfile(profile, moderationOpts),
     [profile, moderationOpts],
   )
-  const [showSuggestedFollows, setShowSuggestedFollows] = React.useState(false)
   const [queueFollow, queueUnfollow] = useProfileFollowMutationQueue(
     profile,
     'ProfileHeader',
@@ -202,34 +196,7 @@ let ProfileHeaderStandard = ({
             )
           ) : !profile.viewer?.blockedBy ? (
             <>
-              {hasSession && (
+              {hasSession && <MessageProfileButton profile={profile} />}
-                <>
-                  <MessageProfileButton profile={profile} />
-                  {!gate('show_follow_suggestions_in_profile') && (
-                    <Button
-                      testID="suggestedFollowsBtn"
-                      size="small"
-                      color={showSuggestedFollows ? 'primary' : 'secondary'}
-                      variant="solid"
-                      shape="round"
-                      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}
-                      />
-                    </Button>
-                  )}
-                </>
-              )}
 
               <Button
                 testID={profile.viewer?.following ? 'unfollowBtn' : 'followBtn'}
@@ -294,19 +261,6 @@ let ProfileHeaderStandard = ({
           </>
         )}
       </View>
-      {showSuggestedFollows && (
-        <ProfileHeaderSuggestedFollows
-          actorDid={profile.did}
-          requestDismiss={() => {
-            if (showSuggestedFollows) {
-              setShowSuggestedFollows(false)
-            } else {
-              track('ProfileHeader:SuggestedFollowsOpened')
-              setShowSuggestedFollows(true)
-            }
-          }}
-        />
-      )}
       <Prompt.Basic
         control={unblockPromptControl}
         title={_(msg`Unblock Account?`)}

src/view/com/profile/ProfileHeaderSuggestedFollows.tsx

@@ -1,190 +0,0 @@
-import React from 'react'
-import {ScrollView, View} from 'react-native'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {logEvent} from '#/lib/statsig/statsig'
-import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {useSuggestedFollowsByActorQuery} from '#/state/queries/suggested-follows'
-import {isWeb} from 'platform/detection'
-import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
-import {Button, ButtonIcon} from '#/components/Button'
-import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
-import * as ProfileCard from '#/components/ProfileCard'
-import {Text} from '#/components/Typography'
-
-const OUTER_PADDING = a.p_md.padding
-const INNER_PADDING = a.p_lg.padding
-const TOTAL_HEIGHT = 232
-const MOBILE_CARD_WIDTH = 300
-
-function CardOuter({
-  children,
-  style,
-}: {children: React.ReactNode | React.ReactNode[]} & ViewStyleProp) {
-  const t = useTheme()
-  return (
-    <View
-      style={[
-        a.w_full,
-        a.p_lg,
-        a.rounded_md,
-        a.border,
-        t.atoms.bg,
-        t.atoms.border_contrast_low,
-        {
-          width: MOBILE_CARD_WIDTH,
-        },
-        style,
-      ]}>
-      {children}
-    </View>
-  )
-}
-
-export function SuggestedFollowPlaceholder() {
-  const t = useTheme()
-  return (
-    <CardOuter style={[a.gap_sm, t.atoms.border_contrast_low]}>
-      <ProfileCard.Header>
-        <ProfileCard.AvatarPlaceholder />
-        <ProfileCard.NameAndHandlePlaceholder />
-      </ProfileCard.Header>
-
-      <ProfileCard.DescriptionPlaceholder />
-    </CardOuter>
-  )
-}
-
-export function ProfileHeaderSuggestedFollows({
-  actorDid,
-  requestDismiss,
-}: {
-  actorDid: string
-  requestDismiss: () => void
-}) {
-  const t = useTheme()
-  const {_} = useLingui()
-  const {isLoading: isSuggestionsLoading, data} =
-    useSuggestedFollowsByActorQuery({
-      did: actorDid,
-    })
-  const moderationOpts = useModerationOpts()
-  const isLoading = isSuggestionsLoading || !moderationOpts
-
-  return (
-    <View
-      style={{paddingVertical: OUTER_PADDING, height: TOTAL_HEIGHT}}
-      pointerEvents="box-none">
-      <View
-        pointerEvents="box-none"
-        style={[
-          t.atoms.bg_contrast_25,
-          {
-            height: '100%',
-            paddingTop: INNER_PADDING / 2,
-          },
-        ]}>
-        <View
-          pointerEvents="box-none"
-          style={[
-            a.flex_row,
-            a.justify_between,
-            a.align_center,
-            a.pt_xs,
-            {
-              paddingBottom: INNER_PADDING / 2,
-              paddingLeft: INNER_PADDING,
-              paddingRight: INNER_PADDING / 2,
-            },
-          ]}>
-          <Text style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}>
-            <Trans>Similar accounts</Trans>
-          </Text>
-
-          <Button
-            onPress={requestDismiss}
-            hitSlop={10}
-            label={_(msg`Dismiss`)}
-            size="xsmall"
-            variant="ghost"
-            color="secondary"
-            shape="round">
-            <ButtonIcon icon={X} size="sm" />
-          </Button>
-        </View>
-
-        <ScrollView
-          horizontal={true}
-          showsHorizontalScrollIndicator={isWeb}
-          persistentScrollbar={true}
-          scrollIndicatorInsets={{bottom: 0}}
-          snapToInterval={MOBILE_CARD_WIDTH + a.gap_sm.gap}
-          decelerationRate="fast">
-          <View
-            style={[
-              a.flex_row,
-              a.gap_sm,
-              {
-                paddingHorizontal: INNER_PADDING,
-                paddingBottom: INNER_PADDING,
-              },
-            ]}>
-            {isLoading ? (
-              <>
-                <SuggestedFollowPlaceholder />
-                <SuggestedFollowPlaceholder />
-                <SuggestedFollowPlaceholder />
-                <SuggestedFollowPlaceholder />
-                <SuggestedFollowPlaceholder />
-              </>
-            ) : data ? (
-              data.suggestions
-                .filter(s => (s.associated?.labeler ? false : true))
-                .map(profile => (
-                  <ProfileCard.Link
-                    key={profile.did}
-                    profile={profile}
-                    onPress={() => {
-                      logEvent('profile:header:suggestedFollowsCard:press', {})
-                    }}
-                    style={[a.flex_1]}>
-                    {({hovered, pressed}) => (
-                      <CardOuter
-                        style={[
-                          a.flex_1,
-                          (hovered || pressed) && t.atoms.border_contrast_high,
-                        ]}>
-                        <ProfileCard.Outer>
-                          <ProfileCard.Header>
-                            <ProfileCard.Avatar
-                              profile={profile}
-                              moderationOpts={moderationOpts}
-                            />
-                            <ProfileCard.NameAndHandle
-                              profile={profile}
-                              moderationOpts={moderationOpts}
-                            />
-                            <ProfileCard.FollowButton
-                              profile={profile}
-                              moderationOpts={moderationOpts}
-                              logContext="ProfileHeaderSuggestedFollows"
-                              color="secondary_inverted"
-                              shape="round"
-                            />
-                          </ProfileCard.Header>
-                          <ProfileCard.Description profile={profile} />
-                        </ProfileCard.Outer>
-                      </CardOuter>
-                    )}
-                  </ProfileCard.Link>
-                ))
-            ) : (
-              <View />
-            )}
-          </View>
-        </ScrollView>
-      </View>
-    </View>
-  )
-}