get profile pills in
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user