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

Replace DoneStep with separate dialog that opens after reporting

Browse Source
This commit is contained in:
Eric Bailey
2025-10-15 18:27:03 -05:00
parent b1c051466c
commit c083b53f53
6 changed files with 249 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dms/BlockOrDeleteDialog.tsx
+187
View File
@@ -0,0 +1,187 @@
import {memo, useState} from 'react'
import {View} from 'react-native'
import {type AppBskyActorDefs, type ChatBskyConvoDefs} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {StackActions, useNavigation} from '@react-navigation/native'
import type React from 'react'
import {type NavigationProp} from '#/lib/routes/types'
import {isNative} from '#/platform/detection'
import {useProfileShadow} from '#/state/cache/profile-shadow'
import {useLeaveConvo} from '#/state/queries/messages/leave-conversation'
import {
useProfileBlockMutationQueue,
useProfileQuery,
} from '#/state/queries/profile'
import * as Toast from '#/view/com/util/Toast'
import {atoms as a, platform, useBreakpoints, useTheme, web} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import * as Toggle from '#/components/forms/Toggle'
import {Loader} from '#/components/Loader'
import {Text} from '#/components/Typography'
type ReportDialogParams = {
convoId: string
message: ChatBskyConvoDefs.MessageView
}
export const BlockOrDeleteDialog = memo(function BlockOrDeleteDialogInner({
control,
params,
currentScreen,
}: {
control: Dialog.DialogControlProps
params: ReportDialogParams
currentScreen: 'list' | 'conversation'
}): React.ReactNode {
const {_} = useLingui()
return (
<Dialog.Outer control={control}>
<Dialog.Handle />
<Dialog.ScrollableInner
label={_(
msg`Would you like to block this account or delete this conversation?`,
)}
style={[web({maxWidth: 400})]}>
<DialogInner params={params} currentScreen={currentScreen} />
<Dialog.Close />
</Dialog.ScrollableInner>
</Dialog.Outer>
)
})
function DialogInner({
params,
currentScreen,
}: {
params: ReportDialogParams
currentScreen: 'list' | 'conversation'
}) {
const {data: profile} = useProfileQuery({
did: params.message.sender.did,
})
return profile ? (
<DoneStep
convoId={params.convoId}
currentScreen={currentScreen}
profile={profile}
/>
) : (
<View style={[a.w_full, a.py_5xl, a.align_center]}>
<Loader />
</View>
)
}
function DoneStep({
convoId,
currentScreen,
profile,
}: {
convoId: string
currentScreen: 'list' | 'conversation'
profile: AppBskyActorDefs.ProfileViewDetailed
}) {
const {_} = useLingui()
const navigation = useNavigation<NavigationProp>()
const control = Dialog.useDialogContext()
const {gtMobile} = useBreakpoints()
const t = useTheme()
const [actions, setActions] = useState<string[]>(['block', 'leave'])
const shadow = useProfileShadow(profile)
const [queueBlock] = useProfileBlockMutationQueue(shadow)
const {mutate: leaveConvo} = useLeaveConvo(convoId, {
onMutate: () => {
if (currentScreen === 'conversation') {
navigation.dispatch(
StackActions.replace('Messages', isNative ? {animation: 'pop'} : {}),
)
}
},
onError: () => {
Toast.show(_(msg`Could not leave chat`), 'xmark')
},
})
let btnText = _(msg`Done`)
let toastMsg: string | undefined
if (actions.includes('leave') && actions.includes('block')) {
btnText = _(msg`Block and Delete`)
toastMsg = _(msg({message: 'Conversation deleted', context: 'toast'}))
} else if (actions.includes('leave')) {
btnText = _(msg`Delete Conversation`)
toastMsg = _(msg({message: 'Conversation deleted', context: 'toast'}))
} else if (actions.includes('block')) {
btnText = _(msg`Block User`)
toastMsg = _(msg({message: 'User blocked', context: 'toast'}))
}
const onPressPrimaryAction = () => {
control.close(() => {
if (actions.includes('block')) {
queueBlock()
}
if (actions.includes('leave')) {
leaveConvo()
}
if (toastMsg) {
Toast.show(toastMsg, 'check')
}
})
}
return (
<View style={a.gap_2xl}>
<View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
<Text style={[a.text_2xl, a.font_semi_bold]}>
<Trans>Report submitted</Trans>
</Text>
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
<Trans>Our moderation team has received your report.</Trans>
</Text>
</View>
<Toggle.Group
label={_(msg`Block and/or delete this conversation`)}
values={actions}
onChange={setActions}>
<View style={[a.gap_md]}>
<Toggle.Item name="block" label={_(msg`Block user`)}>
<Toggle.Checkbox />
<Toggle.LabelText style={[a.text_md]}>
<Trans>Block user</Trans>
</Toggle.LabelText>
</Toggle.Item>
<Toggle.Item name="leave" label={_(msg`Delete conversation`)}>
<Toggle.Checkbox />
<Toggle.LabelText style={[a.text_md]}>
<Trans>Delete conversation</Trans>
</Toggle.LabelText>
</Toggle.Item>
</View>
</Toggle.Group>
<View style={[a.gap_sm]}>
<Button
label={btnText}
onPress={onPressPrimaryAction}
size="large"
color={actions.length > 0 ? 'negative' : 'primary'}>
<ButtonText>{btnText}</ButtonText>
</Button>
<Button
label={_(msg`Close`)}
onPress={() => control.close()}
size={platform({native: 'small', web: 'large'})}
color="secondary">
<ButtonText>
<Trans>Close</Trans>
</ButtonText>
</Button>
</View>
</View>
)
}
src/components/dms/ConvoMenu.tsx
+23 -8
View File
@@ -18,6 +18,7 @@ import {type ViewStyleProp} from '#/alf'
import {atoms as a} from '#/alf'
import {Button, ButtonIcon} from '#/components/Button'
import {BlockedByListDialog} from '#/components/dms/BlockedByListDialog'
import {BlockOrDeleteDialog} from '#/components/dms/BlockOrDeleteDialog'
import {LeaveConvoPrompt} from '#/components/dms/LeaveConvoPrompt'
import {ReportConversationPrompt} from '#/components/dms/ReportConversationPrompt'
import {ArrowBoxLeft_Stroke2_Corner0_Rounded as ArrowBoxLeft} from '#/components/icons/ArrowBoxLeft'
@@ -65,6 +66,7 @@ let ConvoMenu = ({
const leaveConvoControl = Prompt.usePromptControl()
const reportControl = Prompt.usePromptControl()
const blockedByListControl = Prompt.usePromptControl()
const blockOrDeleteControl = Prompt.usePromptControl()
const {listBlocks} = blockInfo
@@ -113,14 +115,27 @@ let ConvoMenu = ({
currentScreen={currentScreen}
/>
{latestReportableMessage ? (
<ReportDialog
subject={{
view: 'convo',
convoId: convo.id,
message: latestReportableMessage,
}}
control={reportControl}
/>
<>
<ReportDialog
subject={{
view: 'convo',
convoId: convo.id,
message: latestReportableMessage,
}}
control={reportControl}
onClose={() => {
blockOrDeleteControl.open()
}}
/>
<BlockOrDeleteDialog
control={blockOrDeleteControl}
currentScreen={currentScreen}
params={{
convoId: convo.id,
message: latestReportableMessage,
}}
/>
</>
) : (
<ReportConversationPrompt control={reportControl} />
)}
src/components/dms/MessageContextMenu.tsx
+13
View File
@@ -15,6 +15,7 @@ import {useSession} from '#/state/session'
import * as Toast from '#/view/com/util/Toast'
import * as ContextMenu from '#/components/ContextMenu'
import {type TriggerProps} from '#/components/ContextMenu/types'
import {BlockOrDeleteDialog} from '#/components/dms/BlockOrDeleteDialog'
import {BubbleQuestion_Stroke2_Corner0_Rounded as Translate} from '#/components/icons/Bubble'
import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard'
import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
@@ -37,6 +38,7 @@ export let MessageContextMenu = ({
const convo = useConvoActive()
const deleteControl = usePromptControl()
const reportControl = usePromptControl()
const blockOrDeleteControl = usePromptControl()
const langPrefs = useLanguagePrefs()
const translate = useTranslate()
@@ -178,6 +180,17 @@ export let MessageContextMenu = ({
convoId: convo.convo.id,
message,
}}
onClose={() => {
blockOrDeleteControl.open()
}}
/>
<BlockOrDeleteDialog
control={blockOrDeleteControl}
currentScreen="conversation"
params={{
convoId: convo.convo.id,
message,
}}
/>
<Prompt.Basic
src/components/moderation/ReportDialog/index.tsx
+2 -1
View File
@@ -60,7 +60,8 @@ export function ReportDialog(
)
const onClose = React.useCallback(() => {
logger.metric('reportDialog:close', {}, {statsig: false})
}, [])
props.onClose?.()
}, [props])
return (
<Dialog.Outer control={props.control} onClose={onClose}>
<Dialog.Handle />
src/components/moderation/ReportDialog/types.ts
+1
View File
@@ -68,4 +68,5 @@ export type ParsedReportSubject =
export type ReportDialogProps = {
control: Dialog.DialogOuterProps['control']
subject: ParsedReportSubject
onClose?: () => void
}
src/screens/Messages/components/RequestButtons.tsx
+23 -8
View File
@@ -25,6 +25,7 @@ import {
EmailDialogScreenID,
useEmailDialogControl,
} from '#/components/dialogs/EmailDialog'
import {BlockOrDeleteDialog} from '#/components/dms/BlockOrDeleteDialog'
import {CircleX_Stroke2_Corner0_Rounded} from '#/components/icons/CircleX'
import {Flag_Stroke2_Corner0_Rounded as FlagIcon} from '#/components/icons/Flag'
import {PersonX_Stroke2_Corner0_Rounded as PersonXIcon} from '#/components/icons/Person'
@@ -100,6 +101,7 @@ export function RejectMenu({
}, [queueBlock, leaveConvo, _])
const reportControl = useDialogControl()
const blockOrDeleteControl = useDialogControl()
const lastMessage = ChatBskyConvoDefs.isMessageView(convo.lastMessage)
? convo.lastMessage
@@ -162,14 +164,27 @@ export function RejectMenu({
</Menu.Outer>
</Menu.Root>
{lastMessage && (
<ReportDialog
subject={{
view: 'convo',
convoId: convo.id,
message: lastMessage,
}}
control={reportControl}
/>
<>
<ReportDialog
subject={{
view: 'convo',
convoId: convo.id,
message: lastMessage,
}}
control={reportControl}
onClose={() => {
blockOrDeleteControl.open()
}}
/>
<BlockOrDeleteDialog
control={blockOrDeleteControl}
currentScreen={currentScreen}
params={{
convoId: convo.id,
message: lastMessage,
}}
/>
</>
)}
</>
)