Wire up ReportAccount and ReportPost (#168)

src/state/models/shell-ui.ts

@@ -39,7 +39,7 @@ export class ServerInputModal {
 export class ReportPostModal {
   name = 'report-post'
 
-  constructor(public postUrl: string) {
+  constructor(public postUri: string, public postCid: string) {
     makeAutoObservable(this)
   }
 }

src/view/com/modals/ReportAccount.tsx

@@ -5,11 +5,13 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
+import {ComAtprotoReportReasonType} from '@atproto/api'
 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 {Text} from '../util/text/Text'
+import * as Toast from '../util/Toast'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {cleanError} from '../../../lib/strings'
 
@@ -21,7 +23,7 @@ const ITEMS: RadioGroupItem[] = [
 
 export const snapPoints = ['50%']
 
-export function Component() {
+export function Component({did}: {did: string}) {
   const store = useStores()
   const [isProcessing, setIsProcessing] = useState<boolean>(false)
   const [error, setError] = useState<string>('')
@@ -29,9 +31,26 @@ export function Component() {
   const onSelectIssue = (v: string) => setIssue(v)
   const onPress = async () => {
     setError('')
+    if (!issue) {
+      return
+    }
     setIsProcessing(true)
     try {
-      // TODO
+      // NOTE: we should update the lexicon of reasontype to include more options -prf
+      let reasonType = ComAtprotoReportReasonType.OTHER
+      if (issue === 'spam') {
+        reasonType = ComAtprotoReportReasonType.SPAM
+      }
+      const reason = ITEMS.find(item => item.key === issue)?.label || ''
+      await store.api.com.atproto.report.create({
+        reasonType,
+        reason,
+        subject: {
+          $type: 'com.atproto.repo.repoRef',
+          did,
+        },
+      })
+      Toast.show("Thank you for your report! We'll look into it promptly.")
       store.shell.closeModal()
       return
     } catch (e: any) {

src/view/com/modals/ReportPost.tsx

@@ -5,11 +5,13 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
+import {ComAtprotoReportReasonType} from '@atproto/api'
 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 {Text} from '../util/text/Text'
+import * as Toast from '../util/Toast'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {cleanError} from '../../../lib/strings'
 
@@ -22,7 +24,13 @@ const ITEMS: RadioGroupItem[] = [
 
 export const snapPoints = ['50%']
 
-export function Component() {
+export function Component({
+  postUri,
+  postCid,
+}: {
+  postUri: string
+  postCid: string
+}) {
   const store = useStores()
   const [isProcessing, setIsProcessing] = useState<boolean>(false)
   const [error, setError] = useState<string>('')
@@ -30,9 +38,27 @@ export function Component() {
   const onSelectIssue = (v: string) => setIssue(v)
   const onPress = async () => {
     setError('')
+    if (!issue) {
+      return
+    }
     setIsProcessing(true)
     try {
-      // TODO
+      // NOTE: we should update the lexicon of reasontype to include more options -prf
+      let reasonType = ComAtprotoReportReasonType.OTHER
+      if (issue === 'spam') {
+        reasonType = ComAtprotoReportReasonType.SPAM
+      }
+      const reason = ITEMS.find(item => item.key === issue)?.label || ''
+      await store.api.com.atproto.report.create({
+        reasonType,
+        reason,
+        subject: {
+          $type: 'com.atproto.repo.recordRef',
+          uri: postUri,
+          cid: postCid,
+        },
+      })
+      Toast.show("Thank you for your report! We'll look into it promptly.")
       store.shell.closeModal()
       return
     } catch (e: any) {

src/view/com/post-thread/PostThreadItem.tsx

@@ -36,6 +36,8 @@ export const PostThreadItem = observer(function PostThreadItem({
   const record = item.postRecord
   const hasEngagement = item.post.upvoteCount || item.post.repostCount
 
+  const itemUri = item.post.uri
+  const itemCid = item.post.cid
   const itemHref = useMemo(() => {
     const urip = new AtUri(item.post.uri)
     return `/profile/${item.post.author.handle}/post/${urip.rkey}`
@@ -148,6 +150,8 @@ export const PostThreadItem = observer(function PostThreadItem({
                 <View style={s.flex1} />
                 <PostDropdownBtn
                   style={styles.metaItem}
+                  itemUri={itemUri}
+                  itemCid={itemCid}
                   itemHref={itemHref}
                   itemTitle={itemTitle}
                   isAuthor={item.post.author.did === store.me.did}
@@ -227,6 +231,8 @@ export const PostThreadItem = observer(function PostThreadItem({
             <View style={[s.pl10, s.pb5]}>
               <PostCtrls
                 big
+                itemUri={itemUri}
+                itemCid={itemCid}
                 itemHref={itemHref}
                 itemTitle={itemTitle}
                 isAuthor={item.post.author.did === store.me.did}
@@ -308,6 +314,8 @@ export const PostThreadItem = observer(function PostThreadItem({
               ) : undefined}
               <PostEmbeds embed={item.post.embed} style={s.mb10} />
               <PostCtrls
+                itemUri={itemUri}
+                itemCid={itemCid}
                 itemHref={itemHref}
                 itemTitle={itemTitle}
                 isAuthor={item.post.author.did === store.me.did}

src/view/com/post/Post.tsx

@@ -80,6 +80,8 @@ export const Post = observer(function Post({
   const item = view.thread
   const record = view.thread.postRecord
 
+  const itemUri = item.post.uri
+  const itemCid = item.post.cid
   const itemUrip = new AtUri(item.post.uri)
   const itemHref = `/profile/${item.post.author.handle}/post/${itemUrip.rkey}`
   const itemTitle = `Post by ${item.post.author.handle}`
@@ -190,6 +192,8 @@ export const Post = observer(function Post({
           ) : undefined}
           <PostEmbeds embed={item.post.embed} style={s.mb10} />
           <PostCtrls
+            itemUri={itemUri}
+            itemCid={itemCid}
             itemHref={itemHref}
             itemTitle={itemTitle}
             isAuthor={item.post.author.did === store.me.did}

src/view/com/posts/FeedItem.tsx

@@ -34,6 +34,8 @@ export const FeedItem = observer(function ({
   const {track} = useAnalytics()
   const [deleted, setDeleted] = useState(false)
   const record = item.postRecord
+  const itemUri = item.post.uri
+  const itemCid = item.post.cid
   const itemHref = useMemo(() => {
     const urip = new AtUri(item.post.uri)
     return `/profile/${item.post.author.handle}/post/${urip.rkey}`
@@ -207,6 +209,8 @@ export const FeedItem = observer(function ({
             ) : null}
             <PostCtrls
               style={styles.ctrls}
+              itemUri={itemUri}
+              itemCid={itemCid}
               itemHref={itemHref}
               itemTitle={itemTitle}
               isAuthor={item.post.author.did === store.me.did}

src/view/com/util/PostCtrls.tsx

@@ -25,6 +25,8 @@ import {s, colors} from '../../lib/styles'
 import {useTheme} from '../../lib/ThemeContext'
 
 interface PostCtrlsOpts {
+  itemUri: string
+  itemCid: string
   itemHref: string
   itemTitle: string
   isAuthor: boolean
@@ -249,6 +251,8 @@ export function PostCtrls(opts: PostCtrlsOpts) {
         {opts.big ? undefined : (
           <PostDropdownBtn
             style={styles.ctrl}
+            itemUri={opts.itemUri}
+            itemCid={opts.itemCid}
             itemHref={opts.itemHref}
             itemTitle={opts.itemTitle}
             isAuthor={opts.isAuthor}

src/view/com/util/forms/DropdownButton.tsx

@@ -100,6 +100,8 @@ export function DropdownButton({
 export function PostDropdownBtn({
   style,
   children,
+  itemUri,
+  itemCid,
   itemHref,
   isAuthor,
   onCopyPostText,
@@ -107,6 +109,8 @@ export function PostDropdownBtn({
 }: {
   style?: StyleProp<ViewStyle>
   children?: React.ReactNode
+  itemUri: string
+  itemCid: string
   itemHref: string
   itemTitle: string
   isAuthor: boolean
@@ -143,7 +147,7 @@ export function PostDropdownBtn({
       icon: 'circle-exclamation',
       label: 'Report post',
       onPress() {
-        store.shell.openModal(new ReportPostModal(itemHref))
+        store.shell.openModal(new ReportPostModal(itemUri, itemCid))
       },
     },
     isAuthor