[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, 56 insertions, 11 deletions

diff --git a/src/state/queries/messages/list-conversations.tsx b/src/state/queries/messages/list-conversations.tsx
index f5fce6347..066c25e21 100644
--- a/src/state/queries/messages/list-conversations.tsx
+++ b/src/state/queries/messages/list-conversations.tsx
@@ -1,19 +1,13 @@
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-} from 'react'
+import {createContext, useCallback, useContext, useEffect, useMemo} from 'react'
 import {
   ChatBskyConvoDefs,
-  ChatBskyConvoListConvos,
+  type ChatBskyConvoListConvos,
   moderateProfile,
-  ModerationOpts,
+  type ModerationOpts,
 } from '@atproto/api'
 import {
-  InfiniteData,
-  QueryClient,
+  type InfiniteData,
+  type QueryClient,
   useInfiniteQuery,
   useQueryClient,
 } from '@tanstack/react-query'
@@ -316,6 +310,57 @@ export function ListConvosProviderInner({
                   rev: logRef.rev,
                 })),
             )
+          } else if (ChatBskyConvoDefs.isLogAddReaction(log)) {
+            const logRef: ChatBskyConvoDefs.LogAddReaction = log
+            queryClient.setQueriesData(
+              {queryKey: [RQKEY_ROOT]},
+              (old?: ConvoListQueryData) =>
+                optimisticUpdate(logRef.convoId, old, convo => ({
+                  ...convo,
+                  lastMessage: {
+                    $type: 'chat.bsky.convo.defs#messageAndReactionView',
+                    reaction: logRef.reaction,
+                    message: logRef.message,
+                  },
+                  rev: logRef.rev,
+                })),
+            )
+          } else if (ChatBskyConvoDefs.isLogRemoveReaction(log)) {
+            if (ChatBskyConvoDefs.isMessageView(log.message)) {
+              for (const [_queryKey, queryData] of queryClient.getQueriesData<
+                InfiniteData<ChatBskyConvoListConvos.OutputSchema>
+              >({
+                queryKey: [RQKEY_ROOT],
+              })) {
+                if (!queryData?.pages) {
+                  continue
+                }
+
+                for (const page of queryData.pages) {
+                  for (const convo of page.convos) {
+                    if (
+                      // if the convo is the same
+                      log.convoId === convo.id &&
+                      ChatBskyConvoDefs.isMessageAndReactionView(
+                        convo.lastMessage,
+                      ) &&
+                      ChatBskyConvoDefs.isMessageView(
+                        convo.lastMessage.message,
+                      ) &&
+                      // ...and the message is the same
+                      convo.lastMessage.message.id === log.message.id &&
+                      // ...and the reaction is the same
+                      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()
+                    }
+                  }
+                }
+              }
+            }
           }
         }
       },