Add WIP 'report account' modal

src/state/models/shell-ui.ts

@@ -59,6 +59,14 @@ export class ReportPostModal {
   }
 }
 
+export class ReportAccountModal {
+  name = 'report-account'
+
+  constructor(public did: string) {
+    makeAutoObservable(this)
+  }
+}
+
 interface LightboxModel {
   canSwipeLeft: boolean
   canSwipeRight: boolean
@@ -136,6 +144,7 @@ export class ShellUiModel {
     | CreateSceneModal
     | ServerInputModal
     | ReportPostModal
+    | ReportAccountModal
     | undefined
   isLightboxActive = false
   activeLightbox:
@@ -164,7 +173,8 @@ export class ShellUiModel {
       | EditProfileModal
       | CreateSceneModal
       | ServerInputModal
-      | ReportPostModal,
+      | ReportPostModal
+      | ReportAccountModal,
   ) {
     this.isModalActive = true
     this.activeModal = modal

src/view/com/modals/Modal.tsx

@@ -13,6 +13,7 @@ import * as CreateSceneModal from './CreateScene'
 import * as InviteToSceneModal from './InviteToScene'
 import * as ServerInputModal from './ServerInput'
 import * as ReportPostModal from './ReportPost'
+import * as ReportAccountModal from './ReportAccount'
 
 const CLOSED_SNAPPOINTS = ['10%']
 
@@ -78,6 +79,13 @@ export const Modal = observer(function Modal() {
         {...(store.shell.activeModal as models.ReportPostModal)}
       />
     )
+  } else if (store.shell.activeModal?.name === 'report-account') {
+    snapPoints = ReportAccountModal.snapPoints
+    element = (
+      <ReportAccountModal.Component
+        {...(store.shell.activeModal as models.ReportAccountModal)}
+      />
+    )
   } else {
     element = <View />
   }

src/view/com/modals/ReportAccount.tsx

@@ -0,0 +1,95 @@
+import React, {useState} from 'react'
+import {
+  ActivityIndicator,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+import {useStores} from '../../../state'
+import {s, colors, gradients} from '../../lib/styles'
+import {RadioGroup, RadioGroupItem} from '../util/forms/RadioGroup'
+import {ErrorMessage} from '../util/ErrorMessage'
+
+const ITEMS: RadioGroupItem[] = [
+  {key: 'spam', label: 'Spam or excessive repeat posts'},
+  {key: 'abuse', label: 'Abusive, rude, or hateful'},
+  {key: 'illegal', label: 'Posts illegal content'},
+]
+
+export const snapPoints = ['50%']
+
+export function Component({did}: {did: string}) {
+  const store = useStores()
+  const [isProcessing, setIsProcessing] = useState<boolean>(false)
+  const [error, setError] = useState<string>('')
+  const [issue, setIssue] = useState<string>('')
+  const onSelectIssue = (v: string) => setIssue(v)
+  const onPress = async () => {
+    setError('')
+    setIsProcessing(true)
+    try {
+      // TODO
+      store.shell.closeModal()
+      return
+    } catch (e: any) {
+      setError(e.toString())
+      setIsProcessing(false)
+    }
+  }
+  return (
+    <View style={[s.flex1, s.pl10, s.pr10]}>
+      <Text style={styles.title}>Report account</Text>
+      <Text style={styles.description}>
+        What is the issue with this account?
+      </Text>
+      <RadioGroup items={ITEMS} onSelect={onSelectIssue} />
+      {error ? (
+        <View style={s.mt10}>
+          <ErrorMessage message={error} />
+        </View>
+      ) : undefined}
+      {isProcessing ? (
+        <View style={[styles.btn, s.mt10]}>
+          <ActivityIndicator />
+        </View>
+      ) : issue ? (
+        <TouchableOpacity style={s.mt10} onPress={onPress}>
+          <LinearGradient
+            colors={[gradients.primary.start, gradients.primary.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>
+  )
+}
+
+const styles = StyleSheet.create({
+  title: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+    fontSize: 24,
+    marginBottom: 12,
+  },
+  description: {
+    textAlign: 'center',
+    fontSize: 17,
+    paddingHorizontal: 22,
+    color: colors.gray5,
+    marginBottom: 10,
+  },
+  btn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    borderRadius: 32,
+    padding: 14,
+    backgroundColor: colors.gray1,
+  },
+})

src/view/com/profile/ProfileHeader.tsx

@@ -10,6 +10,7 @@ import {
   ConfirmModal,
   EditProfileModal,
   InviteToSceneModal,
+  ReportAccountModal,
   ProfileImageLightbox,
 } from '../../../state/models/shell-ui'
 import {pluralize} from '../../../lib/strings'
@@ -85,6 +86,9 @@ export const ProfileHeader = observer(function ProfileHeader({
     }
     onRefreshAll()
   }
+  const onPressReportAccount = () => {
+    store.shell.openModal(new ReportAccountModal(view.did))
+  }
 
   // loading
   // =
@@ -133,8 +137,15 @@ export const ProfileHeader = observer(function ProfileHeader({
   const isMe = store.me.did === view.did
   const isCreator = view.isScene && view.creator === store.me.did
   let dropdownItems: DropdownItem[] | undefined
+  if (!isMe) {
+    dropdownItems = dropdownItems || []
+    dropdownItems.push({
+      label: 'Report Account',
+      onPress: onPressReportAccount,
+    })
+  }
   if (isCreator || isMember) {
-    dropdownItems = []
+    dropdownItems = dropdownItems || []
     if (isCreator) {
       dropdownItems.push({
         label: 'Edit Profile',
@@ -182,8 +193,7 @@ export const ProfileHeader = observer(function ProfileHeader({
               )}
             </>
           )}
-          {view.isScene &&
-          (view.myState.member || view.creator === store.me.did) ? (
+          {dropdownItems?.length ? (
             <DropdownBtn
               items={dropdownItems}
               style={[styles.btn, styles.secondaryBtn]}>