[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>
This commit is contained in:
Samuel Newman
2025-03-28 16:34:07 +02:00
committed by GitHub
parent 55a40c2436
commit 152bc3c1ec
17 changed files with 659 additions and 123 deletions
@@ -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()
}
}
}
}
}
}
}
},