From fc19ffba3881cf38d8a6a47a62c6ed5feff5aa4b Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Tue, 25 Apr 2023 21:04:50 -0500 Subject: [PATCH] Update report modal to use new groupings (close [APP-567]) (#533) --- src/view/com/modals/ReportAccount.tsx | 70 +++++++++++----- src/view/com/modals/ReportPost.tsx | 107 +++++++++++++++++++----- src/view/com/util/forms/RadioButton.tsx | 14 ++-- src/view/com/util/forms/RadioGroup.tsx | 2 +- 4 files changed, 142 insertions(+), 51 deletions(-) diff --git a/src/view/com/modals/ReportAccount.tsx b/src/view/com/modals/ReportAccount.tsx index 601bccbd..e03f06bd 100644 --- a/src/view/com/modals/ReportAccount.tsx +++ b/src/view/com/modals/ReportAccount.tsx @@ -1,4 +1,4 @@ -import React, {useState} from 'react' +import React, {useState, useMemo} from 'react' import { ActivityIndicator, StyleSheet, @@ -15,12 +15,7 @@ import * as Toast from '../util/Toast' import {ErrorMessage} from '../util/error/ErrorMessage' import {cleanError} from 'lib/strings/errors' import {usePalette} from 'lib/hooks/usePalette' - -const ITEMS: RadioGroupItem[] = [ - {key: 'spam', label: 'Spam or excessive repeat posts'}, - {key: 'abuse', label: 'Abusive, rude, or hateful'}, - {key: 'illegal', label: 'Posts illegal content'}, -] +import {isDesktopWeb} from 'platform/detection' export const snapPoints = ['50%'] @@ -31,6 +26,39 @@ export function Component({did}: {did: string}) { const [error, setError] = useState('') const [issue, setIssue] = useState('') const onSelectIssue = (v: string) => setIssue(v) + + const ITEMS: RadioGroupItem[] = useMemo( + () => [ + { + key: ComAtprotoModerationDefs.REASONMISLEADING, + label: ( + + + Misleading Account + + + Impersonation or false claims about identity or affiliation + + + ), + }, + { + key: ComAtprotoModerationDefs.REASONSPAM, + label: ( + + + Frequently Posts Unwanted Content + + + Spam; excessive mentions or replies + + + ), + }, + ], + [pal], + ) + const onPress = async () => { setError('') if (!issue) { @@ -38,15 +66,8 @@ export function Component({did}: {did: string}) { } setIsProcessing(true) try { - // NOTE: we should update the lexicon of reasontype to include more options -prf - let reasonType = ComAtprotoModerationDefs.REASONOTHER - if (issue === 'spam') { - reasonType = ComAtprotoModerationDefs.REASONSPAM - } - const reason = ITEMS.find(item => item.key === issue)?.label || '' await store.agent.com.atproto.moderation.createReport({ - reasonType, - reason, + reasonType: issue, subject: { $type: 'com.atproto.admin.defs#repoRef', did, @@ -61,11 +82,11 @@ export function Component({did}: {did: string}) { } } return ( - - Report account - + + + Report account + + What is the issue with this account? + + For other issues, please report specific posts. + {error ? ( @@ -101,15 +125,17 @@ export function Component({did}: {did: string}) { } const styles = StyleSheet.create({ + container: { + flex: 1, + paddingHorizontal: isDesktopWeb ? 0 : 10, + }, title: { textAlign: 'center', fontWeight: 'bold', - fontSize: 24, marginBottom: 12, }, description: { textAlign: 'center', - fontSize: 17, paddingHorizontal: 22, marginBottom: 10, }, diff --git a/src/view/com/modals/ReportPost.tsx b/src/view/com/modals/ReportPost.tsx index 01a132af..c2c89202 100644 --- a/src/view/com/modals/ReportPost.tsx +++ b/src/view/com/modals/ReportPost.tsx @@ -1,6 +1,7 @@ -import React, {useState} from 'react' +import React, {useState, useMemo} from 'react' import { ActivityIndicator, + Linking, StyleSheet, TouchableOpacity, View, @@ -16,14 +17,9 @@ import {ErrorMessage} from '../util/error/ErrorMessage' import {cleanError} from 'lib/strings/errors' import {usePalette} from 'lib/hooks/usePalette' -const ITEMS: RadioGroupItem[] = [ - {key: 'spam', label: 'Spam or excessive repeat posts'}, - {key: 'abuse', label: 'Abusive, rude, or hateful'}, - {key: 'copyright', label: 'Contains copyrighted material'}, - {key: 'illegal', label: 'Contains illegal content'}, -] +const DMCA_LINK = 'https://bsky.app/support/copyright' -export const snapPoints = ['50%'] +export const snapPoints = [500] export function Component({ postUri, @@ -38,6 +34,74 @@ export function Component({ const [error, setError] = useState('') const [issue, setIssue] = useState('') const onSelectIssue = (v: string) => setIssue(v) + + const ITEMS: RadioGroupItem[] = useMemo( + () => [ + { + key: ComAtprotoModerationDefs.REASONSPAM, + label: ( + + + Spam + + Excessive mentions or replies + + ), + }, + { + key: ComAtprotoModerationDefs.REASONSEXUAL, + label: ( + + + Unwanted Sexual Content + + + Nudity or pornography not labeled as such + + + ), + }, + { + key: '__copyright__', + label: ( + + + Copyright Violation + + Contains copyrighted material + + ), + }, + { + key: ComAtprotoModerationDefs.REASONVIOLATION, + label: ( + + + Illegal and Urgent + + + Glaring violations of law or terms of service + + + ), + }, + { + key: ComAtprotoModerationDefs.REASONOTHER, + label: ( + + + Other + + + An issue not included in these options + + + ), + }, + ], + [pal], + ) + const onPress = async () => { setError('') if (!issue) { @@ -45,22 +109,19 @@ export function Component({ } setIsProcessing(true) try { - // NOTE: we should update the lexicon of reasontype to include more options -prf - let reasonType = ComAtprotoModerationDefs.REASONOTHER - if (issue === 'spam') { - reasonType = ComAtprotoModerationDefs.REASONSPAM + if (issue === '__copyright__') { + Linking.openURL(DMCA_LINK) + } else { + await store.agent.createModerationReport({ + reasonType: issue, + subject: { + $type: 'com.atproto.repo.strongRef', + uri: postUri, + cid: postCid, + }, + }) + Toast.show("Thank you for your report! We'll look into it promptly.") } - const reason = ITEMS.find(item => item.key === issue)?.label || '' - await store.agent.createModerationReport({ - reasonType, - reason, - subject: { - $type: 'com.atproto.repo.strongRef', - uri: postUri, - cid: postCid, - }, - }) - Toast.show("Thank you for your report! We'll look into it promptly.") store.shell.closeModal() return } catch (e: any) { diff --git a/src/view/com/util/forms/RadioButton.tsx b/src/view/com/util/forms/RadioButton.tsx index f5696a76..9d1cb474 100644 --- a/src/view/com/util/forms/RadioButton.tsx +++ b/src/view/com/util/forms/RadioButton.tsx @@ -15,7 +15,7 @@ export function RadioButton({ }: { testID?: string type?: ButtonType - label: string + label: string | JSX.Element isSelected: boolean style?: StyleProp onPress: () => void @@ -47,7 +47,7 @@ export function RadioButton({ borderColor: theme.palette.default.border, }, 'default-light': { - borderColor: theme.palette.default.border, + borderColor: theme.palette.default.borderDark, }, }) const circleFillStyle = choose>( @@ -128,9 +128,13 @@ export function RadioButton({ ) : undefined} - - {label} - + {typeof label === 'string' ? ( + + {label} + + ) : ( + {label} + )} ) diff --git a/src/view/com/util/forms/RadioGroup.tsx b/src/view/com/util/forms/RadioGroup.tsx index 071540b7..14599e64 100644 --- a/src/view/com/util/forms/RadioGroup.tsx +++ b/src/view/com/util/forms/RadioGroup.tsx @@ -5,7 +5,7 @@ import {ButtonType} from './Button' import {s} from 'lib/styles' export interface RadioGroupItem { - label: string + label: string | JSX.Element key: string }