diff --git a/src/components/moderation/ReportDialog/index.tsx b/src/components/moderation/ReportDialog/index.tsx
index 5fbbd724e0..54f10b7cb8 100644
--- a/src/components/moderation/ReportDialog/index.tsx
+++ b/src/components/moderation/ReportDialog/index.tsx
@@ -132,6 +132,8 @@ function Inner(props: ReportDialogProps) {
return reasonTypes.includes(state.selectedOption.reason)
})
}, [props, allLabelers, state.selectedOption])
+ const hasSupportedLabelers = !!supportedLabelers.length
+ const hasSingleSupportedLabeler = supportedLabelers.length === 1
const onSubmit = React.useCallback(async () => {
dispatch({type: 'clearError'})
@@ -267,35 +269,58 @@ function Inner(props: ReportDialogProps) {
{state.activeStepIndex1 >= 2 && (
<>
{state.selectedLabeler ? (
-
-
+ <>
+ {hasSingleSupportedLabeler ? (
-
-
-
+ ) : (
+
+
+
+
+
+
+ )}
+ >
) : (
<>
- {supportedLabelers.length ? (
+ {hasSupportedLabelers ? (
- {supportedLabelers.map(l => (
- {
- dispatch({type: 'selectLabeler', labeler: l})
- }}
- />
- ))}
+ {hasSingleSupportedLabeler ? (
+ <>
+
+ !state.selectedLabeler}
+ callback={() => {
+ dispatch({
+ type: 'selectLabeler',
+ labeler: supportedLabelers[0],
+ })
+ }}
+ />
+ >
+ ) : (
+ <>
+ {supportedLabelers.map(l => (
+ {
+ dispatch({type: 'selectLabeler', labeler: l})
+ }}
+ />
+ ))}
+ >
+ )}
) : (
// should never happen in our app
@@ -395,6 +420,21 @@ function Inner(props: ReportDialogProps) {
)
}
+function ActionOnce({
+ check,
+ callback,
+}: {
+ check: () => boolean
+ callback: () => void
+}) {
+ React.useEffect(() => {
+ if (check()) {
+ callback()
+ }
+ }, [check, callback])
+ return null
+}
+
function StepOuter({children}: {children: React.ReactNode}) {
return {children}
}