[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
zio/stable
dan 2024-08-30 16:54:55 +01:00 committed by GitHub
parent 46b7193a2b
commit dbbbba1d32
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 110 additions and 38 deletions

View File

@ -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() {
const t = useTheme()
const {_} = useLingui()
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
}
} 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()

View File

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

View File

@ -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,6 +205,7 @@ let ProfileHeaderStandard = ({
{hasSession && (
<>
<MessageProfileButton profile={profile} />
{!gate('show_follow_suggestions_in_profile') && (
<Button
testID="suggestedFollowsBtn"
size="small"
@ -224,6 +227,7 @@ let ProfileHeaderStandard = ({
size={14}
/>
</Button>
)}
</>
)}

View File

@ -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 feedIsDiscover = feedUri === DISCOVER_FEED_URI
const feedIsFollowing = feedType === 'following'
const [feedType, feedUri, feedTab] = feed.split('|')
const gate = useGate()
const opts = React.useMemo(
@ -339,14 +347,21 @@ let Feed = ({
}
if (hasSession) {
const feedType = feedIsFollowing
? 'following'
: feedIsDiscover
? 'discover'
: undefined
let feedKind: 'following' | 'discover' | 'profile' | undefined
if (feedType === 'following') {
feedKind = 'following'
} else if (feedUri === DISCOVER_FEED_URI) {
feedKind = 'discover'
} else if (
feedType === 'author' &&
(feedTab === 'posts_and_author_threads' ||
feedTab === 'posts_with_replies')
) {
feedKind = 'profile'
}
if (feedType) {
for (const interstitial of interstials[feedType]) {
if (feedKind) {
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,
feedIsFollowing,
feedTab,
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') {