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
+}