From 8d3eba238141557df82070f02251d64affdb7837 Mon Sep 17 00:00:00 2001 From: Spence Pope Date: Tue, 14 Apr 2026 18:50:00 -0400 Subject: [PATCH] [ALG-77] include 'for you' in see more suggested users (#10241) --- src/components/ProgressGuide/FollowDialog.tsx | 47 ++++++++++++------- .../useGetSuggestedUsersForDiscoverQuery.ts | 8 ++-- .../useGetSuggestedUsersForSeeMoreQuery.ts | 14 ++++-- 3 files changed, 45 insertions(+), 24 deletions(-) diff --git a/src/components/ProgressGuide/FollowDialog.tsx b/src/components/ProgressGuide/FollowDialog.tsx index 775eedd769..5c81153a10 100644 --- a/src/components/ProgressGuide/FollowDialog.tsx +++ b/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) - .sort(boostInterests(popularInterests)) - .sort(boostInterests(personalizedInterests)) + const interests = useMemo( + () => [ + FOR_YOU_TAB, + ...Object.keys(rawInterestsDisplayNames) + .sort(boostInterests(popularInterests)) + .sort(boostInterests(personalizedInterests)), + ], + [rawInterestsDisplayNames, personalizedInterests], + ) + const interestsDisplayNames = useMemo( + () => ({ + [FOR_YOU_TAB]: l`For You`, + ...rawInterestsDisplayNames, + }), + [l, rawInterestsDisplayNames], + ) const [selectedInterest, setSelectedInterest] = useState( - () => - lastSelectedInterest || - (personalizedInterests && interests.includes(personalizedInterests[0]) - ? personalizedInterests[0] - : interests[0]), + () => lastSelectedInterest || FOR_YOU_TAB, ) const [searchText, setSearchText] = useState(lastSearchText) const moderationOpts = useModerationOpts() @@ -137,14 +148,15 @@ function DialogInner({guide}: {guide?: Follow10ProgressGuide}) { lastSelectedInterest = selectedInterest }, [searchText, selectedInterest]) - const { - data: suggestions, - isFetching: isFetchingSuggestions, - error: suggestionsError, - } = useGetSuggestedUsersForSeeMoreQuery({ - category: selectedInterest, + const isForYou = selectedInterest === FOR_YOU_TAB + + const seeMoreQuery = useGetSuggestedUsersForSeeMoreQuery({ + category: isForYou ? undefined : 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, }) } } diff --git a/src/state/queries/trending/useGetSuggestedUsersForDiscoverQuery.ts b/src/state/queries/trending/useGetSuggestedUsersForDiscoverQuery.ts index efd02a1dce..74c8886693 100644 --- a/src/state/queries/trending/useGetSuggestedUsersForDiscoverQuery.ts +++ b/src/state/queries/trending/useGetSuggestedUsersForDiscoverQuery.ts @@ -19,9 +19,9 @@ export type QueryProps = { export const getSuggestedUsersForDiscoverQueryKeyRoot = 'unspecced-suggested-users-for-explore' -export const createGetSuggestedUsersForDiscoverQueryKey = ( - props: QueryProps, -) => [getSuggestedUsersForDiscoverQueryKeyRoot, props.limit] +export const createGetSuggestedUsersForDiscoverQueryKey = (props: { + limit?: number +}) => [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) diff --git a/src/state/queries/trending/useGetSuggestedUsersForSeeMoreQuery.ts b/src/state/queries/trending/useGetSuggestedUsersForSeeMoreQuery.ts index eec392d4c9..e816f0cedb 100644 --- a/src/state/queries/trending/useGetSuggestedUsersForSeeMoreQuery.ts +++ b/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 = ( - props: QueryProps, -) => [getSuggestedUsersForSeeMoreQueryKeyRoot, props.category, props.limit] +export const createGetSuggestedUsersForSeeMoreQueryKey = (props: { + category?: string | null + 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)