[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>
2025-03-28 16:34:07 +02:00
parent 55a40c2436
commit 152bc3c1ec
17 changed files with 659 additions and 123 deletions
@@ -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)