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