From 8b3bfb3cf7459af59fb4535241a6251e35e88eb9 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Fri, 17 May 2024 17:56:58 -0500 Subject: Make generic convo report dialog (#4085) --- .../ReportDialog/SelectReportOptionView.tsx | 9 +- src/components/ReportDialog/types.ts | 2 + src/components/dms/ConvoMenu.tsx | 7 +- src/components/dms/MessageMenu.tsx | 7 +- src/components/dms/MessageReportDialog.tsx | 258 ----------------- src/components/dms/MessagesListBlockedFooter.tsx | 7 +- src/components/dms/ReportConversationPrompt.tsx | 27 -- src/components/dms/ReportDialog.tsx | 310 +++++++++++++++++++++ src/lib/moderation/useReportOptions.ts | 18 +- 9 files changed, 348 insertions(+), 297 deletions(-) delete mode 100644 src/components/dms/MessageReportDialog.tsx delete mode 100644 src/components/dms/ReportConversationPrompt.tsx create mode 100644 src/components/dms/ReportDialog.tsx (limited to 'src') diff --git a/src/components/ReportDialog/SelectReportOptionView.tsx b/src/components/ReportDialog/SelectReportOptionView.tsx index da3c43440..405384476 100644 --- a/src/components/ReportDialog/SelectReportOptionView.tsx +++ b/src/components/ReportDialog/SelectReportOptionView.tsx @@ -25,12 +25,10 @@ import {SquareArrowTopRight_Stroke2_Corner0_Rounded as SquareArrowTopRight} from import {Text} from '#/components/Typography' import {ReportDialogProps} from './types' -type ParamsWithMessages = ReportDialogProps['params'] | {type: 'message'} - export function SelectReportOptionView({ ...props }: { - params: ParamsWithMessages + params: ReportDialogProps['params'] labelers: AppBskyLabelerDefs.LabelerViewDetailed[] onSelectReportOption: (reportOption: ReportOption) => void goBack: () => void @@ -57,9 +55,12 @@ export function SelectReportOptionView({ } else if (props.params.type === 'feedgen') { title = _(msg`Report this feed`) description = _(msg`Why should this feed be reviewed?`) - } else if (props.params.type === 'message') { + } else if (props.params.type === 'convoMessage') { title = _(msg`Report this message`) description = _(msg`Why should this message be reviewed?`) + } else if (props.params.type === 'convoAccount') { + title = _(msg`Report this account`) + description = _(msg`Why should this account be reviewed?`) } return { diff --git a/src/components/ReportDialog/types.ts b/src/components/ReportDialog/types.ts index 0c8a1e077..5a1385652 100644 --- a/src/components/ReportDialog/types.ts +++ b/src/components/ReportDialog/types.ts @@ -12,4 +12,6 @@ export type ReportDialogProps = { type: 'account' did: string } + | {type: 'convoMessage'} + | {type: 'convoAccount'} } diff --git a/src/components/dms/ConvoMenu.tsx b/src/components/dms/ConvoMenu.tsx index 0e5cd12bf..50a528084 100644 --- a/src/components/dms/ConvoMenu.tsx +++ b/src/components/dms/ConvoMenu.tsx @@ -21,7 +21,7 @@ import * as Toast from '#/view/com/util/Toast' import {atoms as a, useTheme} from '#/alf' import {BlockedByListDialog} from '#/components/dms/BlockedByListDialog' import {LeaveConvoPrompt} from '#/components/dms/LeaveConvoPrompt' -import {ReportConversationPrompt} from '#/components/dms/ReportConversationPrompt' +import {ReportDialog} from '#/components/dms/ReportDialog' 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' @@ -205,7 +205,10 @@ let ConvoMenu = ({ convoId={convo.id} currentScreen={currentScreen} /> - + - + { - const {_} = useLingui() - return ( - - - - - - - - ) -} -MessageReportDialog = memo(MessageReportDialog) -export {MessageReportDialog} - -function DialogInner({message}: {message: ChatBskyConvoDefs.MessageView}) { - const [reportOption, setReportOption] = useState(null) - - return reportOption ? ( - setReportOption(null)} - /> - ) : ( - - ) -} - -function ReasonStep({ - setReportOption, -}: { - setReportOption: (reportOption: ReportOption) => void -}) { - const control = Dialog.useDialogContext() - - return ( - - ) -} - -function SubmitStep({ - message, - reportOption, - goBack, -}: { - message: ChatBskyConvoDefs.MessageView - reportOption: ReportOption - goBack: () => void -}) { - const {_} = useLingui() - const {gtMobile} = useBreakpoints() - const t = useTheme() - const [details, setDetails] = useState('') - const control = Dialog.useDialogContext() - const {getAgent} = useAgent() - - const { - mutate: submit, - error, - isPending: submitting, - } = useMutation({ - mutationFn: async () => { - const report = { - reasonType: reportOption.reason, - subject: { - $type: 'chat.bsky.convo.defs#messageRef', - messageId: message.id, - did: message.sender!.did, - } satisfies ChatBskyConvoDefs.MessageRef, - reason: details, - } satisfies ComAtprotoModerationCreateReport.InputSchema - - await getAgent().createModerationReport(report) - }, - onSuccess: () => { - control.close(() => { - Toast.show(_(msg`Thank you. Your report has been sent.`)) - }) - }, - }) - - return ( - - - - - - Report this message - - - - Your report will be sent to the Bluesky Moderation Service - - - - - - - - Reason: {reportOption.title} - - - - - - - Optionally provide additional information below: - - - - - - - - - - - - - {error && ( - - - There was an issue sending your report. Please check your internet - connection. - - - )} - - - - - ) -} - -function PreviewMessage({message}: {message: ChatBskyConvoDefs.MessageView}) { - const t = useTheme() - const rt = useMemo(() => { - return new RichTextAPI({text: message.text, facets: message.facets}) - }, [message.text, message.facets]) - - return ( - - - - - - - ) -} diff --git a/src/components/dms/MessagesListBlockedFooter.tsx b/src/components/dms/MessagesListBlockedFooter.tsx index a018b8623..7cf6f5852 100644 --- a/src/components/dms/MessagesListBlockedFooter.tsx +++ b/src/components/dms/MessagesListBlockedFooter.tsx @@ -12,7 +12,7 @@ import {useDialogControl} from '#/components/Dialog' import {Divider} from '#/components/Divider' import {BlockedByListDialog} from '#/components/dms/BlockedByListDialog' import {LeaveConvoPrompt} from '#/components/dms/LeaveConvoPrompt' -import {ReportConversationPrompt} from '#/components/dms/ReportConversationPrompt' +import {ReportDialog} from '#/components/dms/ReportDialog' import {Text} from '#/components/Typography' export function MessagesListBlockedFooter({ @@ -120,7 +120,10 @@ export function MessagesListBlockedFooter({ convoId={convoId} /> - + {}} - showCancel={false} - /> - ) -} diff --git a/src/components/dms/ReportDialog.tsx b/src/components/dms/ReportDialog.tsx new file mode 100644 index 000000000..e8ac0ed2f --- /dev/null +++ b/src/components/dms/ReportDialog.tsx @@ -0,0 +1,310 @@ +import React, {memo, useMemo, useState} from 'react' +import {View} from 'react-native' +import { + ChatBskyConvoDefs, + ComAtprotoModerationCreateReport, + RichText as RichTextAPI, +} from '@atproto/api' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useMutation} from '@tanstack/react-query' + +import {ReportOption} from '#/lib/moderation/useReportOptions' +import {isAndroid} from '#/platform/detection' +import {useAgent} from '#/state/session' +import {CharProgress} from '#/view/com/composer/char-progress/CharProgress' +import * as Toast from '#/view/com/util/Toast' +import {atoms as a, useBreakpoints, useTheme} from '#/alf' +import * as Dialog from '#/components/Dialog' +import {Button, ButtonIcon, ButtonText} from '../Button' +import {Divider} from '../Divider' +import {ChevronLeft_Stroke2_Corner0_Rounded as Chevron} from '../icons/Chevron' +import {Loader} from '../Loader' +import {SelectReportOptionView} from '../ReportDialog/SelectReportOptionView' +import {RichText} from '../RichText' +import {Text} from '../Typography' +import {MessageItemMetadata} from './MessageItem' + +type ReportDialogParams = + | { + type: 'convoAccount' + did: string + convoId: string + } + | { + type: 'convoMessage' + convoId: string + message: ChatBskyConvoDefs.MessageView + } + +let ReportDialog = ({ + control, + params, +}: { + control: Dialog.DialogControlProps + params: ReportDialogParams +}): React.ReactNode => { + const {_} = useLingui() + return ( + + + + + + + + ) +} +ReportDialog = memo(ReportDialog) +export {ReportDialog} + +function DialogInner({params}: {params: ReportDialogParams}) { + const [reportOption, setReportOption] = useState(null) + + return reportOption ? ( + setReportOption(null)} + /> + ) : ( + + ) +} + +function ReasonStep({ + setReportOption, + params, +}: { + setReportOption: (reportOption: ReportOption) => void + params: ReportDialogParams +}) { + const control = Dialog.useDialogContext() + + return ( + + ) +} + +function SubmitStep({ + params, + reportOption, + goBack, +}: { + params: ReportDialogParams + reportOption: ReportOption + goBack: () => void +}) { + const {_} = useLingui() + const {gtMobile} = useBreakpoints() + const t = useTheme() + const [details, setDetails] = useState('') + const control = Dialog.useDialogContext() + const {getAgent} = useAgent() + + const { + mutate: submit, + error, + isPending: submitting, + } = useMutation({ + mutationFn: async () => { + if (params.type === 'convoMessage') { + const {convoId, message} = params + + const report = { + reasonType: reportOption.reason, + subject: { + $type: 'chat.bsky.convo.defs#messageRef', + messageId: message.id, + convoId, + did: message.sender.did, + } satisfies ChatBskyConvoDefs.MessageRef, + reason: details, + } satisfies ComAtprotoModerationCreateReport.InputSchema + + await getAgent().createModerationReport(report) + } else if (params.type === 'convoAccount') { + const {convoId, did} = params + + await getAgent().createModerationReport({ + reasonType: reportOption.reason, + subject: { + $type: 'com.atproto.admin.defs#repoRef', + did, + }, + reason: details + ` — from:dms:${convoId}`, + }) + } + }, + onSuccess: () => { + control.close(() => { + Toast.show(_(msg`Thank you. Your report has been sent.`)) + }) + }, + }) + + const copy = useMemo(() => { + return { + convoMessage: { + title: _(msg`Report this message`), + }, + convoAccount: { + title: _(msg`Report this account`), + }, + }[params.type] + }, [_, params]) + + return ( + + + + + {copy.title} + + + Your report will be sent to the Bluesky Moderation Service + + + + + {params.type === 'convoMessage' && ( + + )} + + + + Reason: + {' '} + {reportOption.title} + + + + + + + Optionally provide additional information below: + + + + + + + + + + + + + {error && ( + + + There was an issue sending your report. Please check your internet + connection. + + + )} + + + + + ) +} + +function PreviewMessage({message}: {message: ChatBskyConvoDefs.MessageView}) { + const t = useTheme() + const rt = useMemo(() => { + return new RichTextAPI({text: message.text, facets: message.facets}) + }, [message.text, message.facets]) + + return ( + + + + + + + ) +} diff --git a/src/lib/moderation/useReportOptions.ts b/src/lib/moderation/useReportOptions.ts index ff12534c2..6533004c4 100644 --- a/src/lib/moderation/useReportOptions.ts +++ b/src/lib/moderation/useReportOptions.ts @@ -15,7 +15,8 @@ interface ReportOptions { list: ReportOption[] feedgen: ReportOption[] other: ReportOption[] - message: ReportOption[] + convoMessage: ReportOption[] + convoAccount: ReportOption[] } export function useReportOptions(): ReportOptions { @@ -73,7 +74,20 @@ export function useReportOptions(): ReportOptions { }, ...common, ], - message: [ + convoMessage: [ + { + reason: ComAtprotoModerationDefs.REASONSPAM, + title: _(msg`Spam`), + description: _(msg`Excessive or unwanted messages`), + }, + { + reason: ComAtprotoModerationDefs.REASONSEXUAL, + title: _(msg`Unwanted Sexual Content`), + description: _(msg`Inappropriate messages or explicit links`), + }, + ...common, + ], + convoAccount: [ { reason: ComAtprotoModerationDefs.REASONSPAM, title: _(msg`Spam`), -- cgit 1.4.1