diff --git a/src/components/dialogs/ReportDialog/const.ts b/src/components/ReportDialog/const.ts similarity index 100% rename from src/components/dialogs/ReportDialog/const.ts rename to src/components/ReportDialog/const.ts diff --git a/src/components/dialogs/ReportDialog/index.tsx b/src/components/ReportDialog/index.tsx similarity index 91% rename from src/components/dialogs/ReportDialog/index.tsx rename to src/components/ReportDialog/index.tsx index 9736e52d1c..1ab33c5a55 100644 --- a/src/components/dialogs/ReportDialog/index.tsx +++ b/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 = - | { - type: 'content' - uri: string - cid: string - } - | { - type: 'profile' - did: string - } +export type ReportDialogProps = { + control: Dialog.DialogOuterProps['control'] + params: + | { + type: 'content' + uri: string + cid: string + } + | { + type: 'profile' + did: string + } +} function LabelGroupButton({ name, @@ -162,8 +166,7 @@ function SubmitView({ goBack, onSubmitComplete, labelGroupToLabelerMap, -}: { - params: ReportDialogProps +}: ReportDialogProps & { selectedLabelGroup: ReportDialogLabelIds goBack: () => void onSubmitComplete: () => void @@ -287,7 +290,6 @@ function SubmitView({ label="Text field" style={{paddingRight: 60}} numberOfLines={6} - disabled={!supportedLabelers} /> }) { @@ -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 ? ( setSelectedLabelGroup(undefined)} onSubmitComplete={control.close} @@ -429,7 +430,7 @@ export function ReportDialogInner({ /> - {params.type === 'content' && ( + {props.params.type === 'content' && ( ) { - // REQUIRED CLEANUP - const onClose = React.useCallback(() => cleanup(), [cleanup]) - const control = Dialog.useDialogControl() - +function ReportDialogInner(props: ReportDialogProps) { const { isLoading: isPreferencesLoading, error: preferencesError, @@ -505,24 +499,22 @@ export function ReportDialog({ ) : error || !(preferences && modservices) ? null : ( // TODO - + + + + ) +} + +export function ReportDialog(props: ReportDialogProps) { + return ( + - - - + ) } diff --git a/src/screens/Profile/Header/DropdownBtn.tsx b/src/screens/Profile/Header/DropdownBtn.tsx index 24244b6646..cc4680137c 100644 --- a/src/screens/Profile/Header/DropdownBtn.tsx +++ b/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} from '#/components/dialogs/ReportDialog' +import {ReportDialog, useReportDialogControl} from '#/components/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 ? ( - - - - - + <> + + + + + + + + ) : null } diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index fcafc2a733..22af040f9b 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/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} from '#/components/dialogs/ReportDialog' +import {ReportDialog, useReportDialogControl} from '#/components/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 ( + + {isPlaceholderProfile ? ( - - - - - - + <> + + + + + + + + + + ) }