[Reactions] Get reactions in chat list working again with new lexicon (#8093)

* get chat list reactions working again with new lexicon

* fix weird android bug where background wasn't clipped

package.json

@@ -58,7 +58,7 @@
     "icons:optimize": "svgo -f ./assets/icons"
   },
   "dependencies": {
-    "@atproto/api": "^0.14.14",
+    "@atproto/api": "^0.14.16",
     "@bitdrift/react-native": "^0.6.8",
     "@braintree/sanitize-url": "^6.0.2",
     "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",

src/components/dms/EmojiReactionPicker.tsx

@@ -95,9 +95,9 @@ export function EmojiReactionPicker({
                           ? t.palette.negative_100
                           : t.palette.primary_500,
                       }
-                    : alreadyReacted && {
+                    : alreadyReacted
-                        backgroundColor: t.palette.primary_200,
+                    ? {backgroundColor: t.palette.primary_200}
-                      },
+                    : t.atoms.bg,
                   {height: 40, width: 40},
                   a.justify_center,
                   a.align_center,

src/screens/Messages/components/ChatListItem.tsx

@@ -185,50 +185,61 @@ function ChatListItemReady({
         lastMessageSentAt = convo.lastMessage.sentAt
       }
       if (ChatBskyConvoDefs.isDeletedMessageView(convo.lastMessage)) {
+        lastMessageSentAt = convo.lastMessage.sentAt
+
         lastMessage = isDeletedAccount
           ? _(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) {
+      if (ChatBskyConvoDefs.isMessageAndReactionView(convo.lastReaction)) {
-          lastMessage = _(
+        if (
-            msg`You reacted ${convo.lastMessage.reaction.value} to ${
+          !lastMessageSentAt ||
-              lastMessageText
+          new Date(lastMessageSentAt) <
-                ? `"${convo.lastMessage.message.text}"`
+            new Date(convo.lastReaction.reaction.createdAt)
-                : fallbackMessage
+        ) {
-            }`,
+          const isFromMe =
+            convo.lastReaction.reaction.sender.did === currentAccount?.did
+          const lastMessageText = convo.lastReaction.message.text
+          const fallbackMessage = _(
+            msg({
+              message: 'a message',
+              comment: `If last message does not contain text, fall back to "{user} reacted to {a message}"`,
+            }),
           )
-        } else {
+
-          const senderDid = convo.lastMessage.reaction.sender.did
+          if (isFromMe) {
-          const sender = convo.members.find(member => member.did === senderDid)
-          if (sender) {
             lastMessage = _(
-              msg`${sanitizeDisplayName(
+              msg`You reacted ${convo.lastReaction.reaction.value} to ${
-                sender.displayName || sender.handle,
-              )} reacted ${convo.lastMessage.reaction.value} to ${
                 lastMessageText
-                  ? `"${convo.lastMessage.message.text}"`
+                  ? `"${convo.lastReaction.message.text}"`
                   : fallbackMessage
               }`,
             )
           } else {
-            lastMessage = _(
+            const senderDid = convo.lastReaction.reaction.sender.did
-              msg`Someone reacted ${convo.lastMessage.reaction.value} to ${
+            const sender = convo.members.find(
-                lastMessageText
+              member => member.did === senderDid,
-                  ? `"${convo.lastMessage.message.text}"`
-                  : fallbackMessage
-              }`,
             )
+            if (sender) {
+              lastMessage = _(
+                msg`${sanitizeDisplayName(
+                  sender.displayName || sender.handle,
+                )} reacted ${convo.lastReaction.reaction.value} to ${
+                  lastMessageText
+                    ? `"${convo.lastReaction.message.text}"`
+                    : fallbackMessage
+                }`,
+              )
+            } else {
+              lastMessage = _(
+                msg`Someone reacted ${convo.lastReaction.reaction.value} to ${
+                  lastMessageText
+                    ? `"${convo.lastReaction.message.text}"`
+                    : fallbackMessage
+                }`,
+              )
+            }
           }
         }
       }
@@ -241,6 +252,7 @@ function ChatListItemReady({
     }, [
       _,
       convo.lastMessage,
+      convo.lastReaction,
       currentAccount?.did,
       isDeletedAccount,
       convo.members,

src/state/queries/messages/list-conversations.tsx

@@ -317,7 +317,7 @@ export function ListConvosProviderInner({
               (old?: ConvoListQueryData) =>
                 optimisticUpdate(logRef.convoId, old, convo => ({
                   ...convo,
-                  lastMessage: {
+                  lastReaction: {
                     $type: 'chat.bsky.convo.defs#messageAndReactionView',
                     reaction: logRef.reaction,
                     message: logRef.message,
@@ -326,41 +326,36 @@ export function ListConvosProviderInner({
                 })),
             )
           } else if (ChatBskyConvoDefs.isLogRemoveReaction(log)) {
-            if (ChatBskyConvoDefs.isMessageView(log.message)) {
+            const logRef: ChatBskyConvoDefs.LogRemoveReaction = log
-              for (const [_queryKey, queryData] of queryClient.getQueriesData<
+            queryClient.setQueriesData(
-                InfiniteData<ChatBskyConvoListConvos.OutputSchema>
+              {queryKey: [RQKEY_ROOT]},
-              >({
+              (old?: ConvoListQueryData) =>
-                queryKey: [RQKEY_ROOT],
+                optimisticUpdate(logRef.convoId, old, convo => {
-              })) {
+                  if (
-                if (!queryData?.pages) {
+                    // if the convo is the same
-                  continue
+                    logRef.convoId === convo.id &&
-                }
+                    ChatBskyConvoDefs.isMessageAndReactionView(
-
+                      convo.lastReaction,
-                for (const page of queryData.pages) {
+                    ) &&
-                  for (const convo of page.convos) {
+                    ChatBskyConvoDefs.isMessageView(logRef.message) &&
-                    if (
+                    // ...and the message is the same
-                      // if the convo is the same
+                    convo.lastReaction.message.id === logRef.message.id &&
-                      log.convoId === convo.id &&
+                    // ...and the reaction is the same
-                      ChatBskyConvoDefs.isMessageAndReactionView(
+                    convo.lastReaction.reaction.sender.did ===
-                        convo.lastMessage,
+                      logRef.reaction.sender.did &&
-                      ) &&
+                    convo.lastReaction.reaction.value === logRef.reaction.value
-                      ChatBskyConvoDefs.isMessageView(
+                  ) {
-                        convo.lastMessage.message,
+                    return {
-                      ) &&
+                      ...convo,
-                      // ...and the message is the same
+                      // ...remove the reaction. hopefully they didn't react twice in a row!
-                      convo.lastMessage.message.id === log.message.id &&
+                      lastReaction: undefined,
-                      // ...and the reaction is the same
+                      rev: logRef.rev,
-                      convo.lastMessage.reaction.sender.did ===
-                        log.reaction.sender.did &&
-                      convo.lastMessage.reaction.value === log.reaction.value
-                    ) {
-                      // refetch, because we don't know what the last message is now
-                      debouncedRefetch()
                     }
+                  } else {
+                    return convo
                   }
-                }
+                }),
-              }
+            )
-            }
           }
         }
       },

yarn.lock

@@ -80,10 +80,10 @@
     tlds "^1.234.0"
     zod "^3.23.8"
 
-"@atproto/api@^0.14.14":
+"@atproto/api@^0.14.16":
-  version "0.14.14"
+  version "0.14.16"
-  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.14.14.tgz#5d2d2e6156eab6ca0d463c114b4a3865275e9aac"
+  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.14.16.tgz#7b59eb83a27e906e0dc442d3de0f0d3869092b4a"
-  integrity sha512-ryawcnmazVSWYfq11ujPHauY77GfkM3mF0rZOkqENN2Ptnl6BZXJvpA0zLA/sQ5YBLcHXSEWg5Xdq+8i1l+8gA==
+  integrity sha512-xzUK3KVdp1TDJJ09Di2rvS/fisVctvMHO7Er0XhYviL3V4lxGQPNT3pHwbTbbb22QP7xH/d5ghCgfdIoS5Z8/A==
   dependencies:
     "@atproto/common-web" "^0.4.0"
     "@atproto/lexicon" "^0.4.9"