Update ReportDialog

src/components/ReportDialog/index.tsx

@@ -7,7 +7,6 @@ import {AppBskyModerationDefs, LabelGroupDefinition} from '@atproto/api'
 import {atoms as a, useTheme, tokens, native} from '#/alf'
 import {Text} from '#/components/Typography'
 import * as Dialog from '#/components/Dialog'
-import {GlobalDialogProps} from '#/components/dialogs'
 import {
   Button,
   ButtonIcon,
@@ -35,22 +34,27 @@ import {
   useConfigurableProfileLabelGroups,
   getLabelGroupToLabelerMap,
 } from '#/lib/moderation'
-import {DMCA_LINK} from '#/components/dialogs/ReportDialog/const'
+import {DMCA_LINK} from '#/components/ReportDialog/const'
 import {Link} from '#/components/Link'
 import {SquareArrowTopRight_Stroke2_Corner0_Rounded as SquareArrowTopRight} from '#/components/icons/SquareArrowTopRight'
 // import {getAgent} from '#/state/session'
 
+export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
+
 export type ReportDialogLabelIds = LabelGroupDefinition['id'] | 'other'
-export type ReportDialogProps =
+export type ReportDialogProps = {
-  | {
+  control: Dialog.DialogOuterProps['control']
-      type: 'content'
+  params:
-      uri: string
+    | {
-      cid: string
+        type: 'content'
-    }
+        uri: string
-  | {
+        cid: string
-      type: 'profile'
+      }
-      did: string
+    | {
-    }
+        type: 'profile'
+        did: string
+      }
+}
 
 function LabelGroupButton({
   name,
@@ -162,8 +166,7 @@ function SubmitView({
   goBack,
   onSubmitComplete,
   labelGroupToLabelerMap,
-}: {
+}: ReportDialogProps & {
-  params: ReportDialogProps
   selectedLabelGroup: ReportDialogLabelIds
   goBack: () => void
   onSubmitComplete: () => void
@@ -287,7 +290,6 @@ function SubmitView({
             label="Text field"
             style={{paddingRight: 60}}
             numberOfLines={6}
-            disabled={!supportedLabelers}
           />
 
           <View
@@ -335,11 +337,10 @@ function SubmitView({
   )
 }
 
-export function ReportDialogInner({
+export function ReportDialogLoaded({
-  params,
   labelGroupToLabelerMap,
-}: {
+  ...props
-  params: ReportDialogProps
+}: ReportDialogProps & {
   labelers: AppBskyModerationDefs.ModServiceViewDetailed[]
   labelGroupToLabelerMap: ReturnType<typeof getLabelGroupToLabelerMap>
 }) {
@@ -352,7 +353,7 @@ export function ReportDialogInner({
   const labelGroupStrings = useLabelGroupStrings()
   const contentGroups = useConfigurableContentLabelGroups()
   const profileGroups = useConfigurableProfileLabelGroups()
-  const groups = params.type === 'content' ? contentGroups : profileGroups
+  const groups = props.params.type === 'content' ? contentGroups : profileGroups
   const filteredGroups = groups.filter(group => {
     return Boolean(labelGroupToLabelerMap[group.id])
   })
@@ -361,7 +362,7 @@ export function ReportDialogInner({
     let title = _(msg`Report this post`)
     let description = _(msg`Why should this post be reviewed?`)
 
-    if (params.type === 'profile') {
+    if (props.params.type === 'profile') {
       title = _(msg`Report this user`)
       description = _(msg`Why should this user be reviewed?`)
     }
@@ -370,7 +371,7 @@ export function ReportDialogInner({
       title,
       description,
     }
-  }, [_, params.type])
+  }, [_, props.params.type])
 
   const next = React.useCallback(
     (group: ReportDialogLabelIds | 'copyright') => {
@@ -387,8 +388,8 @@ export function ReportDialogInner({
     <>
       {selectedLabelGroup ? (
         <SubmitView
+          {...props}
           labelGroupToLabelerMap={labelGroupToLabelerMap}
-          params={params}
           selectedLabelGroup={selectedLabelGroup}
           goBack={() => setSelectedLabelGroup(undefined)}
           onSubmitComplete={control.close}
@@ -429,7 +430,7 @@ export function ReportDialogInner({
               />
             </Button>
 
-            {params.type === 'content' && (
+            {props.params.type === 'content' && (
               <View style={[a.pt_md, a.px_md]}>
                 <View
                   style={[
@@ -472,14 +473,7 @@ export function ReportDialogInner({
   )
 }
 
-export function ReportDialog({
+function ReportDialogInner(props: ReportDialogProps) {
-  params,
-  cleanup,
-}: GlobalDialogProps<ReportDialogProps>) {
-  // REQUIRED CLEANUP
-  const onClose = React.useCallback(() => cleanup(), [cleanup])
-  const control = Dialog.useDialogControl()
-
   const {
     isLoading: isPreferencesLoading,
     error: preferencesError,
@@ -505,24 +499,22 @@ export function ReportDialog({
       <Loader />
     </View>
   ) : error || !(preferences && modservices) ? null : ( // TODO
-    <Dialog.Outer
+    <Dialog.ScrollableInner label="Report Dialog">
-      defaultOpen
+      <ReportDialogLoaded
-      control={control}
+        {...props}
-      onClose={onClose}
+        labelers={modservices}
-      nativeOptions={{
+        labelGroupToLabelerMap={labelGroupToLabelerMap}
-        sheet: {
+      />
-          snapPoints: ['100%'],
+    </Dialog.ScrollableInner>
-        },
+  )
-      }}>
+}
+
+export function ReportDialog(props: ReportDialogProps) {
+  return (
+    <Dialog.Outer control={props.control}>
       <Dialog.Handle />
 
-      <Dialog.ScrollableInner label="Report Dialog">
+      <ReportDialogInner {...props} />
-        <ReportDialogInner
-          params={params}
-          labelers={modservices}
-          labelGroupToLabelerMap={labelGroupToLabelerMap}
-        />
-      </Dialog.ScrollableInner>
     </Dialog.Outer>
   )
 }

src/screens/Profile/Header/DropdownBtn.tsx

@@ -24,8 +24,7 @@ import {NEW_REPORT_DIALOG_ENABLED} from '#/lib/build-flags'
 import {atoms as a, useTheme, tokens} from '#/alf'
 import * as Toast from 'view/com/util/Toast'
 import {NativeDropdown, DropdownItem} from 'view/com/util/forms/NativeDropdown'
-import {useOpenGlobalDialog} from '#/components/dialogs'
+import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
-import {ReportDialog} from '#/components/dialogs/ReportDialog'
 import {DotGrid1x3Horizontal_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid'
 
 export function ProfileHeaderDropdownBtn({
@@ -41,7 +40,7 @@ export function ProfileHeaderDropdownBtn({
   const [queueMute, queueUnmute] = useProfileMuteMutationQueue(profile)
   const [queueBlock, queueUnblock] = useProfileBlockMutationQueue(profile)
   const queryClient = useQueryClient()
-  const openDialog = useOpenGlobalDialog()
+  const control = useReportDialogControl()
 
   const invalidateProfileQuery = React.useCallback(() => {
     queryClient.invalidateQueries({
@@ -139,14 +138,14 @@ export function ProfileHeaderDropdownBtn({
   const onPressReportAccount = React.useCallback(() => {
     track('ProfileHeader:ReportAccountButtonClicked')
     if (NEW_REPORT_DIALOG_ENABLED) {
-      openDialog(ReportDialog, {type: 'profile', did: profile.did})
+      control.open()
     } else {
       openModal({
         name: 'report',
         did: profile.did,
       })
     }
-  }, [track, openModal, profile, openDialog])
+  }, [track, openModal, profile, control])
 
   const isMe = React.useMemo(
     () => currentAccount?.did === profile.did,
@@ -256,26 +255,35 @@ export function ProfileHeaderDropdownBtn({
   ])
 
   return dropdownItems?.length ? (
-    <NativeDropdown
+    <>
-      testID="profileHeaderDropdownBtn"
+      <ReportDialog
-      items={dropdownItems}
+        control={control}
-      accessibilityLabel={_(msg`More options`)}
+        params={{type: 'profile', did: profile.did}}
-      accessibilityHint="">
+      />
-      <View
+
-        style={[
+      <NativeDropdown
-          {
+        testID="profileHeaderDropdownBtn"
-            height: 40,
+        items={dropdownItems}
-            width: 40,
+        accessibilityLabel={_(msg`More options`)}
-            backgroundColor:
+        accessibilityHint="">
-              t.name === 'light' ? tokens.color.gray_50 : tokens.color.gray_900,
+        <View
-          },
+          style={[
-          a.flex_row,
+            {
-          a.align_center,
+              height: 40,
-          a.justify_center,
+              width: 40,
-          a.rounded_full,
+              backgroundColor:
-        ]}>
+                t.name === 'light'
-        <Ellipsis width={20} fill={t.atoms.text_contrast_medium.color} />
+                  ? tokens.color.gray_50
-      </View>
+                  : tokens.color.gray_900,
-    </NativeDropdown>
+            },
+            a.flex_row,
+            a.align_center,
+            a.justify_center,
+            a.rounded_full,
+          ]}>
+          <Ellipsis width={20} fill={t.atoms.text_contrast_medium.color} />
+        </View>
+      </NativeDropdown>
+    </>
   ) : null
 }

src/view/com/profile/ProfileHeader.tsx

@@ -56,8 +56,7 @@ import {Shadow} from '#/state/cache/types'
 import {useRequireAuth} from '#/state/session'
 import {LabelsOnMe} from '../util/moderation/LabelsOnMe'
 import {useProfileShadow} from 'state/cache/profile-shadow'
-import {useOpenGlobalDialog} from '#/components/dialogs'
+import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
-import {ReportDialog} from '#/components/dialogs/ReportDialog'
 import {NEW_REPORT_DIALOG_ENABLED} from '#/lib/build-flags'
 import {atoms as a} from '#/alf'
 
@@ -118,7 +117,7 @@ let ProfileHeader = ({
     () => moderateProfile(profile, moderationOpts),
     [profile, moderationOpts],
   )
-  const openDialog = useOpenGlobalDialog()
+  const control = useReportDialogControl()
 
   const invalidateProfileQuery = React.useCallback(() => {
     queryClient.invalidateQueries({
@@ -281,14 +280,14 @@ let ProfileHeader = ({
   const onPressReportAccount = React.useCallback(() => {
     track('ProfileHeader:ReportAccountButtonClicked')
     if (NEW_REPORT_DIALOG_ENABLED) {
-      openDialog(ReportDialog, {type: 'profile', did: profile.did})
+      control.open()
     } else {
       openModal({
         name: 'report',
         did: profile.did,
       })
     }
-  }, [track, openModal, profile, openDialog])
+  }, [track, openModal, profile, control])
 
   const isMe = React.useMemo(
     () => currentAccount?.did === profile.did,
@@ -402,6 +401,11 @@ let ProfileHeader = ({
 
   return (
     <View style={[pal.view]} pointerEvents="box-none">
+      <ReportDialog
+        control={control}
+        params={{type: 'profile', did: profile.did}}
+      />
+
       <View pointerEvents="none">
         {isPlaceholderProfile ? (
           <LoadingPlaceholder

src/view/com/util/forms/PostDropdownBtn.tsx

@@ -34,8 +34,7 @@ import {useLingui} from '@lingui/react'
 import {useSession} from '#/state/session'
 import {isWeb} from '#/platform/detection'
 import {richTextToString} from '#/lib/strings/rich-text-helpers'
-import {useOpenGlobalDialog} from '#/components/dialogs'
+import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
-import {ReportDialog} from '#/components/dialogs/ReportDialog'
 import {NEW_REPORT_DIALOG_ENABLED} from '#/lib/build-flags'
 
 let PostDropdownBtn = ({
@@ -67,7 +66,7 @@ let PostDropdownBtn = ({
   const hiddenPosts = useHiddenPosts()
   const {hidePost} = useHiddenPostsApi()
   const openLink = useOpenLink()
-  const openDialog = useOpenGlobalDialog()
+  const control = useReportDialogControl()
   const navigation = useNavigation()
 
   const rootUri = record.reply?.root?.uri || postUri
@@ -241,11 +240,7 @@ let PostDropdownBtn = ({
         label: _(msg`Report post`),
         onPress() {
           if (NEW_REPORT_DIALOG_ENABLED) {
-            openDialog(ReportDialog, {
+            control.open()
-              type: 'content',
-              uri: postUri,
-              cid: postCid,
-            })
           } else {
             openModal({
               name: 'report',
@@ -285,17 +280,32 @@ let PostDropdownBtn = ({
   ].filter(Boolean) as NativeDropdownItem[]
 
   return (
-    <EventStopper>
+    <>
-      <NativeDropdown
+      <ReportDialog
-        testID={testID}
+        control={control}
-        items={dropdownItems}
+        params={{
-        accessibilityLabel={_(msg`More post options`)}
+          type: 'content',
-        accessibilityHint="">
+          uri: postUri,
-        <View style={style}>
+          cid: postCid,
-          <FontAwesomeIcon icon="ellipsis" size={20} color={defaultCtrlColor} />
+        }}
-        </View>
+      />
-      </NativeDropdown>
+
-    </EventStopper>
+      <EventStopper>
+        <NativeDropdown
+          testID={testID}
+          items={dropdownItems}
+          accessibilityLabel={_(msg`More post options`)}
+          accessibilityHint="">
+          <View style={style}>
+            <FontAwesomeIcon
+              icon="ellipsis"
+              size={20}
+              color={defaultCtrlColor}
+            />
+          </View>
+        </NativeDropdown>
+      </EventStopper>
+    </>
   )
 }