diff options
Diffstat (limited to 'src/view/com')
| -rw-r--r-- | src/view/com/modals/ReportAccount.tsx | 70 | ||||
| -rw-r--r-- | src/view/com/modals/ReportPost.tsx | 107 | ||||
| -rw-r--r-- | src/view/com/util/forms/RadioButton.tsx | 14 | ||||
| -rw-r--r-- | 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 601bccbd1..e03f06bde 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<string>('') const [issue, setIssue] = useState<string>('') const onSelectIssue = (v: string) => setIssue(v) + + const ITEMS: RadioGroupItem[] = useMemo( + () => [ + { + key: ComAtprotoModerationDefs.REASONMISLEADING, + label: ( + <View> + <Text style={pal.text} type="md-bold"> + Misleading Account + </Text> + <Text style={pal.textLight}> + Impersonation or false claims about identity or affiliation + </Text> + </View> + ), + }, + { + key: ComAtprotoModerationDefs.REASONSPAM, + label: ( + <View> + <Text style={pal.text} type="md-bold"> + Frequently Posts Unwanted Content + </Text> + <Text style={pal.textLight}> + Spam; excessive mentions or replies + </Text> + </View> + ), + }, + ], + [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 ( - <View - testID="reportAccountModal" - style={[s.flex1, s.pl10, s.pr10, pal.view]}> - <Text style={[pal.text, styles.title]}>Report account</Text> - <Text style={[pal.textLight, styles.description]}> + <View testID="reportAccountModal" style={[styles.container, pal.view]}> + <Text type="title-xl" style={[pal.text, styles.title]}> + Report account + </Text> + <Text type="xl" style={[pal.text, styles.description]}> What is the issue with this account? </Text> <RadioGroup @@ -73,6 +94,9 @@ export function Component({did}: {did: string}) { items={ITEMS} onSelect={onSelectIssue} /> + <Text type="sm" style={[pal.text, styles.description, s.pt10]}> + For other issues, please report specific posts. + </Text> {error ? ( <View style={s.mt10}> <ErrorMessage message={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 01a132af0..c2c89202b 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<string>('') const [issue, setIssue] = useState<string>('') const onSelectIssue = (v: string) => setIssue(v) + + const ITEMS: RadioGroupItem[] = useMemo( + () => [ + { + key: ComAtprotoModerationDefs.REASONSPAM, + label: ( + <View> + <Text style={pal.text} type="md-bold"> + Spam + </Text> + <Text style={pal.textLight}>Excessive mentions or replies</Text> + </View> + ), + }, + { + key: ComAtprotoModerationDefs.REASONSEXUAL, + label: ( + <View> + <Text style={pal.text} type="md-bold"> + Unwanted Sexual Content + </Text> + <Text style={pal.textLight}> + Nudity or pornography not labeled as such + </Text> + </View> + ), + }, + { + key: '__copyright__', + label: ( + <View> + <Text style={pal.text} type="md-bold"> + Copyright Violation + </Text> + <Text style={pal.textLight}>Contains copyrighted material</Text> + </View> + ), + }, + { + key: ComAtprotoModerationDefs.REASONVIOLATION, + label: ( + <View> + <Text style={pal.text} type="md-bold"> + Illegal and Urgent + </Text> + <Text style={pal.textLight}> + Glaring violations of law or terms of service + </Text> + </View> + ), + }, + { + key: ComAtprotoModerationDefs.REASONOTHER, + label: ( + <View> + <Text style={pal.text} type="md-bold"> + Other + </Text> + <Text style={pal.textLight}> + An issue not included in these options + </Text> + </View> + ), + }, + ], + [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 f5696a76d..9d1cb4749 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<ViewStyle> 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<TextStyle, Record<ButtonType, TextStyle>>( @@ -128,9 +128,13 @@ export function RadioButton({ <View style={[circleFillStyle, styles.circleFill]} /> ) : undefined} </View> - <Text type="button" style={[labelStyle, styles.label]}> - {label} - </Text> + {typeof label === 'string' ? ( + <Text type="button" style={[labelStyle, styles.label]}> + {label} + </Text> + ) : ( + <View style={styles.label}>{label}</View> + )} </View> </Button> ) diff --git a/src/view/com/util/forms/RadioGroup.tsx b/src/view/com/util/forms/RadioGroup.tsx index 071540b73..14599e649 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 } |