zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

[APP-680] Allow users to add details when reporting (#854) 

* allow user to add text when reporting post

* add DMCA override

* increase modal size

* fix dark mode text color

* re-organize components

* add details option when reporting account

* hard-code modal size so it works on smaller devices

* fix modal on web

* Remove outline from textarea focus

* Tweak some styles

* Fix lint

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>
zio/stable
Ansh 2023-06-07 09:11:04 -07:00 committed by GitHub
parent fc12a1205c
commit 0be14a1b46
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 365 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
bskyweb/templates/base.html
View File

@ -102,6 +102,7 @@
.ProseMirror-focused {
outline: 0;
}
textarea:focus,
input:focus {
outline: 0;
}

4
src/view/com/modals/Modal.tsx
View File

@ -10,13 +10,13 @@ import {usePalette} from 'lib/hooks/usePalette'
import * as ConfirmModal from './Confirm'
import * as EditProfileModal from './EditProfile'
import * as ServerInputModal from './ServerInput'
import * as ReportPostModal from './ReportPost'
import * as ReportPostModal from './report/ReportPost'
import * as RepostModal from './Repost'
import * as CreateOrEditMuteListModal from './CreateOrEditMuteList'
import * as ListAddRemoveUserModal from './ListAddRemoveUser'
import * as AltImageModal from './AltImage'
import * as EditImageModal from './AltImage'
import * as ReportAccountModal from './ReportAccount'
import * as ReportAccountModal from './report/ReportAccount'
import * as DeleteAccountModal from './DeleteAccount'
import * as ChangeHandleModal from './ChangeHandle'
import * as WaitlistModal from './Waitlist'

4
src/view/com/modals/Modal.web.tsx
View File

@ -9,8 +9,8 @@ import {isMobileWeb} from 'platform/detection'
import * as ConfirmModal from './Confirm'
import * as EditProfileModal from './EditProfile'
import * as ServerInputModal from './ServerInput'
import * as ReportPostModal from './ReportPost'
import * as ReportAccountModal from './ReportAccount'
import * as ReportPostModal from './report/ReportPost'
import * as ReportAccountModal from './report/ReportAccount'
import * as CreateOrEditMuteListModal from './CreateOrEditMuteList'
import * as ListAddRemoveUserModal from './ListAddRemoveUser'
import * as DeleteAccountModal from './DeleteAccount'

93
src/view/com/modals/report/InputIssueDetails.tsx 100644
View File

@ -0,0 +1,93 @@
import React from 'react'
import {View, TouchableOpacity, StyleSheet} from 'react-native'
import {TextInput} from '../util'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {CharProgress} from '../../composer/char-progress/CharProgress'
import {Text} from '../../util/text/Text'
import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles'
import {SendReportButton} from './SendReportButton'
import {isDesktopWeb} from 'platform/detection'
export function InputIssueDetails({
details,
setDetails,
goBack,
submitReport,
isProcessing,
}: {
details: string | undefined
setDetails: (v: string) => void
goBack: () => void
submitReport: () => void
isProcessing: boolean
}) {
const pal = usePalette('default')
return (
<View style={[styles.detailsContainer]}>
<TouchableOpacity
testID="addDetailsBtn"
style={[s.mb10, styles.backBtn]}
onPress={goBack}
accessibilityRole="button"
accessibilityLabel="Add details"
accessibilityHint="Add more details to your report">
<FontAwesomeIcon size={18} icon="angle-left" style={[pal.link]} />
<Text style={[pal.text, s.f18, pal.link]}> Back</Text>
</TouchableOpacity>
<View style={[pal.btn, styles.detailsInputContainer]}>
<TextInput
accessibilityLabel="Text input field"
accessibilityHint="Enter a reason for reporting this post."
placeholder="Enter a reason or any other details here."
placeholderTextColor={pal.textLight.color}
value={details}
onChangeText={setDetails}
autoFocus={true}
numberOfLines={3}
multiline={true}
textAlignVertical="top"
maxLength={300}
style={[styles.detailsInput, pal.text]}
/>
<View style={styles.detailsInputBottomBar}>
<View style={styles.charCounter}>
<CharProgress count={details?.length || 0} />
</View>
</View>
</View>
<SendReportButton onPress={submitReport} isProcessing={isProcessing} />
</View>
)
}
const styles = StyleSheet.create({
detailsContainer: {
marginTop: isDesktopWeb ? 0 : 12,
},
backBtn: {
flexDirection: 'row',
alignItems: 'center',
},
detailsInputContainer: {
borderRadius: 8,
},
detailsInput: {
paddingHorizontal: 12,
paddingTop: 12,
paddingBottom: 12,
borderRadius: 8,
minHeight: 100,
fontSize: 16,
},
detailsInputBottomBar: {
alignSelf: 'flex-end',
},
charCounter: {
flexDirection: 'row',
alignItems: 'center',
paddingRight: 10,
paddingBottom: 8,
},
})

164
src/view/com/modals/ReportAccount.tsx → src/view/com/modals/report/ReportAccount.tsx
View File

@ -1,32 +1,97 @@
import React, {useState, useMemo} from 'react'
import {
ActivityIndicator,
StyleSheet,
TouchableOpacity,
View,
} from 'react-native'
import {TouchableOpacity, StyleSheet, View} from 'react-native'
import {ComAtprotoModerationDefs} from '@atproto/api'
import LinearGradient from 'react-native-linear-gradient'
import {useStores} from 'state/index'
import {s, colors, gradients} from 'lib/styles'
import {RadioGroup, RadioGroupItem} from '../util/forms/RadioGroup'
import {Text} from '../util/text/Text'
import * as Toast from '../util/Toast'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {s} from 'lib/styles'
import {RadioGroup, RadioGroupItem} from '../../util/forms/RadioGroup'
import {Text} from '../../util/text/Text'
import * as Toast from '../../util/Toast'
import {ErrorMessage} from '../../util/error/ErrorMessage'
import {cleanError} from 'lib/strings/errors'
import {usePalette} from 'lib/hooks/usePalette'
import {isDesktopWeb} from 'platform/detection'
import {SendReportButton} from './SendReportButton'
import {InputIssueDetails} from './InputIssueDetails'
export const snapPoints = ['50%']
export const snapPoints = [400]
export function Component({did}: {did: string}) {
const store = useStores()
const pal = usePalette('default')
const [isProcessing, setIsProcessing] = useState<boolean>(false)
const [error, setError] = useState<string>('')
const [issue, setIssue] = useState<string>('')
const [isProcessing, setIsProcessing] = useState(false)
const [error, setError] = useState<string>()
const [issue, setIssue] = useState<string>()
const onSelectIssue = (v: string) => setIssue(v)
const [details, setDetails] = useState<string>()
const [showDetailsInput, setShowDetailsInput] = useState(false)
const onPress = async () => {
setError('')
if (!issue) {
return
}
setIsProcessing(true)
try {
await store.agent.com.atproto.moderation.createReport({
reasonType: issue,
subject: {
$type: 'com.atproto.admin.defs#repoRef',
did,
},
reason: details,
})
Toast.show("Thank you for your report! We'll look into it promptly.")
store.shell.closeModal()
return
} catch (e: any) {
setError(cleanError(e))
setIsProcessing(false)
}
}
const goBack = () => {
setShowDetailsInput(false)
}
const goToDetails = () => {
setShowDetailsInput(true)
}
return (
<View testID="reportAccountModal" style={[styles.container, pal.view]}>
{showDetailsInput ? (
<InputIssueDetails
submitReport={onPress}
setDetails={setDetails}
details={details}
isProcessing={isProcessing}
goBack={goBack}
/>
) : (
<SelectIssue
onPress={onPress}
onSelectIssue={onSelectIssue}
error={error}
isProcessing={isProcessing}
goToDetails={goToDetails}
/>
)}
</View>
)
}
const SelectIssue = ({
onPress,
onSelectIssue,
error,
isProcessing,
goToDetails,
}: {
onPress: () => void
onSelectIssue: (v: string) => void
error: string | undefined
isProcessing: boolean
goToDetails: () => void
}) => {
const pal = usePalette('default')
const ITEMS: RadioGroupItem[] = useMemo(
() => [
{
@ -58,31 +123,8 @@ export function Component({did}: {did: string}) {
],
[pal],
)
const onPress = async () => {
setError('')
if (!issue) {
return
}
setIsProcessing(true)
try {
await store.agent.com.atproto.moderation.createReport({
reasonType: issue,
subject: {
$type: 'com.atproto.admin.defs#repoRef',
did,
},
})
Toast.show("Thank you for your report! We'll look into it promptly.")
store.shell.closeModal()
return
} catch (e: any) {
setError(cleanError(e))
setIsProcessing(false)
}
}
return (
<View testID="reportAccountModal" style={[styles.container, pal.view]}>
<>
<Text type="title-xl" style={[pal.text, styles.title]}>
Report account
</Text>
@ -102,28 +144,17 @@ export function Component({did}: {did: string}) {
<ErrorMessage message={error} />
</View>
) : undefined}
{isProcessing ? (
<View style={[styles.btn, s.mt10]}>
<ActivityIndicator />
</View>
) : issue ? (
<TouchableOpacity
testID="sendReportBtn"
style={s.mt10}
onPress={onPress}
accessibilityRole="button"
accessibilityLabel="Report account"
accessibilityHint={`Reports account with reason ${issue}`}>
<LinearGradient
colors={[gradients.blueLight.start, gradients.blueLight.end]}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
style={[styles.btn]}>
<Text style={[s.white, s.bold, s.f18]}>Send Report</Text>
</LinearGradient>
</TouchableOpacity>
) : undefined}
</View>
<SendReportButton onPress={onPress} isProcessing={isProcessing} />
<TouchableOpacity
testID="addDetailsBtn"
style={styles.addDetailsBtn}
onPress={goToDetails}
accessibilityRole="button"
accessibilityLabel="Add details"
accessibilityHint="Add more details to your report">
<Text style={[s.f18, pal.link]}>Add details to report</Text>
</TouchableOpacity>
</>
)
}
@ -142,13 +173,8 @@ const styles = StyleSheet.create({
paddingHorizontal: 22,
marginBottom: 10,
},
btn: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
borderRadius: 32,
addDetailsBtn: {
padding: 14,
backgroundColor: colors.gray1,
alignSelf: 'center',
},
})

185
src/view/com/modals/ReportPost.tsx → src/view/com/modals/report/ReportPost.tsx
View File

@ -1,25 +1,20 @@
import React, {useState, useMemo} from 'react'
import {
ActivityIndicator,
Linking,
StyleSheet,
TouchableOpacity,
View,
} from 'react-native'
import {Linking, StyleSheet, TouchableOpacity, View} from 'react-native'
import {ComAtprotoModerationDefs} from '@atproto/api'
import LinearGradient from 'react-native-linear-gradient'
import {useStores} from 'state/index'
import {s, colors, gradients} from 'lib/styles'
import {RadioGroup, RadioGroupItem} from '../util/forms/RadioGroup'
import {Text} from '../util/text/Text'
import * as Toast from '../util/Toast'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {s} from 'lib/styles'
import {RadioGroup, RadioGroupItem} from '../../util/forms/RadioGroup'
import {Text} from '../../util/text/Text'
import * as Toast from '../../util/Toast'
import {ErrorMessage} from '../../util/error/ErrorMessage'
import {cleanError} from 'lib/strings/errors'
import {usePalette} from 'lib/hooks/usePalette'
import {SendReportButton} from './SendReportButton'
import {InputIssueDetails} from './InputIssueDetails'
const DMCA_LINK = 'https://bsky.app/support/copyright'
export const snapPoints = [550]
export const snapPoints = [575]
export function Component({
postUri,
@ -30,11 +25,86 @@ export function Component({
}) {
const store = useStores()
const pal = usePalette('default')
const [isProcessing, setIsProcessing] = useState<boolean>(false)
const [error, setError] = useState<string>('')
const [issue, setIssue] = useState<string>('')
const onSelectIssue = (v: string) => setIssue(v)
const [isProcessing, setIsProcessing] = useState(false)
const [showTextInput, setShowTextInput] = useState(false)
const [error, setError] = useState<string>()
const [issue, setIssue] = useState<string>()
const [details, setDetails] = useState<string>()
const submitReport = async () => {
setError('')
if (!issue) {
return
}
setIsProcessing(true)
try {
if (issue === '__copyright__') {
Linking.openURL(DMCA_LINK)
return
}
await store.agent.createModerationReport({
reasonType: issue,
subject: {
$type: 'com.atproto.repo.strongRef',
uri: postUri,
cid: postCid,
},
reason: details,
})
Toast.show("Thank you for your report! We'll look into it promptly.")
store.shell.closeModal()
return
} catch (e: any) {
setError(cleanError(e))
setIsProcessing(false)
}
}
const goBack = () => {
setShowTextInput(false)
}
return (
<View testID="reportPostModal" style={[s.flex1, s.pl10, s.pr10, pal.view]}>
{showTextInput ? (
<InputIssueDetails
details={details}
setDetails={setDetails}
goBack={goBack}
submitReport={submitReport}
isProcessing={isProcessing}
/>
) : (
<SelectIssue
setShowTextInput={setShowTextInput}
error={error}
issue={issue}
setIssue={setIssue}
submitReport={submitReport}
isProcessing={isProcessing}
/>
)}
</View>
)
}
const SelectIssue = ({
error,
setShowTextInput,
issue,
setIssue,
submitReport,
isProcessing,
}: {
error: string | undefined
setShowTextInput: (v: boolean) => void
issue: string | undefined
setIssue: (v: string) => void
submitReport: () => void
isProcessing: boolean
}) => {
const pal = usePalette('default')
const ITEMS: RadioGroupItem[] = useMemo(
() => [
{
@ -115,35 +185,17 @@ export function Component({
[pal],
)
const onPress = async () => {
setError('')
if (!issue) {
const onSelectIssue = (v: string) => setIssue(v)
const goToDetails = () => {
if (issue === '__copyright__') {
Linking.openURL(DMCA_LINK)
return
}
setIsProcessing(true)
try {
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.")
}
store.shell.closeModal()
return
} catch (e: any) {
setError(cleanError(e))
setIsProcessing(false)
}
setShowTextInput(true)
}
return (
<View testID="reportPostModal" style={[s.flex1, s.pl10, s.pr10, pal.view]}>
<>
<Text style={[pal.text, styles.title]}>Report post</Text>
<Text style={[pal.textLight, styles.description]}>
What is the issue with this post?
@ -158,28 +210,24 @@ export function Component({
<ErrorMessage message={error} />
</View>
) : undefined}
{isProcessing ? (
<View style={[styles.btn, s.mt10]}>
<ActivityIndicator />
</View>
) : issue ? (
<TouchableOpacity
testID="sendReportBtn"
style={s.mt10}
onPress={onPress}
accessibilityRole="button"
accessibilityLabel="Report post"
accessibilityHint={`Reports post with reason ${issue}`}>
<LinearGradient
colors={[gradients.blueLight.start, gradients.blueLight.end]}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
style={[styles.btn]}>
<Text style={[s.white, s.bold, s.f18]}>Send Report</Text>
</LinearGradient>
</TouchableOpacity>
{issue ? (
<>
<SendReportButton
onPress={submitReport}
isProcessing={isProcessing}
/>
<TouchableOpacity
testID="addDetailsBtn"
style={styles.addDetailsBtn}
onPress={goToDetails}
accessibilityRole="button"
accessibilityLabel="Add details"
accessibilityHint="Add more details to your report">
<Text style={[s.f18, pal.link]}>Add details to report</Text>
</TouchableOpacity>
</>
) : undefined}
</View>
</>
)
}
@ -196,13 +244,8 @@ const styles = StyleSheet.create({
paddingHorizontal: 22,
marginBottom: 10,
},
btn: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
borderRadius: 32,
addDetailsBtn: {
padding: 14,
backgroundColor: colors.gray1,
alignSelf: 'center',
},
})

57
src/view/com/modals/report/SendReportButton.tsx 100644
View File

@ -0,0 +1,57 @@
import React from 'react'
import LinearGradient from 'react-native-linear-gradient'
import {
ActivityIndicator,
StyleSheet,
TouchableOpacity,
View,
} from 'react-native'
import {Text} from '../../util/text/Text'
import {s, gradients, colors} from 'lib/styles'
export function SendReportButton({
onPress,
isProcessing,
}: {
onPress: () => void
isProcessing: boolean
}) {
// loading state
// =
if (isProcessing) {
return (
<View style={[styles.btn, s.mt10]}>
<ActivityIndicator />
</View>
)
}
return (
<TouchableOpacity
testID="sendReportBtn"
style={s.mt10}
onPress={onPress}
accessibilityRole="button"
accessibilityLabel="Report post"
accessibilityHint={`Reports post with reason and details`}>
<LinearGradient
colors={[gradients.blueLight.start, gradients.blueLight.end]}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
style={[styles.btn]}>
<Text style={[s.white, s.bold, s.f18]}>Send Report</Text>
</LinearGradient>
</TouchableOpacity>
)
}
const styles = StyleSheet.create({
btn: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
borderRadius: 32,
padding: 14,
backgroundColor: colors.gray1,
},
})

1
web/index.html
View File

@ -106,6 +106,7 @@
.ProseMirror-focused {
outline: 0;
}
textarea:focus,
input:focus {
outline: 0;
}