fix: thread reaction list rerender and add prop to enable/disable press on parent message (#2575)

Author: khushal87

docusaurus/docs/reactnative/common-content/contexts/thread-context/parent_message_prevent_press.mdx

@@ -0,0 +1,5 @@
+Boolean to enable/disable parent message press.
+
+| Type    | Default |
+| ------- | ------- |
+| Boolean | `true`  |

docusaurus/docs/reactnative/contexts/thread-context.mdx

@@ -9,6 +9,7 @@ import Thread from '../common-content/ui-components/channel/props/thread.mdx';
 import CloseThread from '../common-content/contexts/thread-context/close_thread.mdx';
 import LoadMoreThread from '../common-content/contexts/thread-context/load_more_thread.mdx';
 import OpenThread from '../common-content/contexts/thread-context/open_thread.mdx';
+import ParentMessagePreventPress from '../common-content/contexts/thread-context/parent_message_prevent_press.mdx';
 import ReloadThread from '../common-content/contexts/thread-context/reload_thread.mdx';
 import SetThreadLoadingMore from '../common-content/contexts/thread-context/set_thread_loading_more.mdx';
 import ThreadHasMore from '../common-content/contexts/thread-context/thread_has_more.mdx';
@@ -38,7 +39,7 @@ const value = useThreadContext();
 
 ## Value
 
-### <div class="label description">_forwarded from [Channel](../../core-components/channel#allowthreadmessagesinchannel)_ props</div> allowThreadMessagesInChannel {#allowthreadmessagesinchannel}
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#allowthreadmessagesinchannel)_ props</div> allowThreadMessagesInChannel `{#allowthreadmessagesinchannel}`
 
 <AllowThreadMessagesInChannel />
 
@@ -54,6 +55,10 @@ const value = useThreadContext();
 
 <OpenThread />
 
+### `parentMessagePreventPress`
+
+<ParentMessagePreventPress />
+
 ### `reloadThread`
 
 <ReloadThread />

docusaurus/docs/reactnative/ui-components/thread.mdx

@@ -9,6 +9,7 @@ import Thread from '../common-content/ui-components/channel/props/thread.mdx';
 
 import CloseThread from '../common-content/contexts/thread-context/close_thread.mdx';
 import LoadMoreThread from '../common-content/contexts/thread-context/load_more_thread.mdx';
+import ParentMessagePreventPress from '../common-content/contexts/thread-context/parent_message_prevent_press.mdx';
 import ReloadThread from '../common-content/contexts/thread-context/reload_thread.mdx';
 
 Component to render thread replies for a message, along with and input box for adding new thread replies. This component internally uses `MessageList` and `MessageInput` components.
@@ -70,7 +71,7 @@ Closes thread on dismount, defaults to `true`.
 
 <Client />
 
-### <div class="label description">overrides the value from [ThreadContext](../../contexts/thread-context#closeThread)</div> `closeThread` {#closeThread}
+### <div class="label description">overrides the value from [ThreadContext](../../contexts/thread-context#closethread)</div> `closeThread` {#closeThread}
 
 <CloseThread />
 
@@ -82,7 +83,7 @@ When true, the underlying input box will be disabled.
 | ------- | ------- |
 | Boolean | `false` |
 
-### <div class="label description">overrides the value from [ThreadContext](../../contexts/thread-context#loadMoreThread)</div> `loadMoreThread` {#loadMoreThread}
+### <div class="label description">overrides the value from [ThreadContext](../../contexts/thread-context#loadmorethread)</div> `loadMoreThread` {#loadMoreThread}
 
 <LoadMoreThread />
 
@@ -94,7 +95,11 @@ Function which gets called when Thread component un-mounts.
 | -------- |
 | Function |
 
-### <div class="label description">overrides the value from [ThreadContext](../../contexts/thread-context#reloadThread)</div> `reloadThread` {#reloadThread}
+### <div class="label description">overrides the value from [ThreadContext](../../contexts/thread-context#parentmessagepreventpress)</div> `parentMessagePreventPress` {#parentMessagePreventPress}
+
+<ParentMessagePreventPress />
+
+### <div class="label description">overrides the value from [ThreadContext](../../contexts/thread-context#reloadthread)</div> `reloadthread` {#reloadThread}
 
 <ReloadThread />
 

package/src/components/Channel/hooks/useCreateThreadContext.ts

@@ -20,6 +20,7 @@ export const useCreateThreadContext = <
 }: ThreadContextValue<StreamChatGenerics>) => {
   const threadId = thread?.id;
   const threadReplyCount = thread?.reply_count;
+  const threadLatestReactions = thread?.latest_reactions;
   const threadMessagesStr = reduceMessagesToString(threadMessages);
 
   const threadContext: ThreadContextValue<StreamChatGenerics> = useMemo(
@@ -42,6 +43,7 @@ export const useCreateThreadContext = <
       threadLoadingMore,
       threadMessagesStr,
       threadReplyCount,
+      threadLatestReactions,
     ],
   );
 

package/src/components/Thread/Thread.tsx

@@ -23,7 +23,7 @@ type ThreadPropsWithContext<
   Pick<MessagesContextValue<StreamChatGenerics>, 'MessageList'> &
   Pick<
     ThreadContextValue<StreamChatGenerics>,
-    'closeThread' | 'loadMoreThread' | 'reloadThread' | 'thread'
+    'closeThread' | 'loadMoreThread' | 'parentMessagePreventPress' | 'reloadThread' | 'thread'
   > & {
     /**
      * Additional props for underlying MessageInput component.
@@ -68,6 +68,7 @@ const ThreadWithContext = <
     MessageInput = DefaultMessageInput,
     MessageList,
     onThreadDismount,
+    parentMessagePreventPress = true,
     thread,
   } = props;
 
@@ -98,7 +99,9 @@ const ThreadWithContext = <
   return (
     <React.Fragment key={`thread-${thread.id}`}>
       <MessageList
-        FooterComponent={ThreadFooterComponent}
+        FooterComponent={() => (
+          <ThreadFooterComponent parentMessagePreventPress={parentMessagePreventPress} />
+        )}
         threadList
         {...additionalMessageListProps}
       />

package/src/components/Thread/components/ThreadFooterComponent.tsx

@@ -38,14 +38,14 @@ const styles = StyleSheet.create({
 type ThreadFooterComponentPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<MessagesContextValue<StreamChatGenerics>, 'Message'> &
-  Pick<ThreadContextValue<StreamChatGenerics>, 'thread'>;
+  Pick<ThreadContextValue<StreamChatGenerics>, 'parentMessagePreventPress' | 'thread'>;
 
 const ThreadFooterComponentWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: ThreadFooterComponentPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { Message, thread } = props;
+  const { Message, parentMessagePreventPress, thread } = props;
   const { t } = useTranslationContext();
   const { vw } = useViewport();
 
@@ -71,7 +71,12 @@ const ThreadFooterComponentWithContext = <
   return (
     <View style={styles.threadHeaderContainer} testID='thread-footer-component'>
       <View style={styles.messagePadding}>
-        <Message groupStyles={['single']} message={thread} preventPress threadList />
+        <Message
+          groupStyles={['single']}
+          message={thread}
+          preventPress={parentMessagePreventPress}
+          threadList
+        />
       </View>
       <View style={[styles.newThread, newThread]}>
         <Svg height={threadHeight ?? 24} style={styles.absolute} width={vw(100)}>
@@ -114,8 +119,12 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   prevProps: ThreadFooterComponentPropsWithContext<StreamChatGenerics>,
   nextProps: ThreadFooterComponentPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { thread: prevThread } = prevProps;
-  const { thread: nextThread } = nextProps;
+  const { parentMessagePreventPress: prevParentMessagePreventPress, thread: prevThread } =
+    prevProps;
+  const { parentMessagePreventPress: nextParentMessagePreventPress, thread: nextThread } =
+    nextProps;
+
+  if (prevParentMessagePreventPress !== nextParentMessagePreventPress) return false;
 
   const threadEqual =
     prevThread?.id === nextThread?.id &&
@@ -143,18 +152,27 @@ const MemoizedThreadFooter = React.memo(
   areEqual,
 ) as typeof ThreadFooterComponentWithContext;
 
+export type ThreadFooterComponentProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<Pick<MessagesContextValue<StreamChatGenerics>, 'Message'>> &
+  Partial<Pick<ThreadContextValue<StreamChatGenerics>, 'parentMessagePreventPress' | 'thread'>>;
+
 export const ThreadFooterComponent = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->() => {
+>(
+  props: ThreadFooterComponentProps<StreamChatGenerics>,
+) => {
   const { Message } = useMessagesContext<StreamChatGenerics>();
-  const { thread } = useThreadContext<StreamChatGenerics>();
+  const { parentMessagePreventPress, thread } = useThreadContext<StreamChatGenerics>();
 
   return (
     <MemoizedThreadFooter
       {...{
         Message,
+        parentMessagePreventPress,
         thread,
       }}
+      {...props}
     />
   );
 };

package/src/contexts/threadContext/ThreadContext.tsx

@@ -22,6 +22,10 @@ export type ThreadContextValue<
   threadHasMore: boolean;
   threadLoadingMore: boolean;
   threadMessages: ChannelState<StreamChatGenerics>['threads'][string];
+  /**
+   * Boolean to enable/disable parent message press
+   */
+  parentMessagePreventPress?: boolean;
 };
 
 export const ThreadContext = React.createContext(DEFAULT_BASE_CONTEXT_VALUE as ThreadContextValue);