acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Update ReportDialog

Browse Source
This commit is contained in:
Eric Bailey
2024-02-26 18:10:46 -06:00
parent 67fea6d317
commit 304b6f4f00
5 changed files with 112 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dialogs/ReportDialog/const.ts → src/components/ReportDialog/const.ts
View File
src/components/dialogs/ReportDialog/index.tsx → src/components/ReportDialog/index.tsx
+40 -48
View File
@@ -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}
/>
<View
@@ -335,11 +337,10 @@ function SubmitView({
)
}
export function ReportDialogInner({
params,
export function ReportDialogLoaded({
labelGroupToLabelerMap,
}: {
params: ReportDialogProps
...props
}: 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({
params,
cleanup,
}: GlobalDialogProps<ReportDialogProps>) {
// 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({
<Loader />
</View>
) : error || !(preferences && modservices) ? null : ( // TODO
<Dialog.Outer
defaultOpen
control={control}
onClose={onClose}
nativeOptions={{
sheet: {
snapPoints: ['100%'],
},
}}>
<Dialog.ScrollableInner label="Report Dialog">
<ReportDialogLoaded
{...props}
labelers={modservices}
labelGroupToLabelerMap={labelGroupToLabelerMap}
/>
</Dialog.ScrollableInner>
)
}
export function ReportDialog(props: ReportDialogProps) {
return (
<Dialog.Outer control={props.control}>
<Dialog.Handle />
<Dialog.ScrollableInner label="Report Dialog">
<ReportDialogInner
params={params}
labelers={modservices}
labelGroupToLabelerMap={labelGroupToLabelerMap}
/>
</Dialog.ScrollableInner>
<ReportDialogInner {...props} />
</Dialog.Outer>
)
}
src/screens/Profile/Header/DropdownBtn.tsx
+34 -26
View File
@@ -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 ? (
<NativeDropdown
testID="profileHeaderDropdownBtn"
items={dropdownItems}
accessibilityLabel={_(msg`More options`)}
accessibilityHint="">
<View
style={[
{
height: 40,
width: 40,
backgroundColor:
t.name === 'light' ? tokens.color.gray_50 : tokens.color.gray_900,
},
a.flex_row,
a.align_center,
a.justify_center,
a.rounded_full,
]}>
<Ellipsis width={20} fill={t.atoms.text_contrast_medium.color} />
</View>
</NativeDropdown>
<>
<ReportDialog
control={control}
params={{type: 'profile', did: profile.did}}
/>
<NativeDropdown
testID="profileHeaderDropdownBtn"
items={dropdownItems}
accessibilityLabel={_(msg`More options`)}
accessibilityHint="">
<View
style={[
{
height: 40,
width: 40,
backgroundColor:
t.name === 'light'
? tokens.color.gray_50
: tokens.color.gray_900,
},
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
+9 -5
View File
@@ -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 (
<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
+29 -19
View File
@@ -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} from '#/components/dialogs/ReportDialog'
import {ReportDialog, useReportDialogControl} from '#/components/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, {
type: 'content',
uri: postUri,
cid: postCid,
})
control.open()
} else {
openModal({
name: 'report',
@@ -285,17 +280,32 @@ let PostDropdownBtn = ({
].filter(Boolean) as NativeDropdownItem[]
return (
<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>
<>
<ReportDialog
control={control}
params={{
type: 'content',
uri: postUri,
cid: postCid,
}}
/>
<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>
</>
)
}