diff --git a/package/src/components/MessageOverlay/MessageOverlay.tsx b/package/src/components/MessageOverlay/MessageOverlay.tsx index 599c8fbfdb..5b75f92165 100644 --- a/package/src/components/MessageOverlay/MessageOverlay.tsx +++ b/package/src/components/MessageOverlay/MessageOverlay.tsx @@ -478,6 +478,7 @@ const MessageOverlayWithContext = < {!!messageReactionTitle && ( ; title: string; alignment?: Alignment; + message?: MessageType; messageId?: string; reactions?: Reaction[]; supportedReactions?: ReactionData[]; @@ -105,7 +107,7 @@ export const OverlayReactions = (props: OverlayReactionsProps) => { const [itemHeight, setItemHeight] = React.useState(0); const { alignment: overlayAlignment, - messageId, + message, OverlayReactionsAvatar, reactions: propReactions, showScreen, @@ -119,7 +121,7 @@ export const OverlayReactions = (props: OverlayReactionsProps) => { loadNextPage, reactions: fetchedReactions, } = useFetchReactions({ - messageId, + message, sort, }); diff --git a/package/src/components/MessageOverlay/hooks/useFetchReactions.ts b/package/src/components/MessageOverlay/hooks/useFetchReactions.ts index 76eb848e73..056ed91c6d 100644 --- a/package/src/components/MessageOverlay/hooks/useFetchReactions.ts +++ b/package/src/components/MessageOverlay/hooks/useFetchReactions.ts @@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'; import { ReactionResponse, ReactionSort } from 'stream-chat'; +import { MessageType } from '../../../components/MessageList/hooks/useMessageList'; import { useChatContext } from '../../../contexts/chatContext/ChatContext'; import { getReactionsForFilterSort } from '../../../store/apis/getReactionsforFilterSort'; import { DefaultStreamChatGenerics } from '../../../types/types'; @@ -10,7 +11,7 @@ export type UseFetchReactionParams< StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, > = { limit?: number; - messageId?: string; + message?: MessageType; reactionType?: string; sort?: ReactionSort; }; @@ -19,13 +20,14 @@ export const useFetchReactions = < StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, >({ limit = 25, - messageId, + message, reactionType, sort, }: UseFetchReactionParams) => { const [reactions, setReactions] = useState[]>([]); const [loading, setLoading] = useState(true); const [next, setNext] = useState(undefined); + const messageId = message?.id; const { client, enableOfflineSupport } = useChatContext(); @@ -61,8 +63,9 @@ export const useFetchReactions = < }; try { - if (enableOfflineSupport) { - loadOfflineReactions(); + // TODO: Threads are not supported for the offline use case as we don't store the thread messages currently, and this will change in the future. + if (enableOfflineSupport && !message?.parent_id) { + await loadOfflineReactions(); } else { await loadOnlineReactions(); }