From abbc6543f423efdcd26f44666d9847ecd70779dc Mon Sep 17 00:00:00 2001 From: Foysal Ahamed Date: Tue, 15 Aug 2023 23:32:06 +0200 Subject: :sparkles: Repurpose report post modal and re-use for list reporting (#1070) * :sparkles: Repupose report post modal and re-use for list reporting * :sparkles: Allow reporting a feed generator * :sparkles: :recycle: Refactor report modal into one shared component for reporting different collections * :white_check_mark: Adjust report option selector in tests * :white_check_mark: Add test for list reporting * :recycle: :sparkles: Refactor reason options and add options for list and feedgen * :broom: Cleanup remaining todo * Fix to mutelist react keys * Fix regression from rebase * Improve customfeed mobile header --------- Co-authored-by: Paul Frazee --- src/state/models/content/list.ts | 2 +- src/state/models/ui/shell.ts | 22 ++- src/view/com/lists/ListActions.tsx | 13 ++ src/view/com/lists/ListItems.tsx | 7 + src/view/com/modals/Modal.tsx | 12 +- src/view/com/modals/Modal.web.tsx | 9 +- src/view/com/modals/report/Modal.tsx | 209 ++++++++++++++++++++++ src/view/com/modals/report/ReasonOptions.tsx | 123 +++++++++++++ src/view/com/modals/report/ReportAccount.tsx | 197 -------------------- src/view/com/modals/report/ReportPost.tsx | 258 --------------------------- src/view/com/modals/report/types.ts | 8 + src/view/com/profile/ProfileHeader.tsx | 2 +- src/view/com/util/forms/PostDropdownBtn.tsx | 6 +- src/view/index.ts | 2 + src/view/screens/CustomFeed.tsx | 78 ++++++-- src/view/screens/ProfileList.tsx | 12 ++ 16 files changed, 461 insertions(+), 499 deletions(-) create mode 100644 src/view/com/modals/report/Modal.tsx create mode 100644 src/view/com/modals/report/ReasonOptions.tsx delete mode 100644 src/view/com/modals/report/ReportAccount.tsx delete mode 100644 src/view/com/modals/report/ReportPost.tsx create mode 100644 src/view/com/modals/report/types.ts (limited to 'src') diff --git a/src/state/models/content/list.ts b/src/state/models/content/list.ts index 2498cf581..5d4ffb4fa 100644 --- a/src/state/models/content/list.ts +++ b/src/state/models/content/list.ts @@ -306,7 +306,7 @@ export class ListModel { this.hasMore = !!this.loadMoreCursor this.list = res.data.list this.items = this.items.concat( - res.data.items.map(item => ({...item, _reactKey: item.subject})), + res.data.items.map(item => ({...item, _reactKey: item.subject.did})), ) } } diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts index 348fa4899..e5fd5d426 100644 --- a/src/state/models/ui/shell.ts +++ b/src/state/models/ui/shell.ts @@ -48,16 +48,15 @@ export interface ModerationDetailsModal { moderation: ModerationUI } -export interface ReportPostModal { - name: 'report-post' - postUri: string - postCid: string -} - -export interface ReportAccountModal { - name: 'report-account' - did: string -} +export type ReportModal = { + name: 'report' +} & ( + | { + uri: string + cid: string + } + | {did: string} +) export interface CreateOrEditMuteListModal { name: 'create-or-edit-mute-list' @@ -159,8 +158,7 @@ export type Modal = // Moderation | ModerationDetailsModal - | ReportAccountModal - | ReportPostModal + | ReportModal | CreateOrEditMuteListModal | ListAddRemoveUserModal diff --git a/src/view/com/lists/ListActions.tsx b/src/view/com/lists/ListActions.tsx index ee5a2afcb..353338198 100644 --- a/src/view/com/lists/ListActions.tsx +++ b/src/view/com/lists/ListActions.tsx @@ -11,6 +11,7 @@ export const ListActions = ({ isOwner, onPressDeleteList, onPressShareList, + onPressReportList, reversed = false, // Default value of reversed is false }: { isOwner: boolean @@ -19,6 +20,7 @@ export const ListActions = ({ onPressEditList?: () => void onPressDeleteList?: () => void onPressShareList?: () => void + onPressReportList?: () => void reversed?: boolean // New optional prop }) => { const pal = usePalette('default') @@ -64,6 +66,17 @@ export const ListActions = ({ onPress={onPressShareList}> , + !isOwner && ( + + ), ] // If reversed is true, reverse the array to reverse the order of the buttons diff --git a/src/view/com/lists/ListItems.tsx b/src/view/com/lists/ListItems.tsx index 188518ea5..94e22f35e 100644 --- a/src/view/com/lists/ListItems.tsx +++ b/src/view/com/lists/ListItems.tsx @@ -45,6 +45,7 @@ export const ListItems = observer( onPressEditList, onPressDeleteList, onPressShareList, + onPressReportList, renderEmptyState, testID, headerOffset = 0, @@ -57,6 +58,7 @@ export const ListItems = observer( onPressEditList: () => void onPressDeleteList: () => void onPressShareList: () => void + onPressReportList: () => void renderEmptyState?: () => JSX.Element testID?: string headerOffset?: number @@ -169,6 +171,7 @@ export const ListItems = observer( onPressEditList={onPressEditList} onPressDeleteList={onPressDeleteList} onPressShareList={onPressShareList} + onPressReportList={onPressReportList} /> ) : null } else if (item === ERROR_ITEM) { @@ -208,6 +211,7 @@ export const ListItems = observer( onPressEditList, onPressDeleteList, onPressShareList, + onPressReportList, onPressTryAgain, onPressRetryLoadMore, ], @@ -267,6 +271,7 @@ const ListHeader = observer( onPressEditList, onPressDeleteList, onPressShareList, + onPressReportList, }: { list: AppBskyGraphDefs.ListView isOwner: boolean @@ -274,6 +279,7 @@ const ListHeader = observer( onPressEditList: () => void onPressDeleteList: () => void onPressShareList: () => void + onPressReportList: () => void }) => { const pal = usePalette('default') const store = useStores() @@ -319,6 +325,7 @@ const ListHeader = observer( onPressEditList={onPressEditList} onToggleSubscribed={onToggleSubscribed} onPressShareList={onPressShareList} + onPressReportList={onPressReportList} /> )} diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx index ce5dc40e0..efd06412d 100644 --- a/src/view/com/modals/Modal.tsx +++ b/src/view/com/modals/Modal.tsx @@ -13,14 +13,13 @@ import * as ConfirmModal from './Confirm' import * as EditProfileModal from './EditProfile' import * as ProfilePreviewModal from './ProfilePreview' import * as ServerInputModal from './ServerInput' -import * as ReportPostModal from './report/ReportPost' import * as RepostModal from './Repost' import * as SelfLabelModal from './SelfLabel' import * as CreateOrEditMuteListModal from './CreateOrEditMuteList' import * as ListAddRemoveUserModal from './ListAddRemoveUser' import * as AltImageModal from './AltImage' import * as EditImageModal from './AltImage' -import * as ReportAccountModal from './report/ReportAccount' +import * as ReportModal from './report/Modal' import * as DeleteAccountModal from './DeleteAccount' import * as ChangeHandleModal from './ChangeHandle' import * as WaitlistModal from './Waitlist' @@ -87,12 +86,9 @@ export const ModalsContainer = observer(function ModalsContainer() { } else if (activeModal?.name === 'server-input') { snapPoints = ServerInputModal.snapPoints element = - } else if (activeModal?.name === 'report-post') { - snapPoints = ReportPostModal.snapPoints - element = - } else if (activeModal?.name === 'report-account') { - snapPoints = ReportAccountModal.snapPoints - element = + } else if (activeModal?.name === 'report') { + snapPoints = ReportModal.snapPoints + element = } else if (activeModal?.name === 'create-or-edit-mute-list') { snapPoints = CreateOrEditMuteListModal.snapPoints element = diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx index 0f6247822..0e28b1618 100644 --- a/src/view/com/modals/Modal.web.tsx +++ b/src/view/com/modals/Modal.web.tsx @@ -10,8 +10,7 @@ import * as ConfirmModal from './Confirm' import * as EditProfileModal from './EditProfile' import * as ProfilePreviewModal from './ProfilePreview' import * as ServerInputModal from './ServerInput' -import * as ReportPostModal from './report/ReportPost' -import * as ReportAccountModal from './report/ReportAccount' +import * as ReportModal from './report/Modal' import * as CreateOrEditMuteListModal from './CreateOrEditMuteList' import * as ListAddRemoveUserModal from './ListAddRemoveUser' import * as DeleteAccountModal from './DeleteAccount' @@ -76,10 +75,8 @@ function Modal({modal}: {modal: ModalIface}) { element = } else if (modal.name === 'server-input') { element = - } else if (modal.name === 'report-post') { - element = - } else if (modal.name === 'report-account') { - element = + } else if (modal.name === 'report') { + element = } else if (modal.name === 'create-or-edit-mute-list') { element = } else if (modal.name === 'list-add-remove-user') { diff --git a/src/view/com/modals/report/Modal.tsx b/src/view/com/modals/report/Modal.tsx new file mode 100644 index 000000000..f386b110d --- /dev/null +++ b/src/view/com/modals/report/Modal.tsx @@ -0,0 +1,209 @@ +import React, {useState, useMemo} from 'react' +import {Linking, StyleSheet, TouchableOpacity, View} from 'react-native' +import {ScrollView} from 'react-native-gesture-handler' +import {AtUri} from '@atproto/api' +import {useStores} from 'state/index' +import {s} from 'lib/styles' +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' +import {ReportReasonOptions} from './ReasonOptions' +import {CollectionId} from './types' + +const DMCA_LINK = 'https://bsky.app/support/copyright' + +export const snapPoints = [575] + +const CollectionNames = { + [CollectionId.FeedGenerator]: 'Feed', + [CollectionId.Profile]: 'Profile', + [CollectionId.List]: 'List', + [CollectionId.Post]: 'Post', +} + +type ReportComponentProps = + | { + uri: string + cid: string + } + | { + did: string + } + +export function Component(content: ReportComponentProps) { + const store = useStores() + const pal = usePalette('default') + const [isProcessing, setIsProcessing] = useState(false) + const [showDetailsInput, setShowDetailsInput] = useState(false) + const [error, setError] = useState() + const [issue, setIssue] = useState() + const [details, setDetails] = useState() + const isAccountReport = 'did' in content + const subjectKey = isAccountReport ? content.did : content.uri + const atUri = useMemo( + () => (!isAccountReport ? new AtUri(subjectKey) : null), + [isAccountReport, subjectKey], + ) + + const submitReport = async () => { + setError('') + if (!issue) { + return + } + setIsProcessing(true) + try { + if (issue === '__copyright__') { + Linking.openURL(DMCA_LINK) + return + } + const $type = !isAccountReport + ? 'com.atproto.repo.strongRef' + : 'com.atproto.admin.defs#repoRef' + await store.agent.createModerationReport({ + reasonType: issue, + subject: { + $type, + ...content, + }, + 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) + } + + return ( + + + {showDetailsInput ? ( + + ) : ( + + )} + + + ) +} + +// If no atUri is passed, that means the reporting collection is account +const getCollectionNameForReport = (atUri: AtUri | null) => { + if (!atUri) return 'Account' + // Generic fallback for any collection being reported + return CollectionNames[atUri.collection as CollectionId] || 'Content' +} + +const SelectIssue = ({ + error, + setShowDetailsInput, + issue, + setIssue, + submitReport, + isProcessing, + atUri, +}: { + error: string | undefined + setShowDetailsInput: (v: boolean) => void + issue: string | undefined + setIssue: (v: string) => void + submitReport: () => void + isProcessing: boolean + atUri: AtUri | null +}) => { + const pal = usePalette('default') + const collectionName = getCollectionNameForReport(atUri) + const onSelectIssue = (v: string) => setIssue(v) + const goToDetails = () => { + if (issue === '__copyright__') { + Linking.openURL(DMCA_LINK) + return + } + setShowDetailsInput(true) + } + + return ( + <> + Report {collectionName} + + What is the issue with this {collectionName}? + + + {error ? ( + + + + ) : undefined} + {/* If no atUri is present, the report would be for account in which case, we allow sending without specifying a reason */} + {issue || !atUri ? ( + <> + + + Add details to report + + + ) : undefined} + + ) +} + +const styles = StyleSheet.create({ + container: { + paddingHorizontal: 10, + paddingBottom: 40, + }, + title: { + textAlign: 'center', + fontWeight: 'bold', + fontSize: 24, + marginBottom: 12, + }, + description: { + textAlign: 'center', + fontSize: 17, + paddingHorizontal: 22, + marginBottom: 10, + }, + addDetailsBtn: { + padding: 14, + alignSelf: 'center', + }, +}) diff --git a/src/view/com/modals/report/ReasonOptions.tsx b/src/view/com/modals/report/ReasonOptions.tsx new file mode 100644 index 000000000..23b49b664 --- /dev/null +++ b/src/view/com/modals/report/ReasonOptions.tsx @@ -0,0 +1,123 @@ +import {View} from 'react-native' +import React, {useMemo} from 'react' +import {AtUri, ComAtprotoModerationDefs} from '@atproto/api' + +import {Text} from '../../util/text/Text' +import {UsePaletteValue, usePalette} from 'lib/hooks/usePalette' +import {RadioGroup, RadioGroupItem} from 'view/com/util/forms/RadioGroup' +import {CollectionId} from './types' + +type ReasonMap = Record +const CommonReasons = { + [ComAtprotoModerationDefs.REASONRUDE]: { + title: 'Anti-Social Behavior', + description: 'Harassment, trolling, or intolerance', + }, + [ComAtprotoModerationDefs.REASONVIOLATION]: { + title: 'Illegal and Urgent', + description: 'Glaring violations of law or terms of service', + }, + [ComAtprotoModerationDefs.REASONOTHER]: { + title: 'Other', + description: 'An issue not included in these options', + }, +} +const CollectionToReasonsMap: Record = { + [CollectionId.Post]: { + [ComAtprotoModerationDefs.REASONSPAM]: { + title: 'Spam', + description: 'Excessive mentions or replies', + }, + [ComAtprotoModerationDefs.REASONSEXUAL]: { + title: 'Unwanted Sexual Content', + description: 'Nudity or pornography not labeled as such', + }, + __copyright__: { + title: 'Copyright Violation', + description: 'Contains copyrighted material', + }, + ...CommonReasons, + }, + [CollectionId.List]: { + ...CommonReasons, + [ComAtprotoModerationDefs.REASONVIOLATION]: { + title: 'Name or Description Violates Community Standards', + description: 'Terms used violate community standards', + }, + }, +} +const AccountReportReasons = { + [ComAtprotoModerationDefs.REASONMISLEADING]: { + title: 'Misleading Account', + description: 'Impersonation or false claims about identity or affiliation', + }, + [ComAtprotoModerationDefs.REASONSPAM]: { + title: 'Frequently Posts Unwanted Content', + description: 'Spam; excessive mentions or replies', + }, + [ComAtprotoModerationDefs.REASONVIOLATION]: { + title: 'Name or Description Violates Community Standards', + description: 'Terms used violate community standards', + }, +} + +const Option = ({ + pal, + title, + description, +}: { + pal: UsePaletteValue + description: string + title: string +}) => { + return ( + + + {title} + + {description} + + ) +} + +// This is mostly just content copy without almost any logic +// so this may grow over time and it makes sense to split it up into its own file +// to keep it separate from the actual reporting modal logic +const useReportRadioOptions = (pal: UsePaletteValue, atUri: AtUri | null) => + useMemo(() => { + let items: ReasonMap = {...CommonReasons} + // If no atUri is passed, that means the reporting collection is account + if (!atUri) { + items = {...AccountReportReasons} + } + + if (atUri?.collection && CollectionToReasonsMap[atUri.collection]) { + items = {...CollectionToReasonsMap[atUri.collection]} + } + + return Object.entries(items).map(([key, {title, description}]) => ({ + key, + label: