Set show_follow_suggestions_in_profile to true (#5205)
parent
7d7431d14e
commit
292117804f
|
@ -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} />
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
return <SuggestedFollowsProfile did={feedUri} />
|
||||
} else {
|
||||
return <SuggestedFollowsHome />
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 && (
|
||||
<>
|
||||
<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>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{hasSession && <MessageProfileButton profile={profile} />}
|
||||
|
||||
<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?`)}
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
Loading…
Reference in New Issue