get profile pills in

This commit is contained in:
Hailey
2024-06-19 18:08:20 -07:00
parent 5e28d6f67f
commit 9fa6783b6e
3 changed files with 37 additions and 21 deletions
+18 -2
View File
@@ -1,9 +1,10 @@
import React from 'react' import React from 'react'
import {View} from 'react-native' import {View} from 'react-native'
import {AppBskyActorDefs} from '@atproto/api' import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api'
import {sanitizeDisplayName} from 'lib/strings/display-names' import {sanitizeDisplayName} from 'lib/strings/display-names'
import {sanitizeHandle} from 'lib/strings/handles' import {sanitizeHandle} from 'lib/strings/handles'
import {ProfileCardPills} from 'view/com/profile/ProfileCard'
import {UserAvatar} from 'view/com/util/UserAvatar' import {UserAvatar} from 'view/com/util/UserAvatar'
import {atoms as a, useTheme} from '#/alf' import {atoms as a, useTheme} from '#/alf'
import {Link} from '#/components/Link' import {Link} from '#/components/Link'
@@ -11,8 +12,10 @@ import {Text} from '#/components/Typography'
export function Default({ export function Default({
profile, profile,
moderationOpts,
}: { }: {
profile: AppBskyActorDefs.ProfileViewDetailed profile: AppBskyActorDefs.ProfileViewDetailed
moderationOpts: ModerationOpts
}) { }) {
const t = useTheme() const t = useTheme()
@@ -22,13 +25,22 @@ export function Default({
? sanitizeDisplayName(profile.displayName) ? sanitizeDisplayName(profile.displayName)
: handle : handle
const moderation = moderateProfile(profile, moderationOpts)
return ( return (
<Wrapper did={profile.did}> <Wrapper did={profile.did}>
<View style={[a.flex_row, a.gap_sm]}> <View style={[a.flex_row, a.gap_sm]}>
<UserAvatar <UserAvatar
size={42} size={42}
avatar={profile.avatar} avatar={profile.avatar}
type={profile.associated?.labeler ? 'algo' : 'user'} type={
profile.associated?.labeler
? 'labeler'
: profile.associated?.feedgens
? 'algo'
: 'user'
}
moderation={moderation.ui('avatar')}
/> />
<View> <View>
<Text style={[a.text_md, a.font_bold, a.leading_snug]}>{name}</Text> <Text style={[a.text_md, a.font_bold, a.leading_snug]}>{name}</Text>
@@ -36,6 +48,10 @@ export function Default({
{handle} {handle}
</Text> </Text>
</View> </View>
<ProfileCardPills
followedBy={Boolean(profile.viewer?.followedBy)}
moderation={moderation}
/>
</View> </View>
{profile.description && ( {profile.description && (
<Text numberOfLines={3}>{profile.description}</Text> <Text numberOfLines={3}>{profile.description}</Text>
@@ -1,27 +1,14 @@
import React, {useCallback} from 'react' import React, {useCallback} from 'react'
import {ListRenderItemInfo, View} from 'react-native' import {ListRenderItemInfo, View} from 'react-native'
import {AppBskyActorDefs, AtUri} from '@atproto/api' import {AppBskyActorDefs, AtUri, ModerationOpts} from '@atproto/api'
import {useBottomBarOffset} from 'lib/hooks/useBottomBarOffset' import {useBottomBarOffset} from 'lib/hooks/useBottomBarOffset'
import {isNative} from 'platform/detection' import {isNative} from 'platform/detection'
import {useListMembersQuery} from 'state/queries/list-members' import {useListMembersQuery} from 'state/queries/list-members'
import {useSession} from 'state/session' import {useSession} from 'state/session'
import {ProfileCardWithFollowBtn} from 'view/com/profile/ProfileCard'
import {List, ListRef} from 'view/com/util/List' import {List, ListRef} from 'view/com/util/List'
import {SectionRef} from '#/screens/Profile/Sections/types' import {SectionRef} from '#/screens/Profile/Sections/types'
import {Default as ProfileCard} from '#/components/ProfileCard'
function renderItem({
item,
index,
}: ListRenderItemInfo<AppBskyActorDefs.ProfileViewBasic>) {
return (
<ProfileCardWithFollowBtn
profile={item}
logContext="StarterPackProfilesList"
noBorder={isNative && index === 0}
/>
)
}
function keyExtractor(item: AppBskyActorDefs.ProfileViewBasic, index: number) { function keyExtractor(item: AppBskyActorDefs.ProfileViewBasic, index: number) {
return `${item.did}-${index}` return `${item.did}-${index}`
@@ -31,10 +18,14 @@ interface ProfilesListProps {
listUri: string listUri: string
headerHeight: number headerHeight: number
scrollElRef: ListRef scrollElRef: ListRef
moderationOpts: ModerationOpts
} }
export const ProfilesList = React.forwardRef<SectionRef, ProfilesListProps>( export const ProfilesList = React.forwardRef<SectionRef, ProfilesListProps>(
function ProfilesListImpl({listUri, headerHeight, scrollElRef}, ref) { function ProfilesListImpl(
{listUri, headerHeight, scrollElRef, moderationOpts},
ref,
) {
const [initialHeaderHeight] = React.useState(headerHeight) const [initialHeaderHeight] = React.useState(headerHeight)
const bottomBarOffset = useBottomBarOffset(20) const bottomBarOffset = useBottomBarOffset(20)
const {currentAccount} = useSession() const {currentAccount} = useSession()
@@ -72,6 +63,12 @@ export const ProfilesList = React.forwardRef<SectionRef, ProfilesListProps>(
scrollToTop: onScrollToTop, scrollToTop: onScrollToTop,
})) }))
const renderItem = ({
item,
}: ListRenderItemInfo<AppBskyActorDefs.ProfileViewBasic>) => {
return <ProfileCard profile={item} moderationOpts={moderationOpts} />
}
return ( return (
<List <List
data={getSortedProfiles()} data={getSortedProfiles()}
@@ -8,8 +8,8 @@ import {useNavigation} from '@react-navigation/native'
import {NativeStackScreenProps} from '@react-navigation/native-stack' import {NativeStackScreenProps} from '@react-navigation/native-stack'
import {useQueryClient} from '@tanstack/react-query' import {useQueryClient} from '@tanstack/react-query'
import {logger} from '#/logger'
import {cleanError} from '#/lib/strings/errors' import {cleanError} from '#/lib/strings/errors'
import {logger} from '#/logger'
import {useDeleteStarterPackMutation} from '#/state/queries/starter-packs' import {useDeleteStarterPackMutation} from '#/state/queries/starter-packs'
import {HITSLOP_20} from 'lib/constants' import {HITSLOP_20} from 'lib/constants'
import {makeProfileLink, makeStarterPackLink} from 'lib/routes/links' import {makeProfileLink, makeStarterPackLink} from 'lib/routes/links'
@@ -17,6 +17,7 @@ import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types'
import {shareUrl} from 'lib/sharing' import {shareUrl} from 'lib/sharing'
import {logEvent} from 'lib/statsig/statsig' import {logEvent} from 'lib/statsig/statsig'
import {isWeb} from 'platform/detection' import {isWeb} from 'platform/detection'
import {useModerationOpts} from 'state/preferences/moderation-opts'
import {RQKEY} from 'state/queries/list-members' import {RQKEY} from 'state/queries/list-members'
import {useResolveDidQuery} from 'state/queries/resolve-uri' import {useResolveDidQuery} from 'state/queries/resolve-uri'
import {useStarterPackQuery} from 'state/queries/starter-packs' import {useStarterPackQuery} from 'state/queries/starter-packs'
@@ -55,6 +56,7 @@ export function StarterPackScreen({route}: StarterPackScreeProps) {
const {_} = useLingui() const {_} = useLingui()
const {name, rkey} = route.params const {name, rkey} = route.params
const moderationOpts = useModerationOpts()
const { const {
data: did, data: did,
isLoading: isLoadingDid, isLoading: isLoadingDid,
@@ -71,10 +73,10 @@ export function StarterPackScreen({route}: StarterPackScreeProps) {
AppBskyGraphDefs.validateStarterPackView(starterPack) && AppBskyGraphDefs.validateStarterPackView(starterPack) &&
AppBskyGraphStarterpack.validateRecord(starterPack.record) AppBskyGraphStarterpack.validateRecord(starterPack.record)
if (!did || !starterPack || !isValid) { if (!did || !starterPack || !isValid || !moderationOpts) {
return ( return (
<ListMaybePlaceholder <ListMaybePlaceholder
isLoading={isLoadingDid || isLoadingStarterPack} isLoading={isLoadingDid || isLoadingStarterPack || !moderationOpts}
isError={isErrorDid || isErrorStarterPack || !isValid} isError={isErrorDid || isErrorStarterPack || !isValid}
errorMessage={_(msg`That starter pack could not be found.`)} errorMessage={_(msg`That starter pack could not be found.`)}
/> />
@@ -104,6 +106,7 @@ export function StarterPackScreen({route}: StarterPackScreeProps) {
headerHeight={headerHeight} headerHeight={headerHeight}
// @ts-expect-error // @ts-expect-error
scrollElRef={scrollElRef} scrollElRef={scrollElRef}
moderationOpts={moderationOpts}
/> />
) )
: null} : null}