Sort follows and following behind gate (#11237)

oxlint-suppressions.json

@@ -1736,16 +1736,6 @@
       "count": 9
     }
   },
-  "src/view/com/profile/ProfileFollowers.tsx": {
-    "typescript/no-misused-promises": {
-      "count": 2
-    }
-  },
-  "src/view/com/profile/ProfileFollows.tsx": {
-    "typescript/no-misused-promises": {
-      "count": 2
-    }
-  },
   "src/view/com/util/EmptyState.tsx": {
     "typescript/no-explicit-any": {
       "count": 1

package.json

@@ -96,7 +96,7 @@
     "prettier": "prettier --check ."
   },
   "dependencies": {
-    "@atproto/api": "0.20.31",
+    "@atproto/api": "0.20.32",
     "@atproto/common-web": "0.5.6",
     "@atproto/syntax": "0.7.2",
     "@bitdrift/react-native": "^0.6.8",

pnpm-lock.yaml

@@ -242,8 +242,8 @@ importers:
   .:
     dependencies:
       '@atproto/api':
-        specifier: 0.20.31
+        specifier: 0.20.32
-        version: 0.20.31
+        version: 0.20.32
       '@atproto/common-web':
         specifier: 0.5.6
         version: 0.5.6
@@ -871,8 +871,8 @@ packages:
       graphql:
         optional: true
 
-  '@atproto/api@0.20.31':
+  '@atproto/api@0.20.32':
-    resolution: {integrity: sha512-TovCQLQv5ti1jqh8UH6jJ0EFuWRjGdUtFyFR5xYC/IkIulwHDuyrVaXdCv7VLWiHftp92DevtZnFRm+BZsZZdw==}
+    resolution: {integrity: sha512-P6Lh6+PR+x0/HHdEbmwZ5e2uvrzViEeobHWHoEc7KTaKJ/bQQu39z2wfBrG4dOTEC/OcOhFYhAhepo0VGIOeAQ==}
     engines: {node: '>=22'}
 
   '@atproto/common-web@0.5.6':
@@ -9389,7 +9389,7 @@ snapshots:
 
   '@0no-co/graphql.web@1.2.0': {}
 
-  '@atproto/api@0.20.31':
+  '@atproto/api@0.20.32':
     dependencies:
       '@atproto/common-web': 0.5.6
       '@atproto/lexicon': 0.7.7

src/analytics/features/types.ts

@@ -20,6 +20,7 @@ export enum Features {
   PostThreadKnownLikersFetchEnable = 'post_thread:known_likers:fetch:enable',
   CustomLogoJapanEnable = 'custom_logo:japan:enable',
   SearchStarterPacksV2Enable = 'search_starter_packs_v2:enable',
+  FollowSortEnable = 'follow_sort:enable',
 
   AATest = 'aa-test',
 }

src/analytics/metrics/types.ts

@@ -475,25 +475,30 @@ export type Events = {
   'profile:followers:view': {
     contextProfileDid: string
     isOwnProfile: boolean
+    sort?: 'latest' | 'top'
   }
   'profile:followers:paginate': {
     contextProfileDid: string
     itemCount: number
     page: number
+    sort?: 'latest' | 'top'
   }
   'profile:following:view': {
     contextProfileDid: string
     isOwnProfile: boolean
+    sort?: 'latest' | 'top'
   }
   'profile:following:paginate': {
     contextProfileDid: string
     itemCount: number
     page: number
+    sort?: 'latest' | 'top'
   }
   'profileCard:seen': {
     contextProfileDid?: string
     profileDid: string
     position?: number
+    sort?: 'latest' | 'top'
   }
   'profile:mute': {}
   'profile:unmute': {}

src/components/ProgressGuide/List.tsx

@@ -5,9 +5,7 @@ import {
   View,
   type ViewStyle,
 } from 'react-native'
-import {msg} from '@lingui/core/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
-import {useLingui} from '@lingui/react'
-import {Trans} from '@lingui/react/macro'
 
 import {useProfileFollowsQuery} from '#/state/queries/profile-follows'
 import {useSession} from '#/state/session'
@@ -29,7 +27,7 @@ const TOTAL_AVATARS = 10
 
 export function ProgressGuideList({style}: {style?: StyleProp<ViewStyle>}) {
   const t = useTheme()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const {gtPhone} = useBreakpoints()
   const {rightNavVisible} = useLayoutBreakpoints()
   const {currentAccount} = useSession()
@@ -79,7 +77,7 @@ export function ProgressGuideList({style}: {style?: StyleProp<ViewStyle>}) {
             size="tiny"
             color="secondary"
             shape="round"
-            label={_(msg`Dismiss getting started guide`)}
+            label={l`Dismiss getting started guide`}
             onPress={endProgressGuide}
             style={[a.bg_transparent, {marginTop: -6, marginRight: -6}]}>
             <ButtonIcon icon={Times} size="xs" />
@@ -107,14 +105,14 @@ export function ProgressGuideList({style}: {style?: StyleProp<ViewStyle>}) {
             <ProgressGuideTask
               current={guide.numLikes + 1}
               total={10 + 1}
-              title={_(msg`Like 10 posts`)}
+              title={l`Like 10 posts`}
-              subtitle={_(msg`Teach our algorithm what you like`)}
+              subtitle={l`Teach our algorithm what you like`}
             />
             <ProgressGuideTask
               current={guide.numFollows + 1}
               total={7 + 1}
-              title={_(msg`Follow 7 accounts`)}
+              title={l`Follow 7 accounts`}
-              subtitle={_(msg`Bluesky is better with friends!`)}
+              subtitle={l`Bluesky is better with friends!`}
             />
           </>
         )}

src/state/queries/profile-followers.ts

@@ -10,15 +10,33 @@ import {
 } from '@tanstack/react-query'
 
 import {useAgent} from '#/state/session'
+import {useAnalytics} from '#/analytics'
 
+const DEFAULT_SORT = 'latest'
 const PAGE_SIZE = 30
 type RQPageParam = string | undefined
 
 const RQKEY_ROOT = 'profile-followers'
-export const RQKEY = (did: string) => [RQKEY_ROOT, did]
+export const RQKEY = (did: string, sort: 'latest' | 'top' = DEFAULT_SORT) => [
+  RQKEY_ROOT,
+  did,
+  sort,
+]
 
-export function useProfileFollowersQuery(did: string | undefined) {
+export function useProfileFollowersQuery(
+  did?: string,
+  {
+    sort,
+  }: {
+    sort?: 'latest' | 'top'
+  } = {},
+) {
+  const ax = useAnalytics()
+  const isSortEnabled = ax.features.enabled(ax.features.FollowSortEnable)
   const agent = useAgent()
+
+  const sortParam = isSortEnabled ? sort || DEFAULT_SORT : undefined
+
   return useInfiniteQuery<
     AppBskyGraphGetFollowers.OutputSchema,
     Error,
@@ -26,12 +44,13 @@ export function useProfileFollowersQuery(did: string | undefined) {
     QueryKey,
     RQPageParam
   >({
-    queryKey: RQKEY(did || ''),
+    queryKey: RQKEY(did || '', sortParam),
     async queryFn({pageParam}: {pageParam: RQPageParam}) {
       const res = await agent.app.bsky.graph.getFollowers({
         actor: did || '',
         limit: PAGE_SIZE,
         cursor: pageParam,
+        sort: sortParam,
       })
       return res.data
     },

src/state/queries/profile-follows.ts

@@ -8,25 +8,36 @@ import {
 
 import {STALE} from '#/state/queries'
 import {useAgent} from '#/state/session'
+import {useAnalytics} from '#/analytics'
 
+const DEFAULT_SORT = 'latest'
 const PAGE_SIZE = 30
 type RQPageParam = string | undefined
 
 // TODO refactor invalidate on mutate?
 const RQKEY_ROOT = 'profile-follows'
-export const RQKEY = (did: string) => [RQKEY_ROOT, did]
+export const RQKEY = (did: string, sort: 'latest' | 'top' = DEFAULT_SORT) => [
+  RQKEY_ROOT,
+  did,
+  sort,
+]
 
 export function useProfileFollowsQuery(
   did: string | undefined,
   {
     limit,
+    sort,
   }: {
     limit?: number
-  } = {
+    sort?: 'latest' | 'top'
-    limit: PAGE_SIZE,
+  } = {},
-  },
 ) {
+  const ax = useAnalytics()
+  const isSortEnabled = ax.features.enabled(ax.features.FollowSortEnable)
   const agent = useAgent()
+
+  const sortParam = isSortEnabled ? sort || DEFAULT_SORT : undefined
+
   return useInfiniteQuery<
     AppBskyGraphGetFollows.OutputSchema,
     Error,
@@ -35,12 +46,13 @@ export function useProfileFollowsQuery(
     RQPageParam
   >({
     staleTime: STALE.MINUTES.ONE,
-    queryKey: RQKEY(did || ''),
+    queryKey: RQKEY(did || '', sortParam),
     async queryFn({pageParam}: {pageParam: RQPageParam}) {
       const res = await agent.app.bsky.graph.getFollows({
         actor: did || '',
         limit: limit || PAGE_SIZE,
         cursor: pageParam,
+        sort: sortParam,
       })
       return res.data
     },

src/view/com/profile/ProfileFollowers.tsx

@@ -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/macro'
-import {useLingui} from '@lingui/react'
 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`)
+              ? l`No followers yet`
-              : _(msg`This user doesn't have any followers.`)
+              : 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`),
+            label: l`Go back`,
-            text: _(msg`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}
+          onRefresh={() => void onRefresh()}
-          onEndReached={onEndReached}
+          onEndReached={() => void onEndReached()}
           onEndReachedThreshold={4}
           onItemSeen={onItemSeen}
           ListFooterComponent={

src/view/com/profile/ProfileFollows.tsx

@@ -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/macro'
-import {useLingui} from '@lingui/react'
 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`)
+            ? l`You are not following anyone yet`
-            : _(msg`This user isn't following anyone.`)
+            : 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`),
+          label: l`See suggested accounts`,
-          text: _(msg`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}
+      onRefresh={() => void onRefresh()}
-      onEndReached={onEndReached}
+      onEndReached={() => void onEndReached()}
       onEndReachedThreshold={4}
       onItemSeen={onItemSeen}
       ListHeaderComponent={<FindContactsBannerNUX />}