From bb1c482259f579e1a463e12b31fa1d6bf5fbb27a Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Sun, 23 Feb 2025 17:49:35 -0600 Subject: [PATCH] Cleanup --- .../moderation/ReportDialog/index.tsx | 50 +++++++++++-------- src/state/queries/labeler.ts | 6 +-- 2 files changed, 32 insertions(+), 24 deletions(-) diff --git a/src/components/moderation/ReportDialog/index.tsx b/src/components/moderation/ReportDialog/index.tsx index 1f113561bf..a2872a5da8 100644 --- a/src/components/moderation/ReportDialog/index.tsx +++ b/src/components/moderation/ReportDialog/index.tsx @@ -13,9 +13,9 @@ import {isNative} from '#/platform/detection' import {useMyLabelersQuery} from '#/state/queries/preferences' import {CharProgress} from '#/view/com/composer/char-progress/CharProgress' import {UserAvatar} from '#/view/com/util/UserAvatar' -import {atoms as a, useGutters,useTheme} from '#/alf' +import {atoms as a, useGutters, useTheme} from '#/alf' import {Admonition} from '#/components/Admonition' -import {Button, ButtonIcon,ButtonText} from '#/components/Button' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' import {useDelayedLoading} from '#/components/hooks/useDelayedLoading' import { @@ -24,7 +24,7 @@ import { } from '#/components/icons/Check' import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane' import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' -import {createStaticClick,InlineLinkText} from '#/components/Link' +import {createStaticClick, InlineLinkText} from '#/components/Link' import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' import {useSubmitReportMutation} from './action' @@ -32,7 +32,7 @@ import {useCopyForSubject} from './copy' import {initialState, reducer} from './state' import {ReportDialogProps, ReportSubject} from './types' import {parseReportSubject} from './utils/parseReportSubject' -import {ReportOption,useReportOptions} from './utils/useReportOptions' +import {ReportOption, useReportOptions} from './utils/useReportOptions' export {useDialogControl as useReportDialogControl} from '#/components/Dialog' @@ -48,21 +48,27 @@ export function ReportDialog( return ( - {subject ? : } + {subject && false ? : } ) } -// TODO +/** + * This should only be shown if the dialog is configured incorrectly by a + * developer, but nevertheless we should have a graceful fallback. + */ function Invalid() { const {_} = useLingui() return ( - + Invalid report subject - - This is a developer error. + + + Something wasn't quite right with the data you're trying to report. + Please contact support. + @@ -78,13 +84,17 @@ function Inner(props: ReportDialogProps) { error: labelersLoadError, } = useMyLabelersQuery({excludeNonConfigurableLabelers: true}) const isLoading = useDelayedLoading(500, isLabelerLoading) - const copy = useCopyForSubject(props.subject) - const allOptions = useReportOptions() - const options = allOptions[props.subject.type] - + const reportOptions = useReportOptions() const [state, dispatch] = React.useReducer(reducer, initialState) + /** + * Submission handling + */ + const {mutateAsync: submitReport} = useSubmitReportMutation() + const [isPending, setPending] = React.useState(false) + const [isSuccess, setSuccess] = React.useState(false) + /** * Labelers that support this `subject` and its NSID collection */ @@ -92,7 +102,7 @@ function Inner(props: ReportDialogProps) { if (!allLabelers) return [] return allLabelers .filter(l => { - // @ts-ignore + // @ts-expect-error TODO const subjectTypes: string[] | undefined = l.subjectTypes if (subjectTypes === undefined) return true if (props.subject.type === 'account') { @@ -104,7 +114,7 @@ function Inner(props: ReportDialogProps) { } }) .filter(l => { - // @ts-ignore + // @ts-expect-error TODO const collections: string[] | undefined = l.subjectCollections if (collections === undefined) return true // all chat collections accepted, since only Bluesky handles chats @@ -113,22 +123,19 @@ function Inner(props: ReportDialogProps) { }) .filter(l => { if (!state.selectedOption) return true - // @ts-ignore + // @ts-expect-error TODO const reasonTypes: string[] | undefined = l.reasonTypes if (reasonTypes === undefined) return true return reasonTypes.includes(state.selectedOption.reason) }) }, [props, allLabelers, state.selectedOption]) - const {mutateAsync: submitReport} = useSubmitReportMutation() - const [isPending, setPending] = React.useState(false) - const [isSuccess, setSuccess] = React.useState(false) - const onSubmit = React.useCallback(async () => { dispatch({type: 'clearError'}) try { setPending(true) + // wait at least 1s, make it feel substantial await wait( 1e3, submitReport({ @@ -137,6 +144,7 @@ function Inner(props: ReportDialogProps) { }), ) setSuccess(true) + // give time for user feedback setTimeout(() => { props.control.close() }, 1e3) @@ -198,7 +206,7 @@ function Inner(props: ReportDialogProps) { ) : ( - {options.map(o => ( + {reportOptions[props.subject.type].map(o => ( ({ ...view, reasonTypes: REASON_TYPES, - // @ts-ignore TODO subjectTypes: + // @ts-expect-error TODO view.creator.did === BSKY_MOD_SERVICE ? ['account', 'record', 'chat'] : ['account', 'record'], - // @ts-ignore TODO subjectCollections: + // @ts-expect-error TODO view.creator.did === BSKY_MOD_SERVICE ? undefined : ['app.bsky.feed.post'], })) - return decorated + return decorated as AppBskyLabelerDefs.LabelerViewDetailed[] }, }) }