diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx index 1ccefc412d..1ab5a9b99c 100644 --- a/src/components/ProfileCard.tsx +++ b/src/components/ProfileCard.tsx @@ -2,8 +2,10 @@ import React from 'react' import {View} from 'react-native' import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api' -import {sanitizeDisplayName} from 'lib/strings/display-names' +import {createSanitizedDisplayName} from 'lib/moderation/create-sanitized-display-name' import {sanitizeHandle} from 'lib/strings/handles' +import {useProfileShadow} from 'state/cache/profile-shadow' +import {FollowButton} from 'view/com/profile/FollowButton' import {ProfileCardPills} from 'view/com/profile/ProfileCard' import {UserAvatar} from 'view/com/util/UserAvatar' import {atoms as a, useTheme} from '#/alf' @@ -11,20 +13,19 @@ import {Link} from '#/components/Link' import {Text} from '#/components/Typography' export function Default({ - profile, + profile: profileUnshadowed, moderationOpts, + logContext, }: { profile: AppBskyActorDefs.ProfileViewDetailed moderationOpts: ModerationOpts + logContext: 'ProfileCard' | 'StarterPackProfilesList' }) { const t = useTheme() + const profile = useProfileShadow(profileUnshadowed) + const name = createSanitizedDisplayName(profile) const handle = `@${sanitizeHandle(profile.handle)}` - const name = - profile.displayName != null && profile.displayName !== '' - ? sanitizeDisplayName(profile.displayName) - : handle - const moderation = moderateProfile(profile, moderationOpts) return ( @@ -48,6 +49,11 @@ export function Default({ {handle} + + + + + - {children} + {children} ) } diff --git a/src/components/StarterPack/Main/ProfilesList.tsx b/src/components/StarterPack/Main/ProfilesList.tsx index 057ba88595..e3b90e9741 100644 --- a/src/components/StarterPack/Main/ProfilesList.tsx +++ b/src/components/StarterPack/Main/ProfilesList.tsx @@ -3,11 +3,12 @@ import {ListRenderItemInfo, View} from 'react-native' import {AppBskyActorDefs, AtUri, ModerationOpts} from '@atproto/api' import {useBottomBarOffset} from 'lib/hooks/useBottomBarOffset' -import {isNative} from 'platform/detection' +import {isNative, isWeb} from 'platform/detection' import {useListMembersQuery} from 'state/queries/list-members' import {useSession} from 'state/session' import {List, ListRef} from 'view/com/util/List' import {SectionRef} from '#/screens/Profile/Sections/types' +import {atoms as a, useTheme} from '#/alf' import {Default as ProfileCard} from '#/components/ProfileCard' function keyExtractor(item: AppBskyActorDefs.ProfileViewBasic, index: number) { @@ -26,6 +27,7 @@ export const ProfilesList = React.forwardRef( {listUri, headerHeight, scrollElRef, moderationOpts}, ref, ) { + const t = useTheme() const [initialHeaderHeight] = React.useState(headerHeight) const bottomBarOffset = useBottomBarOffset(20) const {currentAccount} = useSession() @@ -65,8 +67,22 @@ export const ProfilesList = React.forwardRef( const renderItem = ({ item, + index, }: ListRenderItemInfo) => { - return + return ( + + + + ) } return (