diff options
| -rw-r--r-- | src/components/FeedInterstitials.tsx | 64 | ||||
| -rw-r--r-- | src/components/ProfileCard.tsx | 39 | ||||
| -rw-r--r-- | src/state/queries/suggested-follows.ts | 7 |
3 files changed, 61 insertions, 49 deletions
diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx index 5031f584e..286ded13e 100644 --- a/src/components/FeedInterstitials.tsx +++ b/src/components/FeedInterstitials.tsx @@ -60,16 +60,13 @@ function CardOuter({ export function SuggestedFollowPlaceholder() { const t = useTheme() return ( - <CardOuter style={[a.gap_sm, t.atoms.border_contrast_low]}> + <CardOuter style={[a.gap_md, t.atoms.border_contrast_low]}> <ProfileCard.Header> <ProfileCard.AvatarPlaceholder /> - </ProfileCard.Header> - - <View style={[a.py_xs]}> <ProfileCard.NameAndHandlePlaceholder /> - </View> + </ProfileCard.Header> - <ProfileCard.DescriptionPlaceholder /> + <ProfileCard.DescriptionPlaceholder numberOfLines={2} /> </CardOuter> ) } @@ -176,9 +173,14 @@ function useExperimentalSuggestedUsersQuery() { } export function SuggestedFollows({feed}: {feed: FeedDescriptor}) { - const [feedType, feedUri] = feed.split('|') + const {currentAccount} = useSession() + const [feedType, feedUriOrDid] = feed.split('|') if (feedType === 'author') { - return <SuggestedFollowsProfile did={feedUri} /> + if (currentAccount?.did === feedUriOrDid) { + return null + } else { + return <SuggestedFollowsProfile did={feedUriOrDid} /> + } } else { return <SuggestedFollowsHome /> } @@ -197,6 +199,7 @@ export function SuggestedFollowsProfile({did}: {did: string}) { isSuggestionsLoading={isSuggestionsLoading} profiles={data?.suggestions ?? []} error={error} + viewContext="profile" /> ) } @@ -212,6 +215,7 @@ export function SuggestedFollowsHome() { isSuggestionsLoading={isSuggestionsLoading} profiles={profiles} error={error} + viewContext="feed" /> ) } @@ -220,10 +224,12 @@ export function ProfileGrid({ isSuggestionsLoading, error, profiles, + viewContext = 'feed', }: { isSuggestionsLoading: boolean profiles: AppBskyActorDefs.ProfileViewDetailed[] error: Error | null + viewContext: 'profile' | 'feed' }) { const t = useTheme() const {_} = useLingui() @@ -280,7 +286,7 @@ export function ProfileGrid({ shape="round" /> </ProfileCard.Header> - <ProfileCard.Description profile={profile} /> + <ProfileCard.Description profile={profile} numberOfLines={2} /> </ProfileCard.Outer> </CardOuter> )} @@ -297,33 +303,31 @@ export function ProfileGrid({ return ( <View style={[a.border_t, t.atoms.border_contrast_low, t.atoms.bg_contrast_25]}> - <View style={[a.pt_2xl, a.px_lg, a.flex_row, a.pb_xs]}> - <Text - style={[ - a.flex_1, - a.text_lg, - a.font_bold, - t.atoms.text_contrast_medium, - ]}> - <Trans>Suggested for you</Trans> + <View + style={[ + a.p_lg, + a.pb_xs, + a.flex_row, + a.align_center, + a.justify_between, + ]}> + <Text style={[a.text_sm, a.font_bold, t.atoms.text_contrast_medium]}> + {viewContext === 'profile' ? ( + <Trans>Similar accounts</Trans> + ) : ( + <Trans>Suggested for you</Trans> + )} </Text> - <Person fill={t.atoms.text_contrast_low.color} /> + <Person fill={t.atoms.text_contrast_low.color} size="sm" /> </View> {gtMobile ? ( - <View style={[a.flex_1, a.px_lg, a.pt_md, a.pb_xl, a.gap_md]}> - <View style={[a.flex_1, a.flex_row, a.flex_wrap, a.gap_md]}> + <View style={[a.flex_1, a.px_lg, a.pt_sm, a.pb_lg, a.gap_md]}> + <View style={[a.flex_1, a.flex_row, a.flex_wrap, a.gap_sm]}> {content} </View> - <View - style={[ - a.flex_row, - a.justify_end, - a.align_center, - a.pt_xs, - a.gap_md, - ]}> + <View style={[a.flex_row, a.justify_end, a.align_center, a.gap_md]}> <InlineLinkText label={_(msg`Browse more suggestions`)} to="/search" @@ -339,7 +343,7 @@ export function ProfileGrid({ showsHorizontalScrollIndicator={false} snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap} decelerationRate="fast"> - <View style={[a.px_lg, a.pt_md, a.pb_xl, a.flex_row, a.gap_md]}> + <View style={[a.px_lg, a.pt_sm, a.pb_lg, a.flex_row, a.gap_md]}> {content} <Button diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx index 6f6d68049..b208903b4 100644 --- a/src/components/ProfileCard.tsx +++ b/src/components/ProfileCard.tsx @@ -220,8 +220,10 @@ export function NameAndHandlePlaceholder() { export function Description({ profile: profileUnshadowed, + numberOfLines = 3, }: { profile: AppBskyActorDefs.ProfileViewDetailed + numberOfLines?: number }) { const profile = useProfileShadow(profileUnshadowed) const {description} = profile @@ -244,31 +246,34 @@ export function Description({ <RichText value={rt} style={[a.leading_snug]} - numberOfLines={3} + numberOfLines={numberOfLines} disableLinks /> </View> ) } -export function DescriptionPlaceholder() { +export function DescriptionPlaceholder({ + numberOfLines = 3, +}: { + numberOfLines?: number +}) { const t = useTheme() return ( - <View style={[a.gap_xs]}> - <View - style={[a.rounded_xs, a.w_full, t.atoms.bg_contrast_50, {height: 12}]} - /> - <View - style={[a.rounded_xs, a.w_full, t.atoms.bg_contrast_50, {height: 12}]} - /> - <View - style={[ - a.rounded_xs, - a.w_full, - t.atoms.bg_contrast_50, - {height: 12, width: 100}, - ]} - /> + <View style={[{gap: 8}]}> + {Array(numberOfLines) + .fill(0) + .map((_, i) => ( + <View + key={i} + style={[ + a.rounded_xs, + a.w_full, + t.atoms.bg_contrast_50, + {height: 12, width: i + 1 === numberOfLines ? '60%' : '100%'}, + ]} + /> + ))} </View> ) } diff --git a/src/state/queries/suggested-follows.ts b/src/state/queries/suggested-follows.ts index f5d51a974..5ae831704 100644 --- a/src/state/queries/suggested-follows.ts +++ b/src/state/queries/suggested-follows.ts @@ -106,13 +106,16 @@ export function useSuggestedFollowsQuery(options?: SuggestedFollowsOptions) { export function useSuggestedFollowsByActorQuery({did}: {did: string}) { const agent = useAgent() return useQuery<AppBskyGraphGetSuggestedFollowsByActor.OutputSchema, Error>({ - gcTime: 0, queryKey: suggestedFollowsByActorQueryKey(did), queryFn: async () => { const res = await agent.app.bsky.graph.getSuggestedFollowsByActor({ actor: did, }) - return res.data + const data = res.data.isFallback ? {suggestions: []} : res.data + data.suggestions = data.suggestions.filter(profile => { + return !profile.viewer?.following + }) + return data }, }) } |