diff --git a/src/components/moderation/ReportDialog/index.tsx b/src/components/moderation/ReportDialog/index.tsx
index 14b58d9fd2..a4e06e72ee 100644
--- a/src/components/moderation/ReportDialog/index.tsx
+++ b/src/components/moderation/ReportDialog/index.tsx
@@ -37,7 +37,7 @@ import {type ReportDialogProps, type ReportSubject} from './types'
import {parseReportSubject} from './utils/parseReportSubject'
import {
type ReportOption,
- TopLevelReportOption,
+ type ReportOptionCategory,
useReportOptions,
} from './utils/useReportOptions'
@@ -99,7 +99,7 @@ function Inner(props: ReportDialogProps) {
} = useMyLabelersQuery({excludeNonConfigurableLabelers: true})
const isLoading = useDelayedLoading(500, isLabelerLoading)
const copy = useCopyForSubject(props.subject)
- const {reasons, sortedReasons, getTopLevelReason} = useReportOptions()
+ const {sortedCategories, getCategory} = useReportOptions()
const [state, dispatch] = React.useReducer(reducer, initialState)
/**
@@ -241,32 +241,32 @@ function Inner(props: ReportDialogProps) {
) : (
<>
- {state.selectedTopLevelOption ? (
+ {state.selectedCategory ? (
-
+
) : (
- {sortedReasons.map(o => (
- (
+ {
- dispatch({type: 'selectTopLevelOption', option: o})
+ dispatch({type: 'selectCategory', option: o})
}}
/>
))}
@@ -314,7 +314,7 @@ function Inner(props: ReportDialogProps) {
{state.selectedOption ? (
@@ -323,77 +323,40 @@ function Inner(props: ReportDialogProps) {
- ) : state.selectedTopLevelOption ? (
+ ) : state.selectedCategory ? (
- {getTopLevelReason(state.selectedTopLevelOption.key).options.map(
- o => (
- {
- dispatch({type: 'selectOption', option: o})
- }}
- />
- ),
- )}
-
- {['post', 'account'].includes(props.subject.type) && (
-
- {({hovered, pressed}) => (
-
-
-
- Need to report a copyright violation, legal request,
- or regulatory compliance issue?
-
-
-
-
- )}
-
- )}
+ {getCategory(state.selectedCategory.key).options.map(o => (
+ {
+ dispatch({type: 'selectOption', option: o})
+ }}
+ />
+ ))}
) : null}
- {state.activeStepIndex1 >= 2 && (
+ {state.activeStepIndex1 >= 3 && (
<>
{state.selectedLabeler ? (
<>
@@ -466,11 +429,11 @@ function Inner(props: ReportDialogProps) {
- {state.activeStepIndex1 === 3 && (
+ {state.activeStepIndex1 === 4 && (
<>
@@ -649,12 +612,12 @@ function StepTitle({
)
}
-function TopLevelOptionCard({
+function CategoryCard({
option,
onSelect,
}: {
- option: TopLevelReportOption
- onSelect?: (option: TopLevelReportOption) => void
+ option: ReportOptionCategory
+ onSelect?: (option: ReportOptionCategory) => void
}) {
const t = useTheme()
const {_} = useLingui()
diff --git a/src/components/moderation/ReportDialog/state.ts b/src/components/moderation/ReportDialog/state.ts
index 0e9c57f854..19d107cf3a 100644
--- a/src/components/moderation/ReportDialog/state.ts
+++ b/src/components/moderation/ReportDialog/state.ts
@@ -1,9 +1,12 @@
import {type AppBskyLabelerDefs, ComAtprotoModerationDefs} from '@atproto/api'
-import {TopLevelReportOption, type ReportOption} from './utils/useReportOptions'
+import {
+ type ReportOption,
+ type ReportOptionCategory,
+} from './utils/useReportOptions'
export type ReportState = {
- selectedTopLevelOption?: TopLevelReportOption
+ selectedCategory?: ReportOptionCategory
selectedOption?: ReportOption
selectedLabeler?: AppBskyLabelerDefs.LabelerViewDetailed
details?: string
@@ -14,11 +17,11 @@ export type ReportState = {
export type ReportAction =
| {
- type: 'selectTopLevelOption'
- option: TopLevelReportOption
+ type: 'selectCategory'
+ option: ReportOptionCategory
}
| {
- type: 'clearTopLevelOption'
+ type: 'clearCategory'
}
| {
type: 'selectOption'
@@ -50,7 +53,7 @@ export type ReportAction =
}
export const initialState: ReportState = {
- selectedTopLevelOption: undefined,
+ selectedCategory: undefined,
selectedOption: undefined,
selectedLabeler: undefined,
details: undefined,
@@ -60,17 +63,17 @@ export const initialState: ReportState = {
export function reducer(state: ReportState, action: ReportAction): ReportState {
switch (action.type) {
- case 'selectTopLevelOption':
+ case 'selectCategory':
return {
...state,
- selectedTopLevelOption: action.option,
+ selectedCategory: action.option,
activeStepIndex1: 2,
detailsOpen: !!state.details,
}
- case 'clearTopLevelOption':
+ case 'clearCategory':
return {
...state,
- selectedTopLevelOption: undefined,
+ selectedCategory: undefined,
selectedOption: undefined,
selectedLabeler: undefined,
activeStepIndex1: 1,
diff --git a/src/components/moderation/ReportDialog/utils/useReportOptions.ts b/src/components/moderation/ReportDialog/utils/useReportOptions.ts
index 0e7c733861..ebf8a930d3 100644
--- a/src/components/moderation/ReportDialog/utils/useReportOptions.ts
+++ b/src/components/moderation/ReportDialog/utils/useReportOptions.ts
@@ -11,7 +11,7 @@ export type TopLevelReason =
| 'civicIntegrity'
| 'other'
-export interface TopLevelReportOption {
+export interface ReportOptionCategory {
key: TopLevelReason
title: string
description: string
@@ -20,15 +20,15 @@ export interface TopLevelReportOption {
isOther?: boolean
}
-export interface TopLevelReportOptions {
- childSafety: TopLevelReportOption
- violencePhysicalHarm: TopLevelReportOption
- sexualAdultContent: TopLevelReportOption
- harassmentHate: TopLevelReportOption
- misleading: TopLevelReportOption
- ruleBreaking: TopLevelReportOption
- civicIntegrity: TopLevelReportOption
- other: TopLevelReportOption
+export interface ReportOptionCategories {
+ childSafety: ReportOptionCategory
+ violencePhysicalHarm: ReportOptionCategory
+ sexualAdultContent: ReportOptionCategory
+ harassmentHate: ReportOptionCategory
+ misleading: ReportOptionCategory
+ ruleBreaking: ReportOptionCategory
+ civicIntegrity: ReportOptionCategory
+ other: ReportOptionCategory
}
export interface ReportOption {
@@ -39,7 +39,7 @@ export interface ReportOption {
export function useReportOptions() {
const {_} = useLingui()
- const reasons = {
+ const categories = {
childSafety: {
key: 'childSafety',
title: _(msg`Child Safety`),
@@ -297,11 +297,13 @@ export function useReportOptions() {
},
}
- const sortedReasons = Object.values(reasons).sort((a, b) => a.sort - b.sort)
+ const sortedCategories = (
+ Object.values(categories) as ReportOptionCategory[]
+ ).sort((a, b) => a.sort - b.sort)
- const getTopLevelReason = (reasonName: TopLevelReason) => {
- return reasons[reasonName]
+ const getCategory = (reasonName: TopLevelReason) => {
+ return categories[reasonName]
}
- return {reasons, sortedReasons, getTopLevelReason}
+ return {categories, sortedCategories, getCategory}
}