zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

[🐴] Block states, read only (#4022) 

* Refactor ChatListItem for mod state

* Refactor Conversation Header for mod state

* Invalidate query for list when blocking/unblocking

* Remove unused prop, restore border

* Add mutations, hook up profile shadow to list query, use shadow-aware query for convo (#4024)
zio/stable
Eric Bailey 2024-05-14 20:07:53 -05:00 committed by GitHub
parent d390db0fa2
commit 6efe90a5f5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 250 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/dms/ConvoMenu.tsx
View File

@ -1,19 +1,27 @@
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 {Shadow} from '#/state/cache/types'
import {
useConvoQuery,
useMarkAsReadMutation,
} from '#/state/queries/messages/conversation'
import {useLeaveConvo} from '#/state/queries/messages/leave-conversation'
import {useMuteConvo} from '#/state/queries/messages/mute-conversation'
import {useProfileBlockMutationQueue} from '#/state/queries/profile'
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 +30,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 +44,35 @@ let ConvoMenu = ({
showMarkAsRead,
hideTrigger,
triggerOpacity,
moderation,
}: {
convo: ChatBskyConvoDefs.ConvoView
profile: AppBskyActorDefs.ProfileViewBasic
onUpdateConvo?: (convo: ChatBskyConvoDefs.ConvoView) => void
profile: Shadow<AppBskyActorDefs.ProfileViewBasic>
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, userBlock} = 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 isBlocking = !!userBlock || !!listBlocks.length
const {data: convo} = useConvoQuery(initialConvo)
@ -70,6 +93,21 @@ let ConvoMenu = ({
},
})
const [queueBlock, queueUnblock] = useProfileBlockMutationQueue(profile)
const toggleBlock = React.useCallback(() => {
if (listBlocks.length) {
blockedByListControl.open()
return
}
if (userBlock) {
queueUnblock()
} else {
queueBlock()
}
}, [userBlock, listBlocks, blockedByListControl, queueBlock, queueUnblock])
const {mutate: leaveConvo} = useLeaveConvo(convo?.id, {
onSuccess: () => {
if (currentScreen === 'conversation') {
@ -146,18 +184,16 @@ let ConvoMenu = ({
</Menu.Item>
</Menu.Group>
<Menu.Divider />
{/* TODO(samuel): implement this */}
<Menu.Group>
<Menu.Item
label={_(msg`Block account`)}
onPress={() => {}}
disabled>
label={
isBlocking ? _(msg`Unblock account`) : _(msg`Block account`)
}
onPress={toggleBlock}>
<Menu.ItemText>
<Trans>Block account</Trans>
{isBlocking ? _(msg`Unblock account`) : _(msg`Block account`)}
</Menu.ItemText>
<Menu.ItemIcon
icon={profile.viewer?.blocking ? PersonCheck : PersonX}
/>
<Menu.ItemIcon icon={isBlocking ? PersonX : PersonCheck} />
</Menu.Item>
<Menu.Item
label={_(msg`Report conversation`)}
@ -202,6 +238,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>
</>
)
}

112
src/screens/Messages/Conversation/index.tsx
View File

@ -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,12 @@ 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 {useProfileQuery} from '#/state/queries/profile'
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 +31,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'
@ -137,7 +142,7 @@ function Inner() {
}
let Header = ({
profile,
profile: initialProfile,
}: {
profile?: AppBskyActorDefs.ProfileViewBasic
}): React.ReactNode => {
@ -145,12 +150,8 @@ let Header = ({
const {_} = useLingui()
const {gtTablet} = useBreakpoints()
const navigation = useNavigation<NavigationProp>()
const convoState = useConvo()
const isDeletedAccount = profile?.handle === 'missing.invalid'
const displayName = isDeletedAccount
? 'Deleted Account'
: profile?.displayName
const moderationOpts = useModerationOpts()
const {data: profile} = useProfileQuery({did: initialProfile?.did})
const onPressBack = useCallback(() => {
if (isWeb) {
@ -195,23 +196,12 @@ let Header = ({
) : (
<View style={{width: 30}} />
)}
<View style={[a.align_center, a.gap_sm, a.flex_1]}>
{profile ? (
<View style={[a.align_center]}>
<PreviewableUserAvatar size={32} profile={profile} />
<Text
style={[a.text_lg, a.font_bold, a.pt_sm, a.pb_2xs]}
numberOfLines={1}>
{displayName}
</Text>
{!isDeletedAccount && (
<Text style={[t.atoms.text_contrast_medium]} numberOfLines={1}>
@{profile.handle}
</Text>
)}
</View>
) : (
<>
{profile && moderationOpts ? (
<HeaderReady profile={profile} moderationOpts={moderationOpts} />
) : (
<>
<View style={[a.align_center, a.gap_sm, a.flex_1]}>
<View
style={[
{width: 32, height: 32},
@ -234,19 +224,69 @@ let Header = ({
t.atoms.bg_contrast_25,
]}
/>
</>
)}
</View>
{isConvoActive(convoState) && profile ? (
<ConvoMenu
convo={convoState.convo}
profile={profile}
currentScreen="conversation"
/>
) : (
<View style={{width: 30}} />
</View>
<View style={{width: 30}} />
</>
)}
</View>
)
}
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 (
<>
<View style={[a.align_center, a.gap_sm, a.flex_1]}>
<View style={[a.align_center]}>
<PreviewableUserAvatar
size={32}
profile={profile}
moderation={moderation.ui('avatar')}
/>
<Text
style={[a.text_lg, a.font_bold, a.pt_sm, a.pb_2xs]}
numberOfLines={1}>
{displayName}
</Text>
{!isDeletedAccount && (
<Text style={[t.atoms.text_contrast_medium]} numberOfLines={1}>
@{profile.handle}
</Text>
)}
</View>
</View>
{isConvoActive(convoState) && (
<ConvoMenu
convo={convoState.convo}
profile={profile}
currentScreen="conversation"
moderation={moderation}
/>
)}
</>
)
}

70
src/screens/Messages/List/ChatListItem.tsx
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>

12
src/screens/Messages/List/index.tsx
View File

@ -29,14 +29,8 @@ import {ChatListItem} from './ChatListItem'
type Props = NativeStackScreenProps<MessagesTabNavigatorParams, 'Messages'>
function renderItem({
item,
index,
}: {
item: ChatBskyConvoDefs.ConvoView
index: number
}) {
return <ChatListItem convo={item} index={index} />
function renderItem({item}: {item: ChatBskyConvoDefs.ConvoView}) {
return <ChatListItem convo={item} />
}
function keyExtractor(item: ChatBskyConvoDefs.ConvoView) {
@ -232,6 +226,8 @@ function DesktopHeader({
a.gap_lg,
a.px_lg,
a.py_sm,
a.border_b,
t.atoms.border_contrast_low,
]}>
<Text style={[a.text_2xl, a.font_bold]}>
<Trans>Messages</Trans>

2
src/state/cache/profile-shadow.ts vendored
View File

@ -6,6 +6,7 @@ import EventEmitter from 'eventemitter3'
import {batchedUpdates} from '#/lib/batchedUpdates'
import {findAllProfilesInQueryData as findAllProfilesInActorSearchQueryData} from '../queries/actor-search'
import {findAllProfilesInQueryData as findAllProfilesInListMembersQueryData} from '../queries/list-members'
import {findAllProfilesInQueryData as findAllProfilesInListConvosQueryData} from '../queries/messages/list-converations'
import {findAllProfilesInQueryData as findAllProfilesInMyBlockedAccountsQueryData} from '../queries/my-blocked-accounts'
import {findAllProfilesInQueryData as findAllProfilesInMyMutedAccountsQueryData} from '../queries/my-muted-accounts'
import {findAllProfilesInQueryData as findAllProfilesInPostLikedByQueryData} from '../queries/post-liked-by'
@ -105,4 +106,5 @@ function* findProfilesInCache(
yield* findAllProfilesInProfileFollowsQueryData(queryClient, did)
yield* findAllProfilesInSuggestedFollowsQueryData(queryClient, did)
yield* findAllProfilesInActorSearchQueryData(queryClient, did)
yield* findAllProfilesInListConvosQueryData(queryClient, did)
}

33
src/state/queries/messages/list-converations.ts
View File

@ -1,6 +1,11 @@
import {useCallback, useMemo} from 'react'
import {ChatBskyConvoDefs, ChatBskyConvoListConvos} from '@atproto/api'
import {useInfiniteQuery, useQueryClient} from '@tanstack/react-query'
import {
InfiniteData,
QueryClient,
useInfiniteQuery,
useQueryClient,
} from '@tanstack/react-query'
import {useCurrentConvoId} from '#/state/messages/current-convo-id'
import {DM_SERVICE_HEADERS} from '#/state/queries/messages/const'
@ -140,3 +145,29 @@ function optimisticUpdate(
})),
}
}
export function* findAllProfilesInQueryData(
queryClient: QueryClient,
did: string,
) {
const queryDatas = queryClient.getQueriesData<
InfiniteData<ChatBskyConvoListConvos.OutputSchema>
>({
queryKey: RQKEY,
})
for (const [_queryKey, queryData] of queryDatas) {
if (!queryData?.pages) {
continue
}
for (const page of queryData.pages) {
for (const convo of page.convos) {
for (const member of convo.members) {
if (member.did === did) {
yield member
}
}
}
}
}
}