[DMs] Reactions - link up API (attempt 2) (#8074)

* update package

* wire up APIs

* get reactions to display

* allow removing emoji

* handle limits better

* listen to reactions in log

* update convo list with reactions

* tweaks to reaction display

* Handle empty message fallback case

* update package

* shift reacts up by 2px

---------

Co-authored-by: Eric Bailey <git@esb.lol>

1 files changed, 53 insertions, 4 deletions

diff --git a/src/screens/Messages/components/ChatListItem.tsx b/src/screens/Messages/components/ChatListItem.tsx
index 96e010b8f..d8e4b975c 100644
--- a/src/screens/Messages/components/ChatListItem.tsx
+++ b/src/screens/Messages/components/ChatListItem.tsx
@@ -1,10 +1,10 @@
 import React, {useCallback, useMemo, useState} from 'react'
-import {GestureResponderEvent, View} from 'react-native'
+import {type GestureResponderEvent, View} from 'react-native'
 import {
   AppBskyEmbedRecord,
   ChatBskyConvoDefs,
   moderateProfile,
-  ModerationOpts,
+  type ModerationOpts,
 } from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -43,7 +43,7 @@ import {Link} from '#/components/Link'
 import {useMenuControl} from '#/components/Menu'
 import {PostAlerts} from '#/components/moderation/PostAlerts'
 import {Text} from '#/components/Typography'
-import * as bsky from '#/types/bsky'
+import type * as bsky from '#/types/bsky'
 
 export let ChatListItem = ({
   convo,
@@ -189,13 +189,62 @@ function ChatListItemReady({
           ? _(msg`Conversation deleted`)
           : _(msg`Message deleted`)
       }
+      if (ChatBskyConvoDefs.isMessageAndReactionView(convo.lastMessage)) {
+        const isFromMe =
+          convo.lastMessage.reaction.sender.did === currentAccount?.did
+        const lastMessageText = convo.lastMessage.message.text
+        const fallbackMessage = _(
+          msg({
+            message: 'a message',
+            comment: `If last message does not contain text, fall back to "{user} reacted to {a message}"`,
+          }),
+        )
+
+        if (isFromMe) {
+          lastMessage = _(
+            msg`You reacted ${convo.lastMessage.reaction.value} to ${
+              lastMessageText
+                ? `"${convo.lastMessage.message.text}"`
+                : fallbackMessage
+            }`,
+          )
+        } else {
+          const senderDid = convo.lastMessage.reaction.sender.did
+          const sender = convo.members.find(member => member.did === senderDid)
+          if (sender) {
+            lastMessage = _(
+              msg`${sanitizeDisplayName(
+                sender.displayName || sender.handle,
+              )} reacted ${convo.lastMessage.reaction.value} to ${
+                lastMessageText
+                  ? `"${convo.lastMessage.message.text}"`
+                  : fallbackMessage
+              }`,
+            )
+          } else {
+            lastMessage = _(
+              msg`Someone reacted ${convo.lastMessage.reaction.value} to ${
+                lastMessageText
+                  ? `"${convo.lastMessage.message.text}"`
+                  : fallbackMessage
+              }`,
+            )
+          }
+        }
+      }
 
       return {
         lastMessage,
         lastMessageSentAt,
         latestReportableMessage,
       }
-    }, [_, convo.lastMessage, currentAccount?.did, isDeletedAccount])
+    }, [
+      _,
+      convo.lastMessage,
+      currentAccount?.did,
+      isDeletedAccount,
+      convo.members,
+    ])
 
   const [showActions, setShowActions] = useState(false)