Conversation-level reporting by reporting most recent message available (#7423)

* report latest message via convo menu

* check all messages we have

* fix types

* rm convo warning

src/components/ReportDialog/SelectReportOptionView.tsx

@@ -25,9 +25,7 @@ import {SquareArrowTopRight_Stroke2_Corner0_Rounded as SquareArrowTopRight} from
 import {Text} from '#/components/Typography'
 import {ReportDialogProps} from './types'
 
-export function SelectReportOptionView({
+export function SelectReportOptionView(props: {
-  ...props
-}: {
   params: ReportDialogProps['params']
   labelers: AppBskyLabelerDefs.LabelerViewDetailed[]
   onSelectReportOption: (reportOption: ReportOption) => void

src/components/dms/ConvoMenu.tsx

@@ -35,6 +35,7 @@ import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/
 import * as Menu from '#/components/Menu'
 import * as Prompt from '#/components/Prompt'
 import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '../icons/Bubble'
+import {ReportDialog} from './ReportDialog'
 
 let ConvoMenu = ({
   convo: initialConvo,
@@ -44,6 +45,7 @@ let ConvoMenu = ({
   showMarkAsRead,
   hideTrigger,
   blockInfo,
+  latestReportableMessage,
   style,
 }: {
   convo: ChatBskyConvoDefs.ConvoView
@@ -56,6 +58,7 @@ let ConvoMenu = ({
     listBlocks: ModerationCause[]
     userBlock?: ModerationCause
   }
+  latestReportableMessage?: ChatBskyConvoDefs.MessageView
   style?: ViewStyleProp['style']
 }): React.ReactNode => {
   const navigation = useNavigation<NavigationProp>()
@@ -222,7 +225,19 @@ let ConvoMenu = ({
         convoId={convo.id}
         currentScreen={currentScreen}
       />
-      <ReportConversationPrompt control={reportControl} />
+      {latestReportableMessage ? (
+        <ReportDialog
+          params={{
+            type: 'convoMessage',
+            convoId: convo.id,
+            message: latestReportableMessage,
+          }}
+          control={reportControl}
+        />
+      ) : (
+        <ReportConversationPrompt control={reportControl} />
+      )}
+
       <BlockedByListDialog
         control={blockedByListControl}
         listBlocks={listBlocks}

src/components/dms/MessagesListHeader.tsx

@@ -151,6 +151,15 @@ function HeaderReady({
         moderation.ui('displayName'),
       )
 
+  const latestMessageFromOther = convoState.items.findLast(
+    item => item.type === 'message' && item.message.sender.did === profile.did,
+  )
+
+  const latestReportableMessage =
+    latestMessageFromOther?.type === 'message'
+      ? latestMessageFromOther.message
+      : undefined
+
   return (
     <View style={[a.flex_1]}>
       <View style={[a.w_full, a.flex_row, a.align_center, a.justify_between]}>
@@ -208,6 +217,7 @@ function HeaderReady({
             profile={profile}
             currentScreen="conversation"
             blockInfo={blockInfo}
+            latestReportableMessage={latestReportableMessage}
           />
         )}
       </View>

src/screens/Messages/components/ChatListItem.tsx

@@ -112,64 +112,74 @@ function ChatListItemReady({
 
   const isDimStyle = convo.muted || moderation.blocked || isDeletedAccount
 
-  const {lastMessage, lastMessageSentAt} = useMemo(() => {
+  const {lastMessage, lastMessageSentAt, latestReportableMessage} =
-    let lastMessage = _(msg`No messages yet`)
+    useMemo(() => {
-    let lastMessageSentAt: string | null = null
+      // eslint-disable-next-line @typescript-eslint/no-shadow
+      let lastMessage = _(msg`No messages yet`)
+      // eslint-disable-next-line @typescript-eslint/no-shadow
+      let lastMessageSentAt: string | null = null
+      // eslint-disable-next-line @typescript-eslint/no-shadow
+      let latestReportableMessage: ChatBskyConvoDefs.MessageView | undefined
 
-    if (ChatBskyConvoDefs.isMessageView(convo.lastMessage)) {
+      if (ChatBskyConvoDefs.isMessageView(convo.lastMessage)) {
-      const isFromMe = convo.lastMessage.sender?.did === currentAccount?.did
+        const isFromMe = convo.lastMessage.sender?.did === currentAccount?.did
 
-      if (convo.lastMessage.text) {
+        if (!isFromMe) {
-        if (isFromMe) {
+          latestReportableMessage = convo.lastMessage
-          lastMessage = _(msg`You: ${convo.lastMessage.text}`)
-        } else {
-          lastMessage = convo.lastMessage.text
         }
-      } else if (convo.lastMessage.embed) {
-        const defaultEmbeddedContentMessage = _(
-          msg`(contains embedded content)`,
-        )
 
-        if (AppBskyEmbedRecord.isView(convo.lastMessage.embed)) {
+        if (convo.lastMessage.text) {
-          const embed = convo.lastMessage.embed
+          if (isFromMe) {
+            lastMessage = _(msg`You: ${convo.lastMessage.text}`)
+          } else {
+            lastMessage = convo.lastMessage.text
+          }
+        } else if (convo.lastMessage.embed) {
+          const defaultEmbeddedContentMessage = _(
+            msg`(contains embedded content)`,
+          )
 
-          if (AppBskyEmbedRecord.isViewRecord(embed.record)) {
+          if (AppBskyEmbedRecord.isView(convo.lastMessage.embed)) {
-            const record = embed.record
+            const embed = convo.lastMessage.embed
-            const path = postUriToRelativePath(record.uri, {
+
-              handle: record.author.handle,
+            if (AppBskyEmbedRecord.isViewRecord(embed.record)) {
-            })
+              const record = embed.record
-            const href = path ? toBskyAppUrl(path) : undefined
+              const path = postUriToRelativePath(record.uri, {
-            const short = href
+                handle: record.author.handle,
-              ? toShortUrl(href)
+              })
-              : defaultEmbeddedContentMessage
+              const href = path ? toBskyAppUrl(path) : undefined
+              const short = href
+                ? toShortUrl(href)
+                : defaultEmbeddedContentMessage
+              if (isFromMe) {
+                lastMessage = _(msg`You: ${short}`)
+              } else {
+                lastMessage = short
+              }
+            }
+          } else {
             if (isFromMe) {
-              lastMessage = _(msg`You: ${short}`)
+              lastMessage = _(msg`You: ${defaultEmbeddedContentMessage}`)
             } else {
-              lastMessage = short
+              lastMessage = defaultEmbeddedContentMessage
             }
           }
-        } else {
-          if (isFromMe) {
-            lastMessage = _(msg`You: ${defaultEmbeddedContentMessage}`)
-          } else {
-            lastMessage = defaultEmbeddedContentMessage
-          }
         }
+
+        lastMessageSentAt = convo.lastMessage.sentAt
+      }
+      if (ChatBskyConvoDefs.isDeletedMessageView(convo.lastMessage)) {
+        lastMessage = isDeletedAccount
+          ? _(msg`Conversation deleted`)
+          : _(msg`Message deleted`)
       }
 
-      lastMessageSentAt = convo.lastMessage.sentAt
+      return {
-    }
+        lastMessage,
-    if (ChatBskyConvoDefs.isDeletedMessageView(convo.lastMessage)) {
+        lastMessageSentAt,
-      lastMessage = isDeletedAccount
+        latestReportableMessage,
-        ? _(msg`Conversation deleted`)
+      }
-        : _(msg`Message deleted`)
+    }, [_, convo.lastMessage, currentAccount?.did, isDeletedAccount])
-    }
-
-    return {
-      lastMessage,
-      lastMessageSentAt,
-    }
-  }, [_, convo.lastMessage, currentAccount?.did, isDeletedAccount])
 
   const [showActions, setShowActions] = useState(false)
 
@@ -412,6 +422,7 @@ function ChatListItemReady({
               opacity: !gtMobile || showActions || menuControl.isOpen ? 1 : 0,
             },
           ]}
+          latestReportableMessage={latestReportableMessage}
         />
         <LeaveConvoPrompt
           control={leaveConvoControl}