acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Mostly there with follows

Browse Source
This commit is contained in:
Eric Bailey
2024-06-27 19:23:32 -05:00
parent 24d65b3ffb
commit 2bc24347a8
6 changed files with 192 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/icons/arrowRight_stroke2_corner0_rounded.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M21 12a1 1 0 0 1-.293.707l-6 6a1 1 0 0 1-1.414-1.414L17.586 13H4a1 1 0 1 1 0-2h13.586l-4.293-4.293a1 1 0 0 1 1.414-1.414l6 6A1 1 0 0 1 21 12Z" clip-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 284 B

src/components/FeedSuggestedFollows/index.tsx
+99 -154
View File
@@ -1,160 +1,60 @@
import React from 'react'
import {View} from 'react-native'
import {ScrollView} from 'react-native-gesture-handler'
import {AppBskyActorDefs, moderateProfile} from '@atproto/api'
import {msg} from '@lingui/macro'
import {AppBskyActorDefs} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useNavigation} from '@react-navigation/native'
import {useProfileShadow} from '#/state/cache/profile-shadow'
import {NavigationProp} from '#/lib/routes/types'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {useSuggestedFollowsQuery} from '#/state/queries/suggested-follows'
import {isJustAMute} from 'lib/moderation'
import {sanitizeDisplayName} from 'lib/strings/display-names'
import {sanitizeHandle} from 'lib/strings/handles'
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a, useTheme} from '#/alf'
import {atoms as a, useBreakpoints, useTheme, ViewStyleProp} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {useFollowMethods} from '#/components/hooks/useFollowMethods'
import {useRichText} from '#/components/hooks/useRichText'
import {ArrowRight_Stroke2_Corner0_Rounded as Arrow} from '#/components/icons/Arrow'
import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Refresh} from '#/components/icons/ArrowRotateCounterClockwise'
import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
import {RichText} from '#/components/RichText'
import * as ProfileCard from '#/components/ProfileCard'
import {Text} from '#/components/Typography'
export function SuggestedFollowCardSkeleton() {
function CardOuter({
children,
style,
}: {children: React.ReactNode | React.ReactNode[]} & ViewStyleProp) {
const t = useTheme()
const {gtMobile} = useBreakpoints()
return (
<View
style={[
a.w_full,
a.p_lg,
a.rounded_md,
a.gap_sm,
a.border,
t.atoms.bg_contrast_25,
{
!gtMobile && {
width: 300,
},
{
borderColor: t.atoms.bg_contrast_25.backgroundColor,
},
style,
]}>
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
<View style={[a.rounded_full, t.atoms.bg, {height: 40, width: 40}]} />
<View
style={[
a.flex_row,
a.align_center,
a.justify_between,
a.gap_lg,
a.flex_1,
]}>
<View style={[a.gap_xs, a.flex_1]}>
<View
style={[a.rounded_xs, t.atoms.bg, {height: 16, width: 200}]}
/>
<View
style={[a.rounded_xs, t.atoms.bg, {height: 12, width: 100}]}
/>
</View>
</View>
</View>
<View style={[a.gap_xs]}>
<View style={[a.rounded_xs, a.w_full, t.atoms.bg, {height: 12}]} />
<View style={[a.rounded_xs, a.w_full, t.atoms.bg, {height: 12}]} />
<View
style={[a.rounded_xs, a.w_full, t.atoms.bg, {height: 12, width: 100}]}
/>
</View>
{children}
</View>
)
}
export function SuggestedFollowCard({
profile: profileUnshadowed,
}: {
profile: AppBskyActorDefs.ProfileViewBasic
}) {
export function SuggestedFollowCardSkeleton() {
const t = useTheme()
const {_} = useLingui()
const profile = useProfileShadow(profileUnshadowed)
const moderationOpts = useModerationOpts()
const {follow, unfollow} = useFollowMethods({
profile,
logContext: 'FeedSuggestedFollowCard',
})
// @ts-ignore TODO why isn't this type correct
const [descriptionRT] = useRichText(profileUnshadowed?.description ?? '')
if (!moderationOpts) return null
const moderation = moderateProfile(profile, moderationOpts)
const modui = moderation.ui('profileList')
if (modui.filter && !isJustAMute(modui)) return null
return (
<View
style={[
a.p_lg,
a.rounded_md,
a.gap_sm,
t.atoms.bg_contrast_25,
{
width: 300,
},
]}>
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
<PreviewableUserAvatar
size={40}
profile={profile}
avatar={profile.avatar}
moderation={moderation.ui('avatar')}
/>
<CardOuter style={[a.gap_sm, t.atoms.border_contrast_low]}>
<ProfileCard.Header>
<ProfileCard.AvatarPlaceholder />
<ProfileCard.NameAndHandlePlaceholder />
</ProfileCard.Header>
<View
style={[
a.flex_row,
a.align_center,
a.justify_between,
a.gap_lg,
a.flex_1,
]}>
<View style={[a.gap_2xs, a.flex_1]}>
<Text
style={[a.text_md, a.font_bold, a.leading_tight, a.flex_1]}
numberOfLines={1}>
{sanitizeDisplayName(
profile.displayName || sanitizeHandle(profile.handle),
moderation.ui('displayName'),
)}
</Text>
<Text
style={[t.atoms.text_contrast_medium, a.flex_1]}
numberOfLines={1}>
{sanitizeHandle(profile.handle, '@')}
</Text>
</View>
<Button
label={
profile.viewer?.following ? _(msg`Following`) : _(msg`Follow`)
}
size="small"
shape="round"
variant="solid"
color="primary"
onPress={profile.viewer?.following ? unfollow : follow}>
{profile.viewer?.following ? (
<ButtonIcon icon={Check} />
) : (
<ButtonIcon icon={Plus} />
)}
</Button>
</View>
</View>
<Text numberOfLines={3}>
<RichText value={descriptionRT} style={[t.atoms.text_contrast_high]} />
</Text>
</View>
<ProfileCard.DescriptionPlaceholder />
</CardOuter>
)
}
@@ -162,17 +62,7 @@ export function ErrorState({retry}: {retry: () => void}) {
const t = useTheme()
return (
<>
<View
style={[
a.align_start,
a.p_lg,
a.rounded_md,
a.gap_md,
t.atoms.bg_contrast_25,
{
width: 300,
},
]}>
<CardOuter>
<CircleInfo size="lg" fill={t.palette.negative_400} />
<Text style={[a.font_bold]}>Whoops, something went wrong :(</Text>
<Button
@@ -184,7 +74,7 @@ export function ErrorState({retry}: {retry: () => void}) {
<ButtonText>Retry</ButtonText>
<ButtonIcon icon={Refresh} position="right" />
</Button>
</View>
</CardOuter>
<SuggestedFollowCardSkeleton />
<SuggestedFollowCardSkeleton />
@@ -193,12 +83,19 @@ export function ErrorState({retry}: {retry: () => void}) {
}
export function FeedSuggestedFollowsCards() {
const t = useTheme()
const {_} = useLingui()
const {
isLoading,
isLoading: isSuggestionsLoading,
data: suggestions,
error,
refetch,
} = useSuggestedFollowsQuery()
} = useSuggestedFollowsQuery({limit: 6})
const moderationOpts = useModerationOpts()
const navigation = useNavigation<NavigationProp>()
const {gtMobile} = useBreakpoints()
const isLoading = isSuggestionsLoading || !moderationOpts
const maxLength = gtMobile ? 3 : 6
const profiles: AppBskyActorDefs.ProfileViewBasic[] = []
if (suggestions) {
@@ -215,21 +112,69 @@ export function FeedSuggestedFollowsCards() {
}
}
return (
const content = isLoading ? (
Array(3)
.fill(0)
.map((_, i) => <SuggestedFollowCardSkeleton key={i} />)
) : error || !profiles.length ? (
<ErrorState retry={refetch} />
) : (
<>
{profiles.slice(0, maxLength).map(profile => (
<ProfileCard.Link key={profile.did} did={profile.handle}>
<CardOuter style={[a.flex_1]}>
<ProfileCard.Outer>
<ProfileCard.Header>
<ProfileCard.Avatar
profile={profile}
moderationOpts={moderationOpts}
/>
<ProfileCard.NameAndHandle
profile={profile}
moderationOpts={moderationOpts}
/>
<ProfileCard.FollowButton
profile={profile}
logContext="FeedSuggestedFollowsCard"
shape={gtMobile ? undefined : 'round'}
variant="outline"
/>
</ProfileCard.Header>
<ProfileCard.Description profile={profile} />
</ProfileCard.Outer>
</CardOuter>
</ProfileCard.Link>
))}
</>
)
return gtMobile ? (
<View style={[a.flex_1, a.px_lg, a.pt_md, a.pb_xl, a.gap_md]}>
{content}
</View>
) : (
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
<View style={[a.px_lg, a.pt_md, a.pb_xl, a.flex_row, a.gap_md]}>
{isLoading ? (
Array(3)
.fill(0)
.map((_, i) => <SuggestedFollowCardSkeleton key={i} />)
) : error || !profiles.length ? (
<ErrorState retry={refetch} />
) : (
profiles.map((profile, i) => (
<SuggestedFollowCard key={i} profile={profile} />
))
)}
{content}
</View>
<Button
label={_(msg`Browse more accounts on our explore page`)}
onPress={() => {
navigation.navigate('SearchTab')
}}>
<CardOuter style={[a.flex_1, t.atoms.bg_contrast_25, {borderWidth: 0}]}>
<View style={[a.flex_1, a.justify_center]}>
<View style={[a.flex_row, a.px_lg]}>
<Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
<Trans>Browse more suggestions on our explore page</Trans>
</Text>
<Arrow size="xl" />
</View>
</View>
</CardOuter>
</Button>
</ScrollView>
)
}
src/components/ProfileCard.tsx
+74 -3
View File
@@ -9,6 +9,7 @@ import {
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {LogEvents} from '#/lib/statsig/statsig'
import {sanitizeDisplayName} from '#/lib/strings/display-names'
import {useProfileFollowMutationQueue} from '#/state/queries/profile'
import {sanitizeHandle} from 'lib/strings/handles'
@@ -87,7 +88,7 @@ export function Header({
}: {
children: React.ReactElement | React.ReactElement[]
}) {
return <View style={[a.flex_row, a.gap_sm]}>{children}</View>
return <View style={[a.flex_row, a.align_center, a.gap_sm]}>{children}</View>
}
export function Link({did, children}: {did: string} & Omit<LinkProps, 'to'>) {
@@ -96,7 +97,8 @@ export function Link({did, children}: {did: string} & Omit<LinkProps, 'to'>) {
to={{
screen: 'Profile',
params: {name: did},
}}>
}}
style={[a.flex_col]}>
{children}
</InternalLink>
)
@@ -121,6 +123,22 @@ export function Avatar({
)
}
export function AvatarPlaceholder() {
const t = useTheme()
return (
<View
style={[
a.rounded_full,
t.atoms.bg_contrast_50,
{
width: 42,
height: 42,
},
]}
/>
)
}
export function NameAndHandle({
profile,
moderationOpts,
@@ -150,6 +168,36 @@ export function NameAndHandle({
)
}
export function NameAndHandlePlaceholder() {
const t = useTheme()
return (
<View style={[a.flex_1, a.gap_xs]}>
<View
style={[
a.rounded_xs,
t.atoms.bg_contrast_50,
{
width: '60%',
height: 14,
},
]}
/>
<View
style={[
a.rounded_xs,
t.atoms.bg_contrast_50,
{
width: '40%',
height: 10,
},
]}
/>
</View>
)
}
export function Description({
profile: profileUnshadowed,
}: {
@@ -183,9 +231,32 @@ export function Description({
)
}
export function DescriptionPlaceholder() {
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>
)
}
export type FollowButtonProps = {
profile: AppBskyActorDefs.ProfileViewBasic
logContext: 'ProfileCard' | 'StarterPackProfilesList'
logContext: LogEvents['profile:follow']['logContext'] &
LogEvents['profile:unfollow']['logContext']
} & Partial<ButtonProps>
export function FollowButton(props: FollowButtonProps) {
src/components/icons/Arrow.tsx
+4
View File
@@ -8,6 +8,10 @@ export const ArrowLeft_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M3 12a1 1 0 0 1 .293-.707l6-6a1 1 0 0 1 1.414 1.414L6.414 11H20a1 1 0 1 1 0 2H6.414l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6A1 1 0 0 1 3 12Z',
})
export const ArrowRight_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M21 12a1 1 0 0 1-.293.707l-6 6a1 1 0 0 1-1.414-1.414L17.586 13H4a1 1 0 1 1 0-2h13.586l-4.293-4.293a1 1 0 0 1 1.414-1.414l6 6A1 1 0 0 1 21 12Z',
})
export const ArrowBottom_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M12 21a1 1 0 0 1-.707-.293l-6-6a1 1 0 1 1 1.414-1.414L11 17.586V4a1 1 0 1 1 2 0v13.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-6 6A1 1 0 0 1 12 21Z',
})
src/lib/statsig/events.ts
+2
View File
@@ -147,6 +147,7 @@ export type LogEvents = {
| 'ProfileHoverCard'
| 'AvatarButton'
| 'StarterPackProfilesList'
| 'FeedSuggestedFollowsCard'
}
'profile:unfollow': {
logContext:
@@ -160,6 +161,7 @@ export type LogEvents = {
| 'Chat'
| 'AvatarButton'
| 'StarterPackProfilesList'
| 'FeedSuggestedFollowsCard'
}
'chat:create': {
logContext: 'ProfileHeader' | 'NewChatDialog' | 'SendViaChatDialog'
src/screens/Home/EmptyTimeline.tsx
+12 -17
View File
@@ -3,14 +3,13 @@ import {View} from 'react-native'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {emitSoftReset} from '#/state/events'
import {CenteredView} from '#/view/com/util/Views'
import {atoms as a} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {Divider} from '#/components/Divider'
import {FeedSuggestedFollowsCards} from '#/components/FeedSuggestedFollows'
import {IconCircle} from '#/components/IconCircle'
import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Refresh} from '#/components/icons/ArrowRotateCounterClockwise'
import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline'
import {Text} from '#/components/Typography'
export function EmptyTimeline() {
@@ -19,22 +18,17 @@ export function EmptyTimeline() {
return (
<CenteredView sideBorders style={[a.h_full_vh]}>
<View style={[a.px_lg, a.pt_3xl]}>
<IconCircle icon={FilterTimeline} style={[a.mb_2xl]} />
<Text style={[a.text_xl, a.font_bold, a.mb_sm]}>
<Trans>Welcome to your timeline</Trans>
<Text style={[a.text_2xl, a.font_bold, a.mb_md]}>
<Trans>Your Following feed is empty :(</Trans>
</Text>
<Text style={[a.mb_sm, a.leading_snug]}>
<Text style={[a.text_md, a.mb_sm, a.leading_snug]}>
<Trans>
Your timeline is where you can see posts from people you follow.
It's always chronologically sorted, so you'll never miss a post.
Follow some users to see what's happening. Their content will appear
here in chronological order.
</Trans>
</Text>
<Text style={[a.pt_lg, a.font_bold, a.mb_sm, a.leading_snug]}>
<Trans>Follow some people to get started!</Trans>
</Text>
</View>
<View style={[a.flex_row, a.align_start]}>
<FeedSuggestedFollowsCards />
</View>
@@ -54,12 +48,13 @@ export function EmptyTimeline() {
</Text>
<Button
label={_(msg`Click to view your timeline`)}
size="medium"
label={_(msg`Click to refresh your following feed`)}
size="small"
variant="solid"
color="primary">
color="secondary"
onPress={() => emitSoftReset()}>
<ButtonText>
<Trans>View your timeline</Trans>
<Trans>Refresh your feed</Trans>
</ButtonText>
<ButtonIcon icon={Refresh} position="right" />
</Button>