Sort follows and following behind gate (#11237)

This commit is contained in:
DS Boyce
2026-07-23 09:02:35 -07:00
committed by GitHub
parent 8d64ab9d4b
commit 10b027c35b
10 changed files with 114 additions and 61 deletions
+28 -14
View File
@@ -1,7 +1,6 @@
import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
import {type AppBskyActorDefs as ActorDefs} from '@atproto/api'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {useLingui} from '@lingui/react/macro'
import {useNavigation} from '@react-navigation/native'
import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
@@ -48,18 +47,22 @@ function keyExtractor(item: ActorDefs.ProfileView) {
}
export function ProfileFollowers({name}: {name: string}) {
const {_} = useLingui()
const {t: l} = useLingui()
const ax = useAnalytics()
const navigation = useNavigation<NavigationProp>()
const initialNumToRender = useInitialNumToRender()
const {currentAccount} = useSession()
const isSortEnabled = ax.features.enabled(ax.features.FollowSortEnable)
const [isPTRing, setIsPTRing] = useState(false)
const {
data: resolvedDid,
isLoading: isDidLoading,
error: resolveError,
} = useResolveDidQuery(name)
const isMe = resolvedDid === currentAccount?.did
const sort = isMe ? 'latest' : 'top'
const {
data,
isLoading: isFollowersLoading,
@@ -68,10 +71,11 @@ export function ProfileFollowers({name}: {name: string}) {
fetchNextPage,
error,
refetch,
} = useProfileFollowersQuery(resolvedDid)
} = useProfileFollowersQuery(resolvedDid, {
sort,
})
const isError = !!resolveError || !!error
const isMe = resolvedDid === currentAccount?.did
const followers = useMemo(() => {
if (data?.pages) {
@@ -101,10 +105,18 @@ export function ProfileFollowers({name}: {name: string}) {
contextProfileDid: resolvedDid,
itemCount: followers.length,
page: currentPageCount,
sort: isSortEnabled ? sort : undefined,
})
}
paginationTrackingRef.current.page = currentPageCount
}, [ax, data?.pages?.length, resolvedDid, followers.length])
}, [
ax,
data?.pages?.length,
resolvedDid,
followers.length,
sort,
isSortEnabled,
])
const onRefresh = useCallback(async () => {
setIsPTRing(true)
@@ -137,9 +149,10 @@ export function ProfileFollowers({name}: {name: string}) {
ax.metric('profile:followers:view', {
contextProfileDid: resolvedDid,
isOwnProfile: isMe,
sort: isSortEnabled ? sort : undefined,
})
}
}, [ax, resolvedDid, isMe])
}, [ax, resolvedDid, isMe, sort, isSortEnabled])
// track seen items
const seenItemsRef = useRef<Set<string>>(new Set())
@@ -160,9 +173,10 @@ export function ProfileFollowers({name}: {name: string}) {
profileDid: item.did,
position,
...(resolvedDid !== undefined && {contextProfileDid: resolvedDid}),
sort: isSortEnabled ? sort : undefined,
})
},
[ax, followers, resolvedDid],
[ax, followers, resolvedDid, sort, isSortEnabled],
)
const [followersPromoDismissed, setFollowersPromoDismissed] =
@@ -199,8 +213,8 @@ export function ProfileFollowers({name}: {name: string}) {
emptyType="results"
emptyMessage={
isMe
? _(msg`No followers yet`)
: _(msg`This user doesn't have any followers.`)
? l`No followers yet`
: l`This user doesn't have any followers.`
}
errorMessage={cleanError(resolveError || error)}
onRetry={isError ? refetch : undefined}
@@ -208,8 +222,8 @@ export function ProfileFollowers({name}: {name: string}) {
useEmptyState={true}
emptyStateIcon={PeopleRemoveIcon}
emptyStateButton={{
label: _(msg`Go back`),
text: _(msg`Go back`),
label: l`Go back`,
text: l`Go back`,
color: 'secondary',
size: 'small',
onPress: () => navigation.goBack(),
@@ -221,8 +235,8 @@ export function ProfileFollowers({name}: {name: string}) {
renderItem={renderItemWithContext}
keyExtractor={keyExtractor}
refreshing={isPTRing}
onRefresh={onRefresh}
onEndReached={onEndReached}
onRefresh={() => void onRefresh()}
onEndReached={() => void onEndReached()}
onEndReachedThreshold={4}
onItemSeen={onItemSeen}
ListFooterComponent={
+28 -14
View File
@@ -1,7 +1,6 @@
import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
import {type AppBskyActorDefs as ActorDefs} from '@atproto/api'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {useLingui} from '@lingui/react/macro'
import {useNavigation} from '@react-navigation/native'
import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
@@ -44,12 +43,14 @@ function keyExtractor(item: ActorDefs.ProfileView) {
}
export function ProfileFollows({name}: {name: string}) {
const {_} = useLingui()
const {t: l} = useLingui()
const ax = useAnalytics()
const initialNumToRender = useInitialNumToRender()
const {currentAccount} = useSession()
const navigation = useNavigation<NavigationProp>()
const isSortEnabled = ax.features.enabled(ax.features.FollowSortEnable)
const onPressFindAccounts = useCallback(() => {
if (IS_WEB) {
navigation.navigate('Search', {})
@@ -65,6 +66,8 @@ export function ProfileFollows({name}: {name: string}) {
isLoading: isDidLoading,
error: resolveError,
} = useResolveDidQuery(name)
const isMe = resolvedDid === currentAccount?.did
const sort = isMe ? 'latest' : 'top'
const {
data,
isLoading: isFollowsLoading,
@@ -73,10 +76,11 @@ export function ProfileFollows({name}: {name: string}) {
fetchNextPage,
error,
refetch,
} = useProfileFollowsQuery(resolvedDid)
} = useProfileFollowsQuery(resolvedDid, {
sort,
})
const isError = !!resolveError || !!error
const isMe = resolvedDid === currentAccount?.did
const follows = useMemo(() => {
if (data?.pages) {
@@ -106,10 +110,18 @@ export function ProfileFollows({name}: {name: string}) {
contextProfileDid: resolvedDid,
itemCount: follows.length,
page: currentPageCount,
sort: isSortEnabled ? sort : undefined,
})
}
paginationTrackingRef.current.page = currentPageCount
}, [ax, data?.pages?.length, resolvedDid, follows.length])
}, [
ax,
data?.pages?.length,
resolvedDid,
follows.length,
sort,
isSortEnabled,
])
const onRefresh = useCallback(async () => {
setIsPTRing(true)
@@ -142,9 +154,10 @@ export function ProfileFollows({name}: {name: string}) {
ax.metric('profile:following:view', {
contextProfileDid: resolvedDid,
isOwnProfile: isMe,
sort: isSortEnabled ? sort : undefined,
})
}
}, [ax, resolvedDid, isMe])
}, [ax, resolvedDid, isMe, sort, isSortEnabled])
// track seen items
const seenItemsRef = useRef<Set<string>>(new Set())
@@ -165,9 +178,10 @@ export function ProfileFollows({name}: {name: string}) {
profileDid: item.did,
position,
...(resolvedDid !== undefined && {contextProfileDid: resolvedDid}),
sort: isSortEnabled ? sort : undefined,
})
},
[ax, follows, resolvedDid],
[ax, follows, resolvedDid, sort, isSortEnabled],
)
if (follows.length < 1) {
@@ -178,8 +192,8 @@ export function ProfileFollows({name}: {name: string}) {
emptyType="results"
emptyMessage={
isMe
? _(msg`You are not following anyone yet`)
: _(msg`This user isn't following anyone.`)
? l`You are not following anyone yet`
: l`This user isn't following anyone.`
}
errorMessage={cleanError(resolveError || error)}
onRetry={isError ? refetch : undefined}
@@ -187,8 +201,8 @@ export function ProfileFollows({name}: {name: string}) {
useEmptyState={true}
emptyStateIcon={PeopleRemoveIcon}
emptyStateButton={{
label: _(msg`See suggested accounts`),
text: _(msg`See suggested accounts`),
label: l`See suggested accounts`,
text: l`See suggested accounts`,
onPress: onPressFindAccounts,
size: 'tiny',
color: 'primary',
@@ -203,8 +217,8 @@ export function ProfileFollows({name}: {name: string}) {
renderItem={renderItemWithContext}
keyExtractor={keyExtractor}
refreshing={isPTRing}
onRefresh={onRefresh}
onEndReached={onEndReached}
onRefresh={() => void onRefresh()}
onEndReached={() => void onEndReached()}
onEndReachedThreshold={4}
onItemSeen={onItemSeen}
ListHeaderComponent={<FindContactsBannerNUX />}