[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>

bskyweb/templates/base.html

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

src/view/com/modals/Modal.tsx

@@ -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'

src/view/com/modals/Modal.web.tsx

@@ -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 ReportPostModal from './report/ReportPost'
-import * as ReportAccountModal from './ReportAccount'
+import * as ReportAccountModal from './report/ReportAccount'
 import * as CreateOrEditMuteListModal from './CreateOrEditMuteList'
 import * as ListAddRemoveUserModal from './ListAddRemoveUser'
 import * as DeleteAccountModal from './DeleteAccount'

src/view/com/modals/report/InputIssueDetails.tsx

@@ -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,
+  },
+})

src/view/com/modals/report/ReportAccount.tsx

@@ -1,32 +1,97 @@
 import React, {useState, useMemo} from 'react'
-import {
+import {TouchableOpacity, StyleSheet, View} from 'react-native'
-  ActivityIndicator,
-  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 {s} from 'lib/styles'
-import {RadioGroup, RadioGroupItem} from '../util/forms/RadioGroup'
+import {RadioGroup, RadioGroupItem} from '../../util/forms/RadioGroup'
-import {Text} from '../util/text/Text'
+import {Text} from '../../util/text/Text'
-import * as Toast from '../util/Toast'
+import * as Toast from '../../util/Toast'
-import {ErrorMessage} from '../util/error/ErrorMessage'
+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 [isProcessing, setIsProcessing] = useState(false)
-  const [error, setError] = useState<string>('')
+  const [error, setError] = useState<string>()
-  const [issue, setIssue] = 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 ? (
+      <SendReportButton onPress={onPress} isProcessing={isProcessing} />
-        <View style={[styles.btn, s.mt10]}>
+      <TouchableOpacity
-          <ActivityIndicator />
+        testID="addDetailsBtn"
-        </View>
+        style={styles.addDetailsBtn}
-      ) : issue ? (
+        onPress={goToDetails}
-        <TouchableOpacity
+        accessibilityRole="button"
-          testID="sendReportBtn"
+        accessibilityLabel="Add details"
-          style={s.mt10}
+        accessibilityHint="Add more details to your report">
-          onPress={onPress}
+        <Text style={[s.f18, pal.link]}>Add details to report</Text>
-          accessibilityRole="button"
+      </TouchableOpacity>
-          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>
   )
 }
 
@@ -142,13 +173,8 @@ const styles = StyleSheet.create({
     paddingHorizontal: 22,
     marginBottom: 10,
   },
-  btn: {
+  addDetailsBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    borderRadius: 32,
     padding: 14,
-    backgroundColor: colors.gray1,
+    alignSelf: 'center',
   },
 })

src/view/com/modals/report/ReportPost.tsx

@@ -1,25 +1,20 @@
 import React, {useState, useMemo} from 'react'
-import {
+import {Linking, StyleSheet, TouchableOpacity, View} from 'react-native'
-  ActivityIndicator,
-  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 {s} from 'lib/styles'
-import {RadioGroup, RadioGroupItem} from '../util/forms/RadioGroup'
+import {RadioGroup, RadioGroupItem} from '../../util/forms/RadioGroup'
-import {Text} from '../util/text/Text'
+import {Text} from '../../util/text/Text'
-import * as Toast from '../util/Toast'
+import * as Toast from '../../util/Toast'
-import {ErrorMessage} from '../util/error/ErrorMessage'
+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 [isProcessing, setIsProcessing] = useState(false)
-  const [error, setError] = useState<string>('')
+  const [showTextInput, setShowTextInput] = useState(false)
-  const [issue, setIssue] = useState<string>('')
+  const [error, setError] = useState<string>()
-  const onSelectIssue = (v: string) => setIssue(v)
+  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 () => {
+  const onSelectIssue = (v: string) => setIssue(v)
-    setError('')
+  const goToDetails = () => {
-    if (!issue) {
+    if (issue === '__copyright__') {
+      Linking.openURL(DMCA_LINK)
       return
     }
-    setIsProcessing(true)
+    setShowTextInput(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)
-    }
   }
+
   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 ? (
+      {issue ? (
-        <View style={[styles.btn, s.mt10]}>
+        <>
-          <ActivityIndicator />
+          <SendReportButton
-        </View>
+            onPress={submitReport}
-      ) : issue ? (
+            isProcessing={isProcessing}
-        <TouchableOpacity
+          />
-          testID="sendReportBtn"
+          <TouchableOpacity
-          style={s.mt10}
+            testID="addDetailsBtn"
-          onPress={onPress}
+            style={styles.addDetailsBtn}
-          accessibilityRole="button"
+            onPress={goToDetails}
-          accessibilityLabel="Report post"
+            accessibilityRole="button"
-          accessibilityHint={`Reports post with reason ${issue}`}>
+            accessibilityLabel="Add details"
-          <LinearGradient
+            accessibilityHint="Add more details to your report">
-            colors={[gradients.blueLight.start, gradients.blueLight.end]}
+            <Text style={[s.f18, pal.link]}>Add details to report</Text>
-            start={{x: 0, y: 0}}
+          </TouchableOpacity>
-            end={{x: 1, y: 1}}
+        </>
-            style={[styles.btn]}>
-            <Text style={[s.white, s.bold, s.f18]}>Send Report</Text>
-          </LinearGradient>
-        </TouchableOpacity>
       ) : undefined}
-    </View>
+    </>
   )
 }
 
@@ -196,13 +244,8 @@ const styles = StyleSheet.create({
     paddingHorizontal: 22,
     marginBottom: 10,
   },
-  btn: {
+  addDetailsBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    borderRadius: 32,
     padding: 14,
-    backgroundColor: colors.gray1,
+    alignSelf: 'center',
   },
 })

src/view/com/modals/report/SendReportButton.tsx

@@ -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,
+  },
+})

web/index.html

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