[ALG-77] include 'for you' in see more suggested users (#10241)

src/components/ProgressGuide/FollowDialog.tsx

@@ -109,21 +109,32 @@ export function FollowDialogWithoutGuide({
 let lastSelectedInterest = ''
 let lastSearchText = ''
 
+const FOR_YOU_TAB = 'all'
+
 function DialogInner({guide}: {guide?: Follow10ProgressGuide}) {
   const {t: l} = useLingui()
   const ax = useAnalytics()
-  const interestsDisplayNames = useInterestsDisplayNames()
+  const rawInterestsDisplayNames = useInterestsDisplayNames()
   const {data: preferences} = usePreferencesQuery()
   const personalizedInterests = preferences?.interests?.tags
-  const interests = Object.keys(interestsDisplayNames)
+  const interests = useMemo(
+    () => [
+      FOR_YOU_TAB,
+      ...Object.keys(rawInterestsDisplayNames)
         .sort(boostInterests(popularInterests))
-    .sort(boostInterests(personalizedInterests))
+        .sort(boostInterests(personalizedInterests)),
+    ],
+    [rawInterestsDisplayNames, personalizedInterests],
+  )
+  const interestsDisplayNames = useMemo(
+    () => ({
+      [FOR_YOU_TAB]: l`For You`,
+      ...rawInterestsDisplayNames,
+    }),
+    [l, rawInterestsDisplayNames],
+  )
   const [selectedInterest, setSelectedInterest] = useState(
-    () =>
+    () => lastSelectedInterest || FOR_YOU_TAB,
-      lastSelectedInterest ||
-      (personalizedInterests && interests.includes(personalizedInterests[0])
-        ? personalizedInterests[0]
-        : interests[0]),
   )
   const [searchText, setSearchText] = useState(lastSearchText)
   const moderationOpts = useModerationOpts()
@@ -137,14 +148,15 @@ function DialogInner({guide}: {guide?: Follow10ProgressGuide}) {
     lastSelectedInterest = selectedInterest
   }, [searchText, selectedInterest])
 
-  const {
+  const isForYou = selectedInterest === FOR_YOU_TAB
-    data: suggestions,
+
-    isFetching: isFetchingSuggestions,
+  const seeMoreQuery = useGetSuggestedUsersForSeeMoreQuery({
-    error: suggestionsError,
+    category: isForYou ? undefined : selectedInterest,
-  } = useGetSuggestedUsersForSeeMoreQuery({
-    category: selectedInterest,
     limit: 50,
   })
+  const suggestions = seeMoreQuery.data
+  const isFetchingSuggestions = seeMoreQuery.isFetching
+  const suggestionsError = seeMoreQuery.error
   const {
     data: searchResults,
     isFetching: isFetchingSearchResults,
@@ -277,7 +289,10 @@ function DialogInner({guide}: {guide?: Follow10ProgressGuide}) {
               recId: recIdForLogging,
               position: position !== -1 ? position : 0,
               suggestedDid: item.profile.did,
-              category: selectedInterestRef.current,
+              category:
+                selectedInterestRef.current === FOR_YOU_TAB
+                  ? null
+                  : selectedInterestRef.current,
             })
           }
         }

src/state/queries/trending/useGetSuggestedUsersForDiscoverQuery.ts

@@ -19,9 +19,9 @@ export type QueryProps = {
 
 export const getSuggestedUsersForDiscoverQueryKeyRoot =
   'unspecced-suggested-users-for-explore'
-export const createGetSuggestedUsersForDiscoverQueryKey = (
+export const createGetSuggestedUsersForDiscoverQueryKey = (props: {
-  props: QueryProps,
+  limit?: number
-) => [getSuggestedUsersForDiscoverQueryKeyRoot, props.limit]
+}) => [getSuggestedUsersForDiscoverQueryKeyRoot, props.limit]
 
 export function useGetSuggestedUsersForDiscoverQuery(props: QueryProps = {}) {
   const agent = useAgent()
@@ -29,7 +29,7 @@ export function useGetSuggestedUsersForDiscoverQuery(props: QueryProps = {}) {
 
   return useQuery({
     staleTime: STALE.MINUTES.THREE,
-    queryKey: createGetSuggestedUsersForDiscoverQueryKey(props),
+    queryKey: createGetSuggestedUsersForDiscoverQueryKey({limit: props.limit}),
     queryFn: async () => {
       const contentLangs = getContentLanguages().join(',')
       const userInterests = aggregateUserInterests(preferences)

src/state/queries/trending/useGetSuggestedUsersForSeeMoreQuery.ts

@@ -16,21 +16,27 @@ import {useAgent} from '#/state/session'
 export type QueryProps = {
   category?: string | null
   limit?: number
+  enabled?: boolean
 }
 
 export const getSuggestedUsersForSeeMoreQueryKeyRoot =
   'unspecced-suggested-users-for-explore'
-export const createGetSuggestedUsersForSeeMoreQueryKey = (
+export const createGetSuggestedUsersForSeeMoreQueryKey = (props: {
-  props: QueryProps,
+  category?: string | null
-) => [getSuggestedUsersForSeeMoreQueryKeyRoot, props.category, props.limit]
+  limit?: number
+}) => [getSuggestedUsersForSeeMoreQueryKeyRoot, props.category, props.limit]
 
 export function useGetSuggestedUsersForSeeMoreQuery(props: QueryProps = {}) {
   const agent = useAgent()
   const {data: preferences} = usePreferencesQuery()
 
   return useQuery({
+    enabled: props.enabled ?? true,
     staleTime: STALE.MINUTES.THREE,
-    queryKey: createGetSuggestedUsersForSeeMoreQueryKey(props),
+    queryKey: createGetSuggestedUsersForSeeMoreQueryKey({
+      category: props.category,
+      limit: props.limit,
+    }),
     queryFn: async () => {
       const contentLangs = getContentLanguages().join(',')
       const userInterests = aggregateUserInterests(preferences)