From 1949473a6ae82b4cee59d9d2e619226034b920f3 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Tue, 14 May 2024 16:46:03 -0500 Subject: [PATCH] Refactor ChatListItem for mod state --- src/components/dms/ConvoMenu.tsx | 72 ++++++++++++++++++++-- src/screens/Messages/List/ChatListItem.tsx | 70 ++++++++++++++++----- 2 files changed, 119 insertions(+), 23 deletions(-) diff --git a/src/components/dms/ConvoMenu.tsx b/src/components/dms/ConvoMenu.tsx index 0a1d3f01cc..12994b3a19 100644 --- a/src/components/dms/ConvoMenu.tsx +++ b/src/components/dms/ConvoMenu.tsx @@ -1,11 +1,16 @@ import React, {useCallback} from 'react' import {Keyboard, Pressable, View} from 'react-native' -import {AppBskyActorDefs, ChatBskyConvoDefs} from '@atproto/api' +import { + AppBskyActorDefs, + ChatBskyConvoDefs, + ModerationDecision, +} from '@atproto/api' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useNavigation} from '@react-navigation/native' import {NavigationProp} from '#/lib/routes/types' +import {listUriToHref} from '#/lib/strings/url-helpers' import { useConvoQuery, useMarkAsReadMutation, @@ -14,6 +19,7 @@ import {useLeaveConvo} from '#/state/queries/messages/leave-conversation' import {useMuteConvo} from '#/state/queries/messages/mute-conversation' import * as Toast from '#/view/com/util/Toast' import {atoms as a, useTheme} from '#/alf' +import * as Dialog from '#/components/Dialog' import {ArrowBoxLeft_Stroke2_Corner0_Rounded as ArrowBoxLeft} from '#/components/icons/ArrowBoxLeft' import {DotGrid_Stroke2_Corner0_Rounded as DotsHorizontal} from '#/components/icons/DotGrid' import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag' @@ -22,8 +28,10 @@ import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Perso import {PersonCheck_Stroke2_Corner0_Rounded as PersonCheck} from '#/components/icons/PersonCheck' import {PersonX_Stroke2_Corner0_Rounded as PersonX} from '#/components/icons/PersonX' import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker' +import {InlineLinkText} from '#/components/Link' import * as Menu from '#/components/Menu' import * as Prompt from '#/components/Prompt' +import {Text} from '#/components/Typography' import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '../icons/Bubble' let ConvoMenu = ({ @@ -34,22 +42,34 @@ let ConvoMenu = ({ showMarkAsRead, hideTrigger, triggerOpacity, + moderation, }: { convo: ChatBskyConvoDefs.ConvoView profile: AppBskyActorDefs.ProfileViewBasic - onUpdateConvo?: (convo: ChatBskyConvoDefs.ConvoView) => void control?: Menu.MenuControlProps currentScreen: 'list' | 'conversation' showMarkAsRead?: boolean hideTrigger?: boolean triggerOpacity?: number + moderation: ModerationDecision }): React.ReactNode => { const navigation = useNavigation() const {_} = useLingui() const t = useTheme() const leaveConvoControl = Prompt.usePromptControl() const reportControl = Prompt.usePromptControl() + const blockedByListControl = Prompt.usePromptControl() const {mutate: markAsRead} = useMarkAsReadMutation() + const modui = moderation.ui('profileView') + const {listBlocks} = React.useMemo(() => { + const blocks = modui.alerts.filter(alert => alert.type === 'blocking') + const listBlocks = blocks.filter(alert => alert.source.type === 'list') + const userBlock = blocks.find(alert => alert.source.type === 'user') + return { + listBlocks, + userBlock, + } + }, [modui]) const {data: convo} = useConvoQuery(initialConvo) @@ -70,6 +90,13 @@ let ConvoMenu = ({ }, }) + const toggleBlock = React.useCallback(() => { + if (listBlocks.length) { + blockedByListControl.open() + return + } + }, [listBlocks, blockedByListControl]) + const {mutate: leaveConvo} = useLeaveConvo(convo?.id, { onSuccess: () => { if (currentScreen === 'conversation') { @@ -148,10 +175,7 @@ let ConvoMenu = ({ {/* TODO(samuel): implement this */} - {}} - disabled> + Block account @@ -202,6 +226,42 @@ let ConvoMenu = ({ confirmButtonCta={_(msg`I understand`)} onConfirm={noop} /> + + + {_(msg`User blocked by list`)} + + + + {_( + msg`This account is blocked by one or more of your moderation lists. To unblock, please visit the lists directly and remove this user.`, + )}{' '} + + + + {_(msg`Lists blocking this user:`)}{' '} + {listBlocks.map((block, i) => + block.source.type === 'list' ? ( + + {i === 0 ? null : ', '} + + {block.source.list.name} + + + ) : null, + )} + + + + + + + + + ) } diff --git a/src/screens/Messages/List/ChatListItem.tsx b/src/screens/Messages/List/ChatListItem.tsx index 57a8e03480..aa47e95035 100644 --- a/src/screens/Messages/List/ChatListItem.tsx +++ b/src/screens/Messages/List/ChatListItem.tsx @@ -1,13 +1,21 @@ import React from 'react' import {View} from 'react-native' -import {ChatBskyConvoDefs} from '@atproto/api' +import { + AppBskyActorDefs, + ChatBskyConvoDefs, + moderateProfile, + ModerationOpts, +} from '@atproto/api' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useNavigation} from '@react-navigation/native' import {NavigationProp} from '#/lib/routes/types' import {isNative} from '#/platform/detection' +import {useProfileShadow} from '#/state/cache/profile-shadow' +import {useModerationOpts} from '#/state/preferences/moderation-opts' import {useSession} from '#/state/session' +import {sanitizeDisplayName} from 'lib/strings/display-names' import {TimeElapsed} from '#/view/com/util/TimeElapsed' import {UserAvatar} from '#/view/com/util/UserAvatar' import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' @@ -17,25 +25,53 @@ import {Bell2Off_Filled_Corner0_Rounded as BellStroke} from '#/components/icons/ import {useMenuControl} from '#/components/Menu' import {Text} from '#/components/Typography' -export function ChatListItem({ +export function ChatListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) { + const {currentAccount} = useSession() + const otherUser = convo.members.find( + member => member.did !== currentAccount?.did, + ) + const moderationOpts = useModerationOpts() + + if (!otherUser || !moderationOpts) { + return null + } + + return ( + + ) +} + +function ChatListItemReady({ convo, - index, + profile: profileUnshadowed, + moderationOpts, }: { convo: ChatBskyConvoDefs.ConvoView - index: number + profile: AppBskyActorDefs.ProfileViewBasic + moderationOpts: ModerationOpts }) { const t = useTheme() const {_} = useLingui() const {currentAccount} = useSession() const menuControl = useMenuControl() const {gtMobile} = useBreakpoints() - const otherUser = convo.members.find( - member => member.did !== currentAccount?.did, + const profile = useProfileShadow(profileUnshadowed) + const moderation = React.useMemo( + () => moderateProfile(profile, moderationOpts), + [profile, moderationOpts], ) - const isDeletedAccount = otherUser?.handle === 'missing.invalid' + + const isDeletedAccount = profile.handle === 'missing.invalid' const displayName = isDeletedAccount ? 'Deleted Account' - : otherUser?.displayName || otherUser?.handle + : sanitizeDisplayName( + profile.displayName || profile.handle, + moderation.ui('displayName'), + ) let lastMessage = _(msg`No messages yet`) let lastMessageSentAt: string | null = null @@ -73,10 +109,6 @@ export function ChatListItem({ }) }, [convo.id, navigation]) - if (!otherUser) { - return null - } - return (