diff --git a/src/components/ProgressGuide/FollowDialog.tsx b/src/components/ProgressGuide/FollowDialog.tsx index bf567091b3..383b5a1610 100644 --- a/src/components/ProgressGuide/FollowDialog.tsx +++ b/src/components/ProgressGuide/FollowDialog.tsx @@ -32,7 +32,6 @@ import {Button, ButtonIcon, ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' import {useInteractionState} from '#/components/hooks/useInteractionState' import {MagnifyingGlass_Stroke2_Corner0_Rounded as SearchIcon} from '#/components/icons/MagnifyingGlass' -import {PersonGroup_Stroke2_Corner2_Rounded as PersonGroupIcon} from '#/components/icons/Person' import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' import {boostInterests, InterestTabs} from '#/components/InterestTabs' import * as ProfileCard from '#/components/ProfileCard' @@ -77,7 +76,6 @@ export function FollowDialog({guide}: {guide: Follow10ProgressGuide}) { size={gtMobile ? 'small' : 'large'} color="primary" variant="solid"> - Find people to follow diff --git a/src/components/ProgressGuide/List.tsx b/src/components/ProgressGuide/List.tsx index 1750b0ffcf..bb962cfe46 100644 --- a/src/components/ProgressGuide/List.tsx +++ b/src/components/ProgressGuide/List.tsx @@ -2,24 +2,41 @@ import {type StyleProp, View, type ViewStyle} from 'react-native' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useProfileFollowsQuery} from '#/state/queries/profile-follows' +import {useSession} from '#/state/session' import { useProgressGuide, useProgressGuideControls, } from '#/state/shell/progress-guide' +import {UserAvatar} from '#/view/com/util/UserAvatar' import {atoms as a, useTheme} from '#/alf' import {Button, ButtonIcon} from '#/components/Button' +import {Person_Stroke2_Corner2_Rounded as PersonIcon} from '#/components/icons/Person' import {TimesLarge_Stroke2_Corner0_Rounded as Times} from '#/components/icons/Times' import {Text} from '#/components/Typography' import {FollowDialog} from './FollowDialog' import {ProgressGuideTask} from './Task' +const TOTAL_AVATARS = 10 + export function ProgressGuideList({style}: {style?: StyleProp}) { const t = useTheme() const {_} = useLingui() + const {currentAccount} = useSession() const followProgressGuide = useProgressGuide('follow-10') const followAndLikeProgressGuide = useProgressGuide('like-10-and-follow-7') const guide = followProgressGuide || followAndLikeProgressGuide const {endProgressGuide} = useProgressGuideControls() + const {data: follows} = useProfileFollowsQuery(currentAccount?.did, { + limit: TOTAL_AVATARS, + }) + + const actualFollowsCount = follows?.pages?.[0]?.follows?.length ?? 0 + + // Hide if user already follows 10+ people + if (guide?.guide === 'follow-10' && actualFollowsCount >= TOTAL_AVATARS) { + return null + } if (guide) { return ( @@ -36,9 +53,8 @@ export function ProgressGuideList({style}: {style?: StyleProp}) { a.pl_md, ]}> - - Getting Started + + Follow 10 people to get started