diff --git a/src/screens/Messages/Conversation/index.tsx b/src/screens/Messages/Conversation/index.tsx index f382647a5b..78b86f3c33 100644 --- a/src/screens/Messages/Conversation/index.tsx +++ b/src/screens/Messages/Conversation/index.tsx @@ -3,7 +3,7 @@ import {TouchableOpacity, View} from 'react-native' import {KeyboardProvider} from 'react-native-keyboard-controller' import {KeyboardAvoidingView} from 'react-native-keyboard-controller' import {useSafeAreaInsets} from 'react-native-safe-area-context' -import {AppBskyActorDefs} from '@atproto/api' +import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -12,8 +12,11 @@ import {NativeStackScreenProps} from '@react-navigation/native-stack' import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types' import {useGate} from '#/lib/statsig/statsig' +import {useProfileShadow} from '#/state/cache/profile-shadow' import {useCurrentConvoId} from '#/state/messages/current-convo-id' +import {useModerationOpts} from '#/state/preferences/moderation-opts' import {BACK_HITSLOP} from 'lib/constants' +import {sanitizeDisplayName} from 'lib/strings/display-names' import {isIOS, isWeb} from 'platform/detection' import {ConvoProvider, isConvoActive, useConvo} from 'state/messages/convo' import {ConvoStatus} from 'state/messages/convo/types' @@ -27,6 +30,7 @@ import {ListMaybePlaceholder} from '#/components/Lists' import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' import {ClipClopGate} from '../gate' + type Props = NativeStackScreenProps< CommonNavigatorParams, 'MessagesConversation' @@ -145,12 +149,7 @@ let Header = ({ const {_} = useLingui() const {gtTablet} = useBreakpoints() const navigation = useNavigation() - const convoState = useConvo() - - const isDeletedAccount = profile?.handle === 'missing.invalid' - const displayName = isDeletedAccount - ? 'Deleted Account' - : profile?.displayName + const moderationOpts = useModerationOpts() const onPressBack = useCallback(() => { if (isWeb) { @@ -195,23 +194,12 @@ let Header = ({ ) : ( )} - - {profile ? ( - - - - {displayName} - - {!isDeletedAccount && ( - - @{profile.handle} - - )} - - ) : ( - <> + + {profile && moderationOpts ? ( + + ) : ( + <> + - - )} - - {isConvoActive(convoState) && profile ? ( - - ) : ( - + + + + )} ) } Header = React.memo(Header) + +function HeaderReady({ + profile: profileUnshadowed, + moderationOpts, +}: { + profile: AppBskyActorDefs.ProfileViewBasic + moderationOpts: ModerationOpts +}) { + const t = useTheme() + const convoState = useConvo() + const profile = useProfileShadow(profileUnshadowed) + const moderation = React.useMemo( + () => moderateProfile(profile, moderationOpts), + [profile, moderationOpts], + ) + + const isDeletedAccount = profile?.handle === 'missing.invalid' + const displayName = isDeletedAccount + ? 'Deleted Account' + : sanitizeDisplayName( + profile.displayName || profile.handle, + moderation.ui('displayName'), + ) + + return ( + <> + + + + + {displayName} + + {!isDeletedAccount && ( + + @{profile.handle} + + )} + + + + {isConvoActive(convoState) && ( + + )} + + ) +}