fix: show user reactions in threads (#2814)

* fix: show user reactions in threads * refactor: add comment for threads not supported
GetStream · Nov 27, 2024 · 837c2d2 · 837c2d2
1 parent d995ecd
commit 837c2d2
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/package/src/components/MessageOverlay/MessageOverlay.tsx b/package/src/components/MessageOverlay/MessageOverlay.tsx
@@ -478,6 +478,7 @@ const MessageOverlayWithContext = <
             {!!messageReactionTitle && (
               <OverlayReactions
                 alignment={alignment}
+                message={message}
                 messageId={message.id}
                 OverlayReactionsAvatar={OverlayReactionsAvatar}
                 showScreen={showScreen}

diff --git a/package/src/components/MessageOverlay/OverlayReactions.tsx b/package/src/components/MessageOverlay/OverlayReactions.tsx
@@ -22,6 +22,7 @@ import {
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ReactionData } from '../../utils/utils';
+import { MessageType } from '../MessageList/hooks/useMessageList';
 
 const styles = StyleSheet.create({
   avatarContainer: {
@@ -89,6 +90,7 @@ export type OverlayReactionsProps<
   showScreen: Animated.SharedValue<number>;
   title: string;
   alignment?: Alignment;
+  message?: MessageType<StreamChatGenerics>;
   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
@@ -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<StreamChatGenerics>;
   reactionType?: string;
   sort?: ReactionSort<StreamChatGenerics>;
 };
@@ -19,13 +20,14 @@ export const useFetchReactions = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   limit = 25,
-  messageId,
+  message,
   reactionType,
   sort,
 }: UseFetchReactionParams) => {
   const [reactions, setReactions] = useState<ReactionResponse<StreamChatGenerics>[]>([]);
   const [loading, setLoading] = useState(true);
   const [next, setNext] = useState<string | undefined>(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();
       }