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,35 +269,58 @@ function Inner(props: ReportDialogProps) {
           {state.activeStepIndex1 >= 2 && (
             <>
               {state.selectedLabeler ? (
-                <View style={[a.flex_row, a.align_center, a.gap_md]}>
+                <>
-                  <View style={[a.flex_1]}>
+                  {hasSingleSupportedLabeler ? (
                     <LabelerCard labeler={state.selectedLabeler} />
-                  </View>
+                  ) : (
-                  <Button
+                    <View style={[a.flex_row, a.align_center, a.gap_md]}>
-                    label={_(msg`Change moderation service`)}
+                      <View style={[a.flex_1]}>
-                    size="tiny"
+                        <LabelerCard labeler={state.selectedLabeler} />
-                    variant="solid"
+                      </View>
-                    color="secondary"
+                      <Button
-                    shape="round"
+                        label={_(msg`Change moderation service`)}
-                    onPress={() => {
+                        size="tiny"
-                      dispatch({type: 'clearLabeler'})
+                        variant="solid"
-                    }}>
+                        color="secondary"
-                    <ButtonIcon icon={X} />
+                        shape="round"
-                  </Button>
+                        onPress={() => {
-                </View>
+                          dispatch({type: 'clearLabeler'})
+                        }}>
+                        <ButtonIcon icon={X} />
+                      </Button>
+                    </View>
+                  )}
+                </>
               ) : (
                 <>
-                  {supportedLabelers.length ? (
+                  {hasSupportedLabelers ? (
                     <View style={[a.gap_sm]}>
-                      {supportedLabelers.map(l => (
+                      {hasSingleSupportedLabeler ? (
-                        <LabelerCard
+                        <>
-                          key={l.creator.did}
+                          <LabelerCard labeler={supportedLabelers[0]} />
-                          labeler={l}
+                          <ActionOnce
-                          onSelect={() => {
+                            check={() => !state.selectedLabeler}
-                            dispatch({type: 'selectLabeler', labeler: l})
+                            callback={() => {
-                          }}
+                              dispatch({
-                        />
+                                type: 'selectLabeler',
-                      ))}
+                                labeler: supportedLabelers[0],
+                              })
+                            }}
+                          />
+                        </>
+                      ) : (
+                        <>
+                          {supportedLabelers.map(l => (
+                            <LabelerCard
+                              key={l.creator.did}
+                              labeler={l}
+                              onSelect={() => {
+                                dispatch({type: 'selectLabeler', labeler: l})
+                              }}
+                            />
+                          ))}
+                        </>
+                      )}
                     </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>
 }