Cleanup

src/components/moderation/ReportDialog/index.tsx

@@ -48,21 +48,27 @@ export function ReportDialog(
   return (
     <Dialog.Outer control={props.control}>
       <Dialog.Handle />
-      {subject ? <Inner {...props} subject={subject} /> : <Invalid />}
+      {subject && false ? <Inner {...props} subject={subject} /> : <Invalid />}
     </Dialog.Outer>
   )
 }
 
-// TODO
+/**
+ * This should only be shown if the dialog is configured incorrectly by a
+ * developer, but nevertheless we should have a graceful fallback.
+ */
 function Invalid() {
   const {_} = useLingui()
   return (
     <Dialog.ScrollableInner label={_(msg`Report dialog`)}>
-      <Text style={[a.font_heavy, a.text_xl]}>
+      <Text style={[a.font_heavy, a.text_xl, a.leading_snug, a.pb_xs]}>
         <Trans>Invalid report subject</Trans>
       </Text>
-      <Text style={[a.text_md]}>
+      <Text style={[a.text_md, a.leading_snug]}>
-        <Trans>This is a developer error.</Trans>
+        <Trans>
+          Something wasn't quite right with the data you're trying to report.
+          Please contact support.
+        </Trans>
       </Text>
       <Dialog.Close />
     </Dialog.ScrollableInner>
@@ -78,13 +84,17 @@ function Inner(props: ReportDialogProps) {
     error: labelersLoadError,
   } = useMyLabelersQuery({excludeNonConfigurableLabelers: true})
   const isLoading = useDelayedLoading(500, isLabelerLoading)
-
   const copy = useCopyForSubject(props.subject)
-  const allOptions = useReportOptions()
+  const reportOptions = useReportOptions()
-  const options = allOptions[props.subject.type]
-
   const [state, dispatch] = React.useReducer(reducer, initialState)
 
+  /**
+   * Submission handling
+   */
+  const {mutateAsync: submitReport} = useSubmitReportMutation()
+  const [isPending, setPending] = React.useState(false)
+  const [isSuccess, setSuccess] = React.useState(false)
+
   /**
    * Labelers that support this `subject` and its NSID collection
    */
@@ -92,7 +102,7 @@ function Inner(props: ReportDialogProps) {
     if (!allLabelers) return []
     return allLabelers
       .filter(l => {
-        // @ts-ignore
+        // @ts-expect-error TODO
         const subjectTypes: string[] | undefined = l.subjectTypes
         if (subjectTypes === undefined) return true
         if (props.subject.type === 'account') {
@@ -104,7 +114,7 @@ function Inner(props: ReportDialogProps) {
         }
       })
       .filter(l => {
-        // @ts-ignore
+        // @ts-expect-error TODO
         const collections: string[] | undefined = l.subjectCollections
         if (collections === undefined) return true
         // all chat collections accepted, since only Bluesky handles chats
@@ -113,22 +123,19 @@ function Inner(props: ReportDialogProps) {
       })
       .filter(l => {
         if (!state.selectedOption) return true
-        // @ts-ignore
+        // @ts-expect-error TODO
         const reasonTypes: string[] | undefined = l.reasonTypes
         if (reasonTypes === undefined) return true
         return reasonTypes.includes(state.selectedOption.reason)
       })
   }, [props, allLabelers, state.selectedOption])
 
-  const {mutateAsync: submitReport} = useSubmitReportMutation()
-  const [isPending, setPending] = React.useState(false)
-  const [isSuccess, setSuccess] = React.useState(false)
-
   const onSubmit = React.useCallback(async () => {
     dispatch({type: 'clearError'})
 
     try {
       setPending(true)
+      // wait at least 1s, make it feel substantial
       await wait(
         1e3,
         submitReport({
@@ -137,6 +144,7 @@ function Inner(props: ReportDialogProps) {
         }),
       )
       setSuccess(true)
+      // give time for user feedback
       setTimeout(() => {
         props.control.close()
       }, 1e3)
@@ -198,7 +206,7 @@ function Inner(props: ReportDialogProps) {
                 </View>
               ) : (
                 <View style={[a.gap_sm]}>
-                  {options.map(o => (
+                  {reportOptions[props.subject.type].map(o => (
                     <OptionCard
                       key={o.reason}
                       option={o}

src/state/queries/labeler.ts

@@ -86,18 +86,18 @@ export function useLabelersDetailedInfoQuery({dids}: {dids: string[]}) {
       const decorated = res.data.views.map(view => ({
         ...view,
         reasonTypes: REASON_TYPES,
-        // @ts-ignore TODO
         subjectTypes:
+          // @ts-expect-error TODO
           view.creator.did === BSKY_MOD_SERVICE
             ? ['account', 'record', 'chat']
             : ['account', 'record'],
-        // @ts-ignore TODO
         subjectCollections:
+          // @ts-expect-error TODO
           view.creator.did === BSKY_MOD_SERVICE
             ? undefined
             : ['app.bsky.feed.post'],
       }))
-      return decorated
+      return decorated as AppBskyLabelerDefs.LabelerViewDetailed[]
     },
   })
 }