acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Refactor ChatListItem for mod state

Browse Source
This commit is contained in:
Eric Bailey
2024-05-14 16:46:03 -05:00
parent 0e04b19627
commit 1949473a6a
2 changed files with 119 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dms/ConvoMenu.tsx
+66 -6
View File
@@ -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<NavigationProp>()
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 = ({
<Menu.Divider />
{/* TODO(samuel): implement this */}
<Menu.Group>
<Menu.Item
label={_(msg`Block account`)}
onPress={() => {}}
disabled>
<Menu.Item label={_(msg`Block account`)} onPress={toggleBlock}>
<Menu.ItemText>
<Trans>Block account</Trans>
</Menu.ItemText>
@@ -202,6 +226,42 @@ let ConvoMenu = ({
confirmButtonCta={_(msg`I understand`)}
onConfirm={noop}
/>
<Prompt.Outer control={blockedByListControl} testID="blockedByListDialog">
<Prompt.TitleText>{_(msg`User blocked by list`)}</Prompt.TitleText>
<View style={[a.gap_sm, a.pb_lg]}>
<Text
selectable
style={[a.text_md, a.leading_snug, t.atoms.text_contrast_high]}>
{_(
msg`This account is blocked by one or more of your moderation lists. To unblock, please visit the lists directly and remove this user.`,
)}{' '}
</Text>
<Text style={[a.text_md, a.leading_snug, t.atoms.text_contrast_high]}>
{_(msg`Lists blocking this user:`)}{' '}
{listBlocks.map((block, i) =>
block.source.type === 'list' ? (
<React.Fragment key={block.source.list.uri}>
{i === 0 ? null : ', '}
<InlineLinkText
to={listUriToHref(block.source.list.uri)}
style={[a.text_md, a.leading_snug]}>
{block.source.list.name}
</InlineLinkText>
</React.Fragment>
) : null,
)}
</Text>
</View>
<Prompt.Actions>
<Prompt.Cancel cta={_(msg`I understand`)} />
</Prompt.Actions>
<Dialog.Close />
</Prompt.Outer>
</>
)
}
src/screens/Messages/List/ChatListItem.tsx
+53 -17
View File
@@ -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 (
<ChatListItemReady
convo={convo}
profile={otherUser}
moderationOpts={moderationOpts}
/>
)
}
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 (
<View
// @ts-expect-error web only
@@ -85,7 +117,7 @@ export function ChatListItem({
onFocus={onFocus}
onBlur={onMouseLeave}>
<Button
label={otherUser.displayName || otherUser.handle}
label={profile.displayName || profile.handle}
onPress={onPress}
style={a.flex_1}
onLongPress={isNative ? menuControl.open : undefined}>
@@ -98,10 +130,13 @@ export function ChatListItem({
a.py_md,
a.gap_md,
(hovered || pressed) && t.atoms.bg_contrast_25,
index === 0 && [a.border_t, a.pt_lg],
t.atoms.border_contrast_low,
]}>
<UserAvatar avatar={otherUser?.avatar} size={52} />
<UserAvatar
avatar={profile.avatar}
size={52}
moderation={moderation.ui('avatar')}
/>
<View style={[a.flex_1, a.flex_row, a.align_center]}>
<View style={[a.flex_1]}>
<View
@@ -154,7 +189,7 @@ export function ChatListItem({
<Text
numberOfLines={1}
style={[a.text_sm, t.atoms.text_contrast_medium, a.pb_xs]}>
@{otherUser.handle}
@{profile.handle}
</Text>
)}
<Text
@@ -196,7 +231,7 @@ export function ChatListItem({
)}
<ConvoMenu
convo={convo}
profile={otherUser}
profile={profile}
control={menuControl}
currentScreen="list"
showMarkAsRead={convo.unreadCount > 0}
@@ -204,6 +239,7 @@ export function ChatListItem({
triggerOpacity={
!gtMobile || showActions || menuControl.isOpen ? 1 : 0
}
moderation={moderation}
/>
</View>
</View>