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

Add ability to report a group chat (#10485)

Browse Source
This commit is contained in:
DS Boyce
2026-05-27 09:30:33 -07:00
committed by GitHub
parent 731f32abda
commit 4e4e1e1190
15 changed files with 452 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
eslint-suppressions.json
-5
View File
@@ -202,11 +202,6 @@
"count": 2
}
},
"src/components/moderation/ReportDialog/index.tsx": {
"@typescript-eslint/no-explicit-any": {
"count": 1
}
},
"src/features/liveNow/index.tsx": {
"@typescript-eslint/no-explicit-any": {
"count": 3
src/components/dms/AfterReportConversationDialog.tsx
+258
View File
@@ -0,0 +1,258 @@
import {memo, useState} from 'react'
import {View} from 'react-native'
import {type AppBskyActorDefs} from '@atproto/api'
import {Trans, useLingui} from '@lingui/react/macro'
import {StackActions, useNavigation} from '@react-navigation/native'
import {type NavigationProp} from '#/lib/routes/types'
import {useProfileShadow} from '#/state/cache/profile-shadow'
import {useLeaveConvo} from '#/state/queries/messages/leave-conversation'
import {
useProfileBlockMutationQueue,
useProfileQuery,
} from '#/state/queries/profile'
import {atoms as a, 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 * as Toast from '#/components/Toast'
import {Text} from '#/components/Typography'
import {IS_NATIVE} from '#/env'
type ReportDialogParams = {
convoId: string
did: string
}
/**
* Dialog shown after a report is submitted, allowing the user to block the
* reporter and/or leave the conversation.
*/
export const AfterReportConversationDialog = memo(
function BlockOrLeaveDialogInner({
control,
params,
currentScreen,
}: {
control: Dialog.DialogControlProps
params: ReportDialogParams
currentScreen: 'list' | 'conversation'
}): React.ReactNode {
const {t: l} = useLingui()
return (
<Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
<Dialog.Handle />
<Dialog.ScrollableInner
label={l`Would you like to block this user and/or leave 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 t = useTheme()
const {t: l} = useLingui()
const control = Dialog.useDialogContext()
const {
data: profile,
isPending,
isError,
} = useProfileQuery({
did: params.did,
})
return isPending ? (
<View style={[a.w_full, a.py_5xl, a.align_center]}>
<Loader size="lg" />
</View>
) : isError || !profile ? (
<View style={[a.w_full, a.gap_lg]}>
<View style={[a.justify_center, a.gap_sm]}>
<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>
<Button
label={l`Close`}
onPress={() => control.close()}
size="large"
color="secondary">
<ButtonText>
<Trans>Close</Trans>
</ButtonText>
</Button>
</View>
) : (
<DoneStep
convoId={params.convoId}
currentScreen={currentScreen}
profile={profile}
/>
)
}
function DoneStep({
convoId,
currentScreen,
profile,
}: {
convoId: string
currentScreen: 'list' | 'conversation'
profile: AppBskyActorDefs.ProfileViewDetailed
}) {
const {t: l} = 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 handleActionsChange = (newActions: string[]) => {
const hadBlock = actions.includes('block')
const hasBlock = newActions.includes('block')
// If block was just checked, ensure leave is also checked
if (!hadBlock && hasBlock) {
if (!newActions.includes('leave')) {
setActions([...newActions, 'leave'])
} else {
setActions(newActions)
}
}
// If block was just unchecked, also uncheck leave
else if (hadBlock && !hasBlock) {
setActions(newActions.filter(action => action !== 'leave'))
}
// Otherwise, use the new actions as-is (user can toggle leave independently)
else {
setActions(newActions)
}
}
const {mutate: leaveConvo} = useLeaveConvo(convoId, {
onMutate: () => {
if (currentScreen === 'conversation') {
navigation.dispatch(
StackActions.replace('Messages', IS_NATIVE ? {animation: 'pop'} : {}),
)
}
},
onError: () => {
Toast.show(l`Could not leave chat`, {
type: 'error',
})
},
})
let btnText = l`Done`
let toastMsg: string | undefined
if (actions.includes('leave') && actions.includes('block')) {
btnText = l({
message: 'Block and leave',
context: 'button',
comment: 'After-report action for a conversation',
})
toastMsg = l({message: 'Conversation left', context: 'toast'})
} else if (actions.includes('leave')) {
btnText = l({
message: 'Leave conversation',
context: 'button',
comment: 'After-report action for a conversation',
})
toastMsg = l({message: 'Conversation left', context: 'toast'})
} else if (actions.includes('block')) {
// Shouldn't be able to reach this, but here for completeness.
btnText = l({
message: 'Block user',
context: 'button',
comment: 'After-report action for a conversation',
})
toastMsg = l({message: 'User blocked', context: 'toast'})
}
const onPressPrimaryAction = () => {
control.close(() => {
if (actions.includes('block')) {
void queueBlock()
}
if (actions.includes('leave')) {
leaveConvo()
}
if (toastMsg) {
Toast.show(toastMsg, {
type: 'success',
})
}
})
}
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={l`Block user and/or leave this conversation`}
values={actions}
onChange={handleActionsChange}>
<View style={[a.gap_md]}>
<Toggle.Item name="block" label={l`Block user`}>
<Toggle.Checkbox />
<Toggle.LabelText style={[a.text_md]}>
<Trans>Block user</Trans>
</Toggle.LabelText>
</Toggle.Item>
<Toggle.Item
name="leave"
label={l`Leave conversation`}
disabled={actions.includes('block')}>
<Toggle.Checkbox />
<Toggle.LabelText style={[a.text_md]}>
<Trans>Leave 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={l`Close`}
onPress={() => control.close()}
size="large"
color="secondary">
<ButtonText>
<Trans>Close</Trans>
</ButtonText>
</Button>
</View>
</View>
)
}
src/components/dms/AfterReportDialog.tsx
+22 -27
View File
@@ -1,9 +1,7 @@
import {memo, useState} from 'react'
import {View} from 'react-native'
import {type AppBskyActorDefs, type ChatBskyConvoDefs} from '@atproto/api'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/react/macro'
import {type AppBskyActorDefs} from '@atproto/api'
import {Trans, useLingui} from '@lingui/react/macro'
import {StackActions, useNavigation} from '@react-navigation/native'
import {type NavigationProp} from '#/lib/routes/types'
@@ -24,7 +22,7 @@ import {IS_NATIVE} from '#/env'
type ReportDialogParams = {
convoId: string
message: ChatBskyConvoDefs.MessageView
did: string
}
/**
@@ -40,14 +38,12 @@ export const AfterReportDialog = memo(function BlockOrDeleteDialogInner({
params: ReportDialogParams
currentScreen: 'list' | 'conversation'
}): React.ReactNode {
const {_} = useLingui()
const {t: l} = useLingui()
return (
<Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
<Dialog.Handle />
<Dialog.ScrollableInner
label={_(
msg`Would you like to block this user and/or delete this conversation?`,
)}
label={l`Would you like to block this user and/or delete this conversation?`}
style={[web({maxWidth: 400})]}>
<DialogInner params={params} currentScreen={currentScreen} />
<Dialog.Close />
@@ -64,14 +60,14 @@ function DialogInner({
currentScreen: 'list' | 'conversation'
}) {
const t = useTheme()
const {_} = useLingui()
const {t: l} = useLingui()
const control = Dialog.useDialogContext()
const {
data: profile,
isPending,
isError,
} = useProfileQuery({
did: params.message.sender.did,
did: params.did,
})
return isPending ? (
@@ -90,7 +86,7 @@ function DialogInner({
</View>
<Button
label={_(msg`Close`)}
label={l`Close`}
onPress={() => control.close()}
size={platform({native: 'small', web: 'large'})}
color="secondary">
@@ -117,7 +113,7 @@ function DoneStep({
currentScreen: 'list' | 'conversation'
profile: AppBskyActorDefs.ProfileViewDetailed
}) {
const {_} = useLingui()
const {t: l} = useLingui()
const navigation = useNavigation<NavigationProp>()
const control = Dialog.useDialogContext()
const {gtMobile} = useBreakpoints()
@@ -135,29 +131,29 @@ function DoneStep({
}
},
onError: () => {
Toast.show(_(msg`Could not leave chat`), {
Toast.show(l`Could not leave chat`, {
type: 'error',
})
},
})
let btnText = _(msg`Done`)
let btnText = l`Done`
let toastMsg: string | undefined
if (actions.includes('leave') && actions.includes('block')) {
btnText = _(msg`Block and Delete`)
toastMsg = _(msg({message: 'Conversation deleted', context: 'toast'}))
btnText = l`Block and delete`
toastMsg = l({message: 'Conversation deleted', context: 'toast'})
} else if (actions.includes('leave')) {
btnText = _(msg`Delete Conversation`)
toastMsg = _(msg({message: 'Conversation deleted', context: 'toast'}))
btnText = l`Delete conversation`
toastMsg = l({message: 'Conversation deleted', context: 'toast'})
} else if (actions.includes('block')) {
btnText = _(msg`Block User`)
toastMsg = _(msg({message: 'User blocked', context: 'toast'}))
btnText = l`Block user`
toastMsg = l({message: 'User blocked', context: 'toast'})
}
const onPressPrimaryAction = () => {
control.close(() => {
if (actions.includes('block')) {
queueBlock()
void queueBlock()
}
if (actions.includes('leave')) {
leaveConvo()
@@ -181,17 +177,17 @@ function DoneStep({
</Text>
</View>
<Toggle.Group
label={_(msg`Block user and/or delete this conversation`)}
label={l`Block user and/or delete this conversation`}
values={actions}
onChange={setActions}>
<View style={[a.gap_md]}>
<Toggle.Item name="block" label={_(msg`Block user`)}>
<Toggle.Item name="block" label={l`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.Item name="leave" label={l`Delete conversation`}>
<Toggle.Checkbox />
<Toggle.LabelText style={[a.text_md]}>
<Trans>Delete conversation</Trans>
@@ -199,7 +195,6 @@ function DoneStep({
</Toggle.Item>
</View>
</Toggle.Group>
<View style={[a.gap_sm]}>
<Button
label={btnText}
@@ -209,7 +204,7 @@ function DoneStep({
<ButtonText>{btnText}</ButtonText>
</Button>
<Button
label={_(msg`Close`)}
label={l`Close`}
onPress={() => control.close()}
size="large"
color="secondary">
src/components/dms/ConvoMenu.tsx
+20 -3
View File
@@ -22,7 +22,7 @@ import {Button, ButtonIcon} from '#/components/Button'
import {AfterReportDialog} from '#/components/dms/AfterReportDialog'
import {BlockedByListDialog} from '#/components/dms/BlockedByListDialog'
import {LeaveConvoPrompt} from '#/components/dms/LeaveConvoPrompt'
import {ReportConversationPrompt} from '#/components/dms/ReportConversationPrompt'
import {ReportConversationDialog} from '#/components/dms/ReportConversationDialog'
import {ArrowBoxLeft_Stroke2_Corner0_Rounded as ArrowBoxLeftIcon} from '#/components/icons/ArrowBoxLeft'
import {Bubble_Stroke2_Corner2_Rounded as BubbleIcon} from '#/components/icons/Bubble'
import {DotGrid3x1_Stroke2_Corner0_Rounded as DotsHorizontalIcon} from '#/components/icons/DotGrid'
@@ -39,6 +39,7 @@ import {ReportDialog} from '#/components/moderation/ReportDialog'
import * as Prompt from '#/components/Prompt'
import * as Toast from '#/components/Toast'
import type * as bsky from '#/types/bsky'
import {AfterReportConversationDialog} from './AfterReportConversationDialog'
let ConvoMenu = ({
convo,
@@ -71,6 +72,7 @@ let ConvoMenu = ({
const reportControl = Prompt.usePromptControl()
const blockedByListControl = Prompt.usePromptControl()
const blockOrDeleteControl = Prompt.usePromptControl()
const deleteControl = Prompt.usePromptControl()
const {listBlocks} = blockInfo
@@ -141,12 +143,27 @@ let ConvoMenu = ({
currentScreen={currentScreen}
params={{
convoId: convo.id,
message: latestReportableMessage,
did: latestReportableMessage.sender.did,
}}
/>
</>
) : (
<ReportConversationPrompt control={reportControl} />
<>
<ReportConversationDialog
control={reportControl}
convoId={convo.id}
did={profile.did}
onAfterSubmit={deleteControl.open}
/>
<AfterReportConversationDialog
control={deleteControl}
currentScreen={currentScreen}
params={{
convoId: convo.id,
did: profile.did,
}}
/>
</>
)}
<BlockedByListDialog
control={blockedByListControl}
src/components/dms/MessageContextMenu.tsx
+1 -1
View File
@@ -214,7 +214,7 @@ export let MessageContextMenu = ({
currentScreen="conversation"
params={{
convoId: convo.convo.view.id,
message,
did: message.sender.did,
}}
/>
<Prompt.Basic
src/components/dms/ReportConversationDialog.tsx
+22
View File
@@ -0,0 +1,22 @@
import {type DialogControlProps} from '#/components/Dialog'
import {ReportDialog} from '#/components/moderation/ReportDialog'
export function ReportConversationDialog({
control,
convoId,
did,
onAfterSubmit,
}: {
control: DialogControlProps
convoId: string
did: string
onAfterSubmit?: () => void
}) {
return (
<ReportDialog
control={control}
subject={{convoId, did}}
onAfterSubmit={onAfterSubmit}
/>
)
}
src/components/dms/ReportConversationPrompt.tsx
-26
View File
@@ -1,26 +0,0 @@
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {type DialogControlProps} from '#/components/Dialog'
import * as Prompt from '#/components/Prompt'
export function ReportConversationPrompt({
control,
}: {
control: DialogControlProps
}) {
const {_} = useLingui()
return (
<Prompt.Basic
control={control}
title={_(msg`Report conversation`)}
description={_(
msg`To report a conversation, please report one of its messages via the conversation screen. This lets our moderators understand the context of your issue.`,
)}
confirmButtonCta={_(msg`I understand`)}
onConfirm={() => {}}
showCancel={false}
/>
)
}
src/components/moderation/ReportDialog/action.ts
+15 -1
View File
@@ -55,7 +55,9 @@ export function useSubmitReportMutation() {
let report:
| ComAtprotoModerationCreateReport.InputSchema
| (Omit<ComAtprotoModerationCreateReport.InputSchema, 'subject'> & {
subject: $Typed<ChatBskyConvoDefs.MessageRef>
subject:
| $Typed<ChatBskyConvoDefs.MessageRef>
| $Typed<ChatBskyConvoDefs.ConvoRef>
})
switch (subject.type) {
@@ -99,6 +101,18 @@ export function useSubmitReportMutation() {
}
break
}
case 'convo': {
report = {
reasonType,
reason: state.details,
subject: {
$type: 'chat.bsky.convo.defs#convoRef',
convoId: subject.convoId,
did: subject.did,
},
}
break
}
}
if (__DEV__) {
src/components/moderation/ReportDialog/const.ts
+1 -1
View File
@@ -120,4 +120,4 @@ export const BSKY_LABELER_ONLY_REPORT_REASONS: Set<OzoneReportDefs.ReasonType> =
* moderation service.
*/
export const BSKY_LABELER_ONLY_SUBJECT_TYPES: Set<ParsedReportSubject['type']> =
new Set(['convoMessage', 'status'])
new Set(['convoMessage', 'convo', 'status'])
src/components/moderation/ReportDialog/copy.ts
+6
View File
@@ -60,6 +60,12 @@ export function useCopyForSubject(subject: ParsedReportSubject) {
}
}
}
case 'convo': {
return {
title: _(msg`Report this conversation`),
subtitle: _(msg`Why should this conversation be reviewed?`),
}
}
}
}, [_, subject])
}
src/components/moderation/ReportDialog/index.tsx
+46 -54
View File
@@ -8,9 +8,7 @@ import {
} from 'react'
import {Pressable, type ScrollView, View} from 'react-native'
import {type AppBskyLabelerDefs, BSKY_LABELER_DID} from '@atproto/api'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/react/macro'
import {Trans, useLingui} from '@lingui/react/macro'
import {wait} from '#/lib/async/wait'
import {getLabelingServiceTitle} from '#/lib/moderation'
@@ -93,9 +91,9 @@ export function ReportDialog(
* developer, but nevertheless we should have a graceful fallback.
*/
function Invalid() {
const {_} = useLingui()
const {t: l} = useLingui()
return (
<Dialog.ScrollableInner label={_(msg`Report dialog`)}>
<Dialog.ScrollableInner label={l`Report dialog`}>
<Text style={[a.font_bold, a.text_xl, a.leading_snug, a.pb_xs]}>
<Trans>Invalid report subject</Trans>
</Text>
@@ -114,7 +112,7 @@ function Inner(props: ReportDialogProps) {
const ax = useAnalytics()
const logger = ax.logger.useChild(ax.logger.Context.ReportDialog)
const t = useTheme()
const {_} = useLingui()
const {t: l} = useLingui()
const ref = useRef<ScrollView>(null)
const {
data: allLabelers,
@@ -131,8 +129,8 @@ function Inner(props: ReportDialogProps) {
* Submission handling
*/
const {mutateAsync: submitReport} = useSubmitReportMutation()
const [isPending, setPending] = useState(false)
const [isSuccess, setSuccess] = useState(false)
const [isPending, setIsPending] = useState(false)
const [isSuccess, setIsSuccess] = useState(false)
// some reasons ONLY go to Bluesky
const isBskyOnlyReason = state?.selectedOption?.reason
@@ -154,7 +152,10 @@ function Inner(props: ReportDialogProps) {
if (subjectTypes === undefined) return true
if (props.subject.type === 'account') {
return subjectTypes.includes('account')
} else if (props.subject.type === 'convoMessage') {
} else if (
props.subject.type === 'convoMessage' ||
props.subject.type === 'convo'
) {
return subjectTypes.includes('chat')
} else {
return subjectTypes.includes('record')
@@ -164,7 +165,11 @@ function Inner(props: ReportDialogProps) {
const collections: string[] | undefined = l.subjectCollections
if (collections === undefined) return true
// all chat collections accepted, since only Bluesky handles chats
if (props.subject.type === 'convoMessage') return true
if (
props.subject.type === 'convoMessage' ||
props.subject.type === 'convo'
)
return true
return collections.includes(props.subject.nsid)
})
.filter(l => {
@@ -208,7 +213,7 @@ function Inner(props: ReportDialogProps) {
logger.info('submitting')
try {
setPending(true)
setIsPending(true)
// wait at least 1s, make it feel substantial
await wait(
1e3,
@@ -217,7 +222,7 @@ function Inner(props: ReportDialogProps) {
state,
}),
)
setSuccess(true)
setIsSuccess(true)
ax.metric('reportDialog:success', {
reason: state.selectedOption?.reason ?? '',
labeler: state.selectedLabeler?.creator.handle ?? '',
@@ -229,29 +234,20 @@ function Inner(props: ReportDialogProps) {
props.onAfterSubmit?.()
})
}, 1e3)
} catch (e: any) {
} catch (err) {
const e = err as Error
ax.metric('reportDialog:failure', {})
logger.error(e, {
source: 'ReportDialog',
})
dispatch({
type: 'setError',
error: _(msg`Something went wrong. Please try again.`),
error: l`Something went wrong. Please try again.`,
})
} finally {
setPending(false)
setIsPending(false)
}
}, [
_,
submitReport,
state,
dispatch,
props.subject,
props.control,
props.onAfterSubmit,
setPending,
setSuccess,
])
}, [logger, submitReport, props, state, ax, l])
useCallOnce(() => {
ax.metric('reportDialog:open', {
@@ -262,7 +258,7 @@ function Inner(props: ReportDialogProps) {
return (
<Dialog.ScrollableInner
testID="report:dialog"
label={_(msg`Report dialog`)}
label={l`Report dialog`}
ref={ref}
style={[a.w_full, {maxWidth: 500}]}>
<View style={[a.gap_2xl, IS_NATIVE && a.pt_md]}>
@@ -293,8 +289,8 @@ function Inner(props: ReportDialogProps) {
</Admonition.Content>
<Admonition.Button
color="negative_subtle"
label={_(msg`Retry loading report options`)}
onPress={() => refetchLabelers()}>
label={l`Retry loading report options`}
onPress={() => void refetchLabelers()}>
<ButtonText>
<Trans>Retry</Trans>
</ButtonText>
@@ -311,7 +307,7 @@ function Inner(props: ReportDialogProps) {
</View>
<Button
testID="report:clearCategory"
label={_(msg`Change report category`)}
label={l`Change report category`}
size="tiny"
variant="solid"
color="secondary"
@@ -341,9 +337,7 @@ function Inner(props: ReportDialogProps) {
{['post', 'account'].includes(props.subject.type) && (
<Link
to={SUPPORT_PAGE}
label={_(
msg`Need to report a copyright violation, legal request, or regulatory compliance issue?`,
)}>
label={l`Need to report a copyright violation, legal request, or regulatory compliance issue?`}>
{({hovered, pressed}) => (
<View
style={[
@@ -381,7 +375,7 @@ function Inner(props: ReportDialogProps) {
<StepOuter>
<StepTitle
index={2}
title={_(msg`Select a reason`)}
title={l`Select a reason`}
activeIndex1={state.activeStepIndex1}
/>
{state.selectedOption ? (
@@ -391,7 +385,7 @@ function Inner(props: ReportDialogProps) {
</View>
<Button
testID="report:clearReportOption"
label={_(msg`Change report reason`)}
label={l`Change report reason`}
size="tiny"
variant="solid"
color="secondary"
@@ -431,7 +425,7 @@ function Inner(props: ReportDialogProps) {
<StepOuter>
<StepTitle
index={3}
title={_(msg`Select moderation service`)}
title={l`Select moderation service`}
activeIndex1={state.activeStepIndex1}
/>
{state.activeStepIndex1 >= 3 && (
@@ -446,7 +440,7 @@ function Inner(props: ReportDialogProps) {
<LabelerCard labeler={state.selectedLabeler} />
</View>
<Button
label={_(msg`Change moderation service`)}
label={l`Change moderation service`}
size="tiny"
variant="solid"
color="secondary"
@@ -509,7 +503,7 @@ function Inner(props: ReportDialogProps) {
<StepOuter>
<StepTitle
index={isAlwaysBskyLabeler ? 3 : 4}
title={_(msg`Submit report`)}
title={l`Submit report`}
activeIndex1={
isAlwaysBskyLabeler
? state.activeStepIndex1 - 1
@@ -529,7 +523,7 @@ function Inner(props: ReportDialogProps) {
</Trans>{' '}
{!state.detailsOpen ? (
<InlineLinkText
label={_(msg`Add more details (optional)`)}
label={l`Add more details (optional)`}
{...createStaticClick(() => {
dispatch({type: 'showDetails'})
})}>
@@ -547,7 +541,7 @@ function Inner(props: ReportDialogProps) {
onChangeText={details => {
dispatch({type: 'setDetails', details})
}}
label={_(msg`Additional details (limit 300 characters)`)}
label={l`Additional details (limit 300 characters)`}
style={{paddingRight: 60}}
numberOfLines={4}
/>
@@ -570,12 +564,12 @@ function Inner(props: ReportDialogProps) {
</View>
<Button
testID="report:submit"
label={_(msg`Submit report`)}
label={l`Submit report`}
size="large"
variant="solid"
color="primary"
disabled={isPending || isSuccess}
onPress={onSubmit}>
onPress={() => void onSubmit()}>
<ButtonText>
<Trans>Submit report</Trans>
</ButtonText>
@@ -702,7 +696,7 @@ function CategoryCard({
onSelect?: (option: ReportCategoryConfig) => void
}) {
const t = useTheme()
const {_} = useLingui()
const {t: l} = useLingui()
const gutters = useGutters(['compact'])
const onPress = useCallback(() => {
onSelect?.(option)
@@ -710,7 +704,7 @@ function CategoryCard({
return (
<Button
testID={`report:category:${option.title}`}
label={_(msg`Create report for ${option.title}`)}
label={l`Create report for ${option.title}`}
onPress={onPress}
disabled={!onSelect}>
{({hovered, pressed}) => (
@@ -747,7 +741,7 @@ function OptionCard({
onSelect?: (option: ReportOption) => void
}) {
const t = useTheme()
const {_} = useLingui()
const {t: l} = useLingui()
const gutters = useGutters(['compact'])
const onPress = useCallback(() => {
onSelect?.(option)
@@ -755,13 +749,11 @@ function OptionCard({
return (
<Button
testID={`report:option:${option.title}`}
label={_(
msg({
message: `Create report for ${option.title}`,
comment:
'Accessibility label for button to create a moderation report for the selected option',
}),
)}
label={l({
message: `Create report for ${option.title}`,
comment:
'Accessibility label for button to create a moderation report for the selected option',
})}
onPress={onPress}
disabled={!onSelect}>
{({hovered, pressed}) => (
@@ -810,7 +802,7 @@ function LabelerCard({
onSelect?: (option: AppBskyLabelerDefs.LabelerViewDetailed) => void
}) {
const t = useTheme()
const {_} = useLingui()
const {t: l} = useLingui()
const onPress = useCallback(() => {
onSelect?.(labeler)
}, [onSelect, labeler])
@@ -821,7 +813,7 @@ function LabelerCard({
return (
<Button
testID={`report:labeler:${labeler.creator.handle}`}
label={_(msg`Send report to ${title}`)}
label={l`Send report to ${title}`}
onPress={onPress}
disabled={!onSelect}>
{({hovered, pressed}) => (
src/components/moderation/ReportDialog/types.ts
+10 -1
View File
@@ -8,12 +8,17 @@ import {
import type * as Dialog from '#/components/Dialog'
export type ReportSubjectConvo = {
export type ReportSubjectConvoMessage = {
view: 'convo' | 'message'
convoId: string
message: ChatBskyConvoDefs.MessageView
}
export type ReportSubjectConvo = {
convoId: string
did: string
}
export type ReportSubject =
| $Typed<AppBskyActorDefs.ProfileViewBasic>
| $Typed<AppBskyActorDefs.ProfileView>
@@ -23,6 +28,7 @@ export type ReportSubject =
| $Typed<AppBskyFeedDefs.GeneratorView>
| $Typed<AppBskyGraphDefs.StarterPackView>
| $Typed<AppBskyFeedDefs.PostView>
| ReportSubjectConvoMessage
| ReportSubjectConvo
export type ParsedReportSubject =
@@ -70,6 +76,9 @@ export type ParsedReportSubject =
}
| ({
type: 'convoMessage'
} & ReportSubjectConvoMessage)
| ({
type: 'convo'
} & ReportSubjectConvo)
export type ReportDialogProps = {
src/components/moderation/ReportDialog/utils/parseReportSubject.ts
+9 -2
View File
@@ -17,9 +17,16 @@ export function parseReportSubject(
if (!subject) return
if ('convoId' in subject) {
if ('message' in subject) {
return {
type: 'convoMessage',
...subject,
}
}
return {
type: 'convoMessage',
...subject,
type: 'convo',
convoId: subject.convoId,
did: subject.did,
}
}
src/screens/Messages/ConversationSettings/index.tsx
+41 -36
View File
@@ -31,6 +31,8 @@ import {atoms as a, useTheme} from '#/alf'
import {AvatarBubbles} from '#/components/AvatarBubbles'
import {Button, type ButtonColor, ButtonIcon} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {AfterReportConversationDialog} from '#/components/dms/AfterReportConversationDialog'
import {ReportConversationDialog} from '#/components/dms/ReportConversationDialog'
import {
type ConvoWithDetails,
type GroupConvoMember,
@@ -330,8 +332,7 @@ function SettingsHeader({
const {joinLink} = convo.details
const isJoinLinkEnabled = isOwner || joinLink?.enabledStatus === 'enabled'
// TODO Enable this once the feature is working end-to-end. -dsb
const isReportLinkEnabled = false
const reportSubjectDid = convo.primaryMember?.did
const {mutate: editGroupName, isPending: isEditingName} =
useEditGroupChatName(convo.view.id, {
@@ -402,30 +403,8 @@ function SettingsHeader({
const editNamePrompt = Prompt.usePromptControl()
const lockChatPrompt = Prompt.usePromptControl()
const leaveChatPrompt = Prompt.usePromptControl()
const handleToggleMute = () => {
muteConvo({mute: !convo.view.muted})
}
// TODO Need to implement this when the backend is ready. -dsb
const handleReportChat = () => {}
const handlePromptName = () => {
setNewGroupName(groupName)
editNamePrompt.open()
}
const handleEditName = () => {
editGroupName({name: newGroupName})
}
const handleConfirmLock = () => {
lockConvo({lock: true})
}
const handleUnlock = () => {
lockConvo({lock: false})
}
const reportControl = Prompt.usePromptControl()
const deleteControl = Prompt.usePromptControl()
const createdAt = new Date(convo.details.createdAt)
@@ -486,7 +465,7 @@ function SettingsHeader({
: l`Mute this group chat`
}
text={convo.view.muted ? l`Muted` : l`Mute`}
onPress={handleToggleMute}
onPress={() => muteConvo({mute: !convo.view.muted})}
/>
{isOwner ? (
<SettingsButton
@@ -494,7 +473,10 @@ function SettingsHeader({
icon={EditIcon}
label={l`Edit this group chat’s name`}
text={l`Edit name`}
onPress={handlePromptName}
onPress={() => {
setNewGroupName(groupName)
editNamePrompt.open()
}}
/>
) : null}
{isJoinLinkEnabled ? (
@@ -522,20 +504,22 @@ function SettingsHeader({
}
text={lockStatus === 'locked' ? l`Locked` : l`Lock`}
onPress={
lockStatus === 'locked' ? handleUnlock : lockChatPrompt.open
lockStatus === 'locked'
? () => lockConvo({lock: false})
: lockChatPrompt.open
}
/>
) : null}
{!isOwner && isReportLinkEnabled && (
{!isOwner && reportSubjectDid ? (
<SettingsButton
disabled={!isReady}
icon={FlagIcon}
label={l`Report this group chat`}
text={l`Report`}
onPress={handleReportChat}
onPress={reportControl.open}
/>
)}
{!isOwner && (
) : null}
{!isOwner ? (
<SettingsButton
disabled={!isReady || isLeaving}
icon={ArrowBoxLeftIcon}
@@ -543,14 +527,14 @@ function SettingsHeader({
text={l`Leave`}
onPress={leaveChatPrompt.open}
/>
)}
) : null}
</View>
</View>
<EditNamePrompt
control={editNamePrompt}
value={newGroupName}
onChangeText={setNewGroupName}
onConfirm={handleEditName}
onConfirm={() => editGroupName({name: newGroupName})}
/>
{convo.primaryMember && (
<InviteLinkDialog
@@ -561,12 +545,33 @@ function SettingsHeader({
moderationOpts={moderationOpts}
/>
)}
<LockChatPrompt control={lockChatPrompt} onConfirm={handleConfirmLock} />
<LockChatPrompt
control={lockChatPrompt}
onConfirm={() => lockConvo({lock: true})}
/>
<LeaveChatPrompt
control={leaveChatPrompt}
groupName={groupName}
onConfirm={leaveConvo}
/>
{reportSubjectDid ? (
<>
<ReportConversationDialog
control={reportControl}
convoId={convo.view.id}
did={reportSubjectDid}
onAfterSubmit={deleteControl.open}
/>
<AfterReportConversationDialog
control={deleteControl}
currentScreen="conversation"
params={{
convoId: convo.view.id,
did: reportSubjectDid,
}}
/>
</>
) : null}
</>
)
}
src/screens/Messages/components/RequestButtons.tsx
+1 -1
View File
@@ -192,7 +192,7 @@ export function RejectMenu({
currentScreen={currentScreen}
params={{
convoId: convo.id,
message: lastMessage,
did: lastMessage.sender.did,
}}
/>
</>