forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Update report modal to use new groupings (close [APP-567]) (#533)
authored by
Paul Frazee
and committed by
GitHub
fc19ffba
9b86cb5c
+142
-51
+48
-22
src/view/com/modals/ReportAccount.tsx
+48
-22
src/view/com/modals/ReportAccount.tsx
···
1
-
import React, {useState} from 'react'
1
+
import React, {useState, useMemo} from 'react'
2
2
import {
3
3
ActivityIndicator,
4
4
StyleSheet,
···
15
15
import {ErrorMessage} from '../util/error/ErrorMessage'
16
16
import {cleanError} from 'lib/strings/errors'
17
17
import {usePalette} from 'lib/hooks/usePalette'
18
-
19
-
const ITEMS: RadioGroupItem[] = [
20
-
{key: 'spam', label: 'Spam or excessive repeat posts'},
21
-
{key: 'abuse', label: 'Abusive, rude, or hateful'},
22
-
{key: 'illegal', label: 'Posts illegal content'},
23
-
]
18
+
import {isDesktopWeb} from 'platform/detection'
24
19
25
20
export const snapPoints = ['50%']
26
21
···
31
26
const [error, setError] = useState<string>('')
32
27
const [issue, setIssue] = useState<string>('')
33
28
const onSelectIssue = (v: string) => setIssue(v)
29
+
30
+
const ITEMS: RadioGroupItem[] = useMemo(
31
+
() => [
32
+
{
33
+
key: ComAtprotoModerationDefs.REASONMISLEADING,
34
+
label: (
35
+
<View>
36
+
<Text style={pal.text} type="md-bold">
37
+
Misleading Account
38
+
</Text>
39
+
<Text style={pal.textLight}>
40
+
Impersonation or false claims about identity or affiliation
41
+
</Text>
42
+
</View>
43
+
),
44
+
},
45
+
{
46
+
key: ComAtprotoModerationDefs.REASONSPAM,
47
+
label: (
48
+
<View>
49
+
<Text style={pal.text} type="md-bold">
50
+
Frequently Posts Unwanted Content
51
+
</Text>
52
+
<Text style={pal.textLight}>
53
+
Spam; excessive mentions or replies
54
+
</Text>
55
+
</View>
56
+
),
57
+
},
58
+
],
59
+
[pal],
60
+
)
61
+
34
62
const onPress = async () => {
35
63
setError('')
36
64
if (!issue) {
···
38
66
}
39
67
setIsProcessing(true)
40
68
try {
41
-
// NOTE: we should update the lexicon of reasontype to include more options -prf
42
-
let reasonType = ComAtprotoModerationDefs.REASONOTHER
43
-
if (issue === 'spam') {
44
-
reasonType = ComAtprotoModerationDefs.REASONSPAM
45
-
}
46
-
const reason = ITEMS.find(item => item.key === issue)?.label || ''
47
69
await store.agent.com.atproto.moderation.createReport({
48
-
reasonType,
49
-
reason,
70
+
reasonType: issue,
50
71
subject: {
51
72
$type: 'com.atproto.admin.defs#repoRef',
52
73
did,
···
61
82
}
62
83
}
63
84
return (
64
-
<View
65
-
testID="reportAccountModal"
66
-
style={[s.flex1, s.pl10, s.pr10, pal.view]}>
67
-
<Text style={[pal.text, styles.title]}>Report account</Text>
68
-
<Text style={[pal.textLight, styles.description]}>
85
+
<View testID="reportAccountModal" style={[styles.container, pal.view]}>
86
+
<Text type="title-xl" style={[pal.text, styles.title]}>
87
+
Report account
88
+
</Text>
89
+
<Text type="xl" style={[pal.text, styles.description]}>
69
90
What is the issue with this account?
70
91
</Text>
71
92
<RadioGroup
···
73
94
items={ITEMS}
74
95
onSelect={onSelectIssue}
75
96
/>
97
+
<Text type="sm" style={[pal.text, styles.description, s.pt10]}>
98
+
For other issues, please report specific posts.
99
+
</Text>
76
100
{error ? (
77
101
<View style={s.mt10}>
78
102
<ErrorMessage message={error} />
···
101
125
}
102
126
103
127
const styles = StyleSheet.create({
128
+
container: {
129
+
flex: 1,
130
+
paddingHorizontal: isDesktopWeb ? 0 : 10,
131
+
},
104
132
title: {
105
133
textAlign: 'center',
106
134
fontWeight: 'bold',
107
-
fontSize: 24,
108
135
marginBottom: 12,
109
136
},
110
137
description: {
111
138
textAlign: 'center',
112
-
fontSize: 17,
113
139
paddingHorizontal: 22,
114
140
marginBottom: 10,
115
141
},
+84
-23
src/view/com/modals/ReportPost.tsx
+84
-23
src/view/com/modals/ReportPost.tsx
···
1
-
import React, {useState} from 'react'
1
+
import React, {useState, useMemo} from 'react'
2
2
import {
3
3
ActivityIndicator,
4
+
Linking,
4
5
StyleSheet,
5
6
TouchableOpacity,
6
7
View,
···
16
17
import {cleanError} from 'lib/strings/errors'
17
18
import {usePalette} from 'lib/hooks/usePalette'
18
19
19
-
const ITEMS: RadioGroupItem[] = [
20
-
{key: 'spam', label: 'Spam or excessive repeat posts'},
21
-
{key: 'abuse', label: 'Abusive, rude, or hateful'},
22
-
{key: 'copyright', label: 'Contains copyrighted material'},
23
-
{key: 'illegal', label: 'Contains illegal content'},
24
-
]
20
+
const DMCA_LINK = 'https://bsky.app/support/copyright'
25
21
26
-
export const snapPoints = ['50%']
22
+
export const snapPoints = [500]
27
23
28
24
export function Component({
29
25
postUri,
···
38
34
const [error, setError] = useState<string>('')
39
35
const [issue, setIssue] = useState<string>('')
40
36
const onSelectIssue = (v: string) => setIssue(v)
37
+
38
+
const ITEMS: RadioGroupItem[] = useMemo(
39
+
() => [
40
+
{
41
+
key: ComAtprotoModerationDefs.REASONSPAM,
42
+
label: (
43
+
<View>
44
+
<Text style={pal.text} type="md-bold">
45
+
Spam
46
+
</Text>
47
+
<Text style={pal.textLight}>Excessive mentions or replies</Text>
48
+
</View>
49
+
),
50
+
},
51
+
{
52
+
key: ComAtprotoModerationDefs.REASONSEXUAL,
53
+
label: (
54
+
<View>
55
+
<Text style={pal.text} type="md-bold">
56
+
Unwanted Sexual Content
57
+
</Text>
58
+
<Text style={pal.textLight}>
59
+
Nudity or pornography not labeled as such
60
+
</Text>
61
+
</View>
62
+
),
63
+
},
64
+
{
65
+
key: '__copyright__',
66
+
label: (
67
+
<View>
68
+
<Text style={pal.text} type="md-bold">
69
+
Copyright Violation
70
+
</Text>
71
+
<Text style={pal.textLight}>Contains copyrighted material</Text>
72
+
</View>
73
+
),
74
+
},
75
+
{
76
+
key: ComAtprotoModerationDefs.REASONVIOLATION,
77
+
label: (
78
+
<View>
79
+
<Text style={pal.text} type="md-bold">
80
+
Illegal and Urgent
81
+
</Text>
82
+
<Text style={pal.textLight}>
83
+
Glaring violations of law or terms of service
84
+
</Text>
85
+
</View>
86
+
),
87
+
},
88
+
{
89
+
key: ComAtprotoModerationDefs.REASONOTHER,
90
+
label: (
91
+
<View>
92
+
<Text style={pal.text} type="md-bold">
93
+
Other
94
+
</Text>
95
+
<Text style={pal.textLight}>
96
+
An issue not included in these options
97
+
</Text>
98
+
</View>
99
+
),
100
+
},
101
+
],
102
+
[pal],
103
+
)
104
+
41
105
const onPress = async () => {
42
106
setError('')
43
107
if (!issue) {
···
45
109
}
46
110
setIsProcessing(true)
47
111
try {
48
-
// NOTE: we should update the lexicon of reasontype to include more options -prf
49
-
let reasonType = ComAtprotoModerationDefs.REASONOTHER
50
-
if (issue === 'spam') {
51
-
reasonType = ComAtprotoModerationDefs.REASONSPAM
112
+
if (issue === '__copyright__') {
113
+
Linking.openURL(DMCA_LINK)
114
+
} else {
115
+
await store.agent.createModerationReport({
116
+
reasonType: issue,
117
+
subject: {
118
+
$type: 'com.atproto.repo.strongRef',
119
+
uri: postUri,
120
+
cid: postCid,
121
+
},
122
+
})
123
+
Toast.show("Thank you for your report! We'll look into it promptly.")
52
124
}
53
-
const reason = ITEMS.find(item => item.key === issue)?.label || ''
54
-
await store.agent.createModerationReport({
55
-
reasonType,
56
-
reason,
57
-
subject: {
58
-
$type: 'com.atproto.repo.strongRef',
59
-
uri: postUri,
60
-
cid: postCid,
61
-
},
62
-
})
63
-
Toast.show("Thank you for your report! We'll look into it promptly.")
64
125
store.shell.closeModal()
65
126
return
66
127
} catch (e: any) {
+9
-5
src/view/com/util/forms/RadioButton.tsx
+9
-5
src/view/com/util/forms/RadioButton.tsx
···
15
15
}: {
16
16
testID?: string
17
17
type?: ButtonType
18
-
label: string
18
+
label: string | JSX.Element
19
19
isSelected: boolean
20
20
style?: StyleProp<ViewStyle>
21
21
onPress: () => void
···
47
47
borderColor: theme.palette.default.border,
48
48
},
49
49
'default-light': {
50
-
borderColor: theme.palette.default.border,
50
+
borderColor: theme.palette.default.borderDark,
51
51
},
52
52
})
53
53
const circleFillStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(
···
128
128
<View style={[circleFillStyle, styles.circleFill]} />
129
129
) : undefined}
130
130
</View>
131
-
<Text type="button" style={[labelStyle, styles.label]}>
132
-
{label}
133
-
</Text>
131
+
{typeof label === 'string' ? (
132
+
<Text type="button" style={[labelStyle, styles.label]}>
133
+
{label}
134
+
</Text>
135
+
) : (
136
+
<View style={styles.label}>{label}</View>
137
+
)}
134
138
</View>
135
139
</Button>
136
140
)