diff --git a/src/components/ReportDialog/SelectLabelerView.tsx b/src/components/ReportDialog/SelectLabelerView.tsx new file mode 100644 index 00000000..300114fc --- /dev/null +++ b/src/components/ReportDialog/SelectLabelerView.tsx @@ -0,0 +1,115 @@ +import React from 'react' +import {View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {AppBskyLabelerDefs} from '@atproto/api' + +export {useDialogControl as useReportDialogControl} from '#/components/Dialog' + +import {atoms as a, useTheme} from '#/alf' +import {Text} from '#/components/Typography' +import {Button, useButtonContext} from '#/components/Button' +import {Divider} from '#/components/Divider' +import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' + +import {ReportDialogProps} from './types' + +export function SelectLabelerView({ + ...props +}: ReportDialogProps & { + labelers: AppBskyLabelerDefs.LabelerViewDetailed[] + onSelectLabeler: (v: string) => void +}) { + const t = useTheme() + const {_} = useLingui() + + return ( + + + + Select moderation service + + + Who do you want to send this report to? + + + + + + + {props.labelers.map(labeler => { + return ( + + ) + })} + + + ) +} + +function LabelerButton({ + title, + description, +}: { + title: string + description: string +}) { + const t = useTheme() + const {hovered, pressed} = useButtonContext() + const interacted = hovered || pressed + + const styles = React.useMemo(() => { + return { + interacted: { + backgroundColor: t.palette.contrast_50, + }, + } + }, [t]) + + return ( + + + + {title} + + + {description} + + + + + + + + ) +} diff --git a/src/components/ReportDialog/SelectReportOptionView.tsx b/src/components/ReportDialog/SelectReportOptionView.tsx index 8ae0b52e..037a62fc 100644 --- a/src/components/ReportDialog/SelectReportOptionView.tsx +++ b/src/components/ReportDialog/SelectReportOptionView.tsx @@ -18,7 +18,10 @@ import { useButtonContext, } from '#/components/Button' import {Divider} from '#/components/Divider' -import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' +import { + ChevronRight_Stroke2_Corner0_Rounded as ChevronRight, + ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft, +} from '#/components/icons/Chevron' import {SquareArrowTopRight_Stroke2_Corner0_Rounded as SquareArrowTopRight} from '#/components/icons/SquareArrowTopRight' import {ReportDialogProps} from './types' @@ -28,6 +31,7 @@ export function SelectReportOptionView({ }: ReportDialogProps & { labelers: AppBskyLabelerDefs.LabelerViewDetailed[] onSelectReportOption: (reportOption: ReportOption) => void + goBack: () => void }) { const t = useTheme() const {_} = useLingui() @@ -60,6 +64,18 @@ export function SelectReportOptionView({ return ( + {props.labelers?.length > 1 ? ( + + ) : null} + {i18n.title} diff --git a/src/components/ReportDialog/SubmitView.tsx b/src/components/ReportDialog/SubmitView.tsx index 99af64a2..d47211c8 100644 --- a/src/components/ReportDialog/SubmitView.tsx +++ b/src/components/ReportDialog/SubmitView.tsx @@ -24,11 +24,13 @@ import {getAgent} from '#/state/session' export function SubmitView({ params, labelers, + selectedLabeler, selectedReportOption, goBack, onSubmitComplete, }: ReportDialogProps & { labelers: AppBskyLabelerDefs.LabelerViewDetailed[] + selectedLabeler: string selectedReportOption: ReportOption goBack: () => void onSubmitComplete: () => void @@ -37,9 +39,9 @@ export function SubmitView({ const {_} = useLingui() const [details, setDetails] = React.useState('') const [submitting, setSubmitting] = React.useState(false) - const [selectedServices, setSelectedServices] = React.useState( - labelers?.map(labeler => labeler.creator.did) || [], - ) + const [selectedServices, setSelectedServices] = React.useState([ + selectedLabeler, + ]) const [error, setError] = React.useState('') const submit = React.useCallback(async () => { diff --git a/src/components/ReportDialog/index.tsx b/src/components/ReportDialog/index.tsx index b35727c7..f01ff3f3 100644 --- a/src/components/ReportDialog/index.tsx +++ b/src/components/ReportDialog/index.tsx @@ -12,9 +12,11 @@ import * as Dialog from '#/components/Dialog' import {Text} from '#/components/Typography' import {ReportDialogProps} from './types' +import {SelectLabelerView} from './SelectLabelerView' import {SelectReportOptionView} from './SelectReportOptionView' import {SubmitView} from './SubmitView' import {useDelayedLoading} from '#/components/hooks/useDelayedLoading' +import {AppBskyLabelerDefs} from '@atproto/api' export function ReportDialog(props: ReportDialogProps) { return ( @@ -33,9 +35,6 @@ function ReportDialogInner(props: ReportDialogProps) { error, } = useMyLabelersQuery() const isLoading = useDelayedLoading(500, isLabelerLoading) - const [selectedReportOption, setSelectedReportOption] = React.useState< - ReportOption | undefined - >() return ( @@ -51,23 +50,46 @@ function ReportDialogInner(props: ReportDialogProps) { Something went wrong, please try again. - ) : selectedReportOption ? ( - setSelectedReportOption(undefined)} - onSubmitComplete={() => props.control.close()} - /> ) : ( - + )} ) } + +function ReportDialogLoaded( + props: ReportDialogProps & { + labelers: AppBskyLabelerDefs.LabelerViewDetailed[] + }, +) { + const [selectedLabeler, setSelectedLabeler] = React.useState< + string | undefined + >(props.labelers.length === 1 ? props.labelers[0].creator.did : undefined) + const [selectedReportOption, setSelectedReportOption] = React.useState< + ReportOption | undefined + >() + + if (selectedReportOption && selectedLabeler) { + return ( + setSelectedReportOption(undefined)} + onSubmitComplete={() => props.control.close()} + /> + ) + } + if (selectedLabeler) { + return ( + setSelectedLabeler(undefined)} + onSelectReportOption={setSelectedReportOption} + /> + ) + } + return +}