Handle single labeler case

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,6 +269,10 @@ function Inner(props: ReportDialogProps) {
           {state.activeStepIndex1 >= 2 && (
             <>
               {state.selectedLabeler ? (
+                <>
+                  {hasSingleSupportedLabeler ? (
+                    <LabelerCard labeler={state.selectedLabeler} />
+                  ) : (
                     <View style={[a.flex_row, a.align_center, a.gap_md]}>
                       <View style={[a.flex_1]}>
                         <LabelerCard labeler={state.selectedLabeler} />
@@ -283,10 +289,27 @@ function Inner(props: ReportDialogProps) {
                         <ButtonIcon icon={X} />
                       </Button>
                     </View>
+                  )}
+                </>
               ) : (
                 <>
-                  {supportedLabelers.length ? (
+                  {hasSupportedLabelers ? (
                     <View style={[a.gap_sm]}>
+                      {hasSingleSupportedLabeler ? (
+                        <>
+                          <LabelerCard labeler={supportedLabelers[0]} />
+                          <ActionOnce
+                            check={() => !state.selectedLabeler}
+                            callback={() => {
+                              dispatch({
+                                type: 'selectLabeler',
+                                labeler: supportedLabelers[0],
+                              })
+                            }}
+                          />
+                        </>
+                      ) : (
+                        <>
                           {supportedLabelers.map(l => (
                             <LabelerCard
                               key={l.creator.did}
@@ -296,6 +319,8 @@ function Inner(props: ReportDialogProps) {
                               }}
                             />
                           ))}
+                        </>
+                      )}
                     </View>
                   ) : (
                     // 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 <View style={[a.gap_md, a.w_full]}>{children}</View>
 }