fix: thread list variety bugs (#3033)

* fix: double thread message upsertion

* fix: thread footer not updating reply count in realtime

Author: isekovanic

package/expo-package/yarn.lock

@@ -4733,10 +4733,10 @@ [email protected], stream-buffers@~2.2.0:
   resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
   integrity sha512-uyQK/mx5QjHun80FLJTfaWE7JtwfRMKBLkMne6udYOmvH0CawotVa7TfgYHzAnpphn4+TweIx1QKMnRIbipmUg==
 
-stream-chat-react-native-core@6.6.8:
-  version "6.6.8"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-6.6.8.tgz#483ade63ba051426480ab2dfd8ab3b248b90ae88"
-  integrity sha512-F8S70DHaiit6BEdKOkSMHq2bjMONhrouvJ+szBQuE430EJDgUlc2VErHk3yJCzqIt5lwfVZktjHuqSIOGVg5LQ==
+stream-chat-react-native-core@6.7.0:
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-6.7.0.tgz#d9e8c8ca57db93f148ef8acab93d3552f425eb36"
+  integrity sha512-Ue/euBMJ2h/H33hp58znfOMFzocgyW+dqvS8qiCooO5RZ26zQYGSDvmp8TeYyiBpqwM927vqfrPmPqOeXb12IQ==
   dependencies:
     "@gorhom/bottom-sheet" "^5.1.1"
     dayjs "1.10.5"

package/native-package/yarn.lock

@@ -3409,10 +3409,10 @@ statuses@~1.5.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-stream-chat-react-native-core@6.6.8:
-  version "6.6.8"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-6.6.8.tgz#483ade63ba051426480ab2dfd8ab3b248b90ae88"
-  integrity sha512-F8S70DHaiit6BEdKOkSMHq2bjMONhrouvJ+szBQuE430EJDgUlc2VErHk3yJCzqIt5lwfVZktjHuqSIOGVg5LQ==
+stream-chat-react-native-core@6.7.0:
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-6.7.0.tgz#d9e8c8ca57db93f148ef8acab93d3552f425eb36"
+  integrity sha512-Ue/euBMJ2h/H33hp58znfOMFzocgyW+dqvS8qiCooO5RZ26zQYGSDvmp8TeYyiBpqwM927vqfrPmPqOeXb12IQ==
   dependencies:
     "@gorhom/bottom-sheet" "^5.1.1"
     dayjs "1.10.5"

package/src/components/Channel/Channel.tsx

@@ -1382,8 +1382,6 @@ const ChannelWithContext = <
         } else {
           updateMessage(messageResponse.message);
         }
-
-        threadInstance?.upsertReplyLocally?.({ message: messageResponse.message });
       }
     } catch (err) {
       console.log(err);

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

@@ -2,6 +2,8 @@ import React from 'react';
 import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
 import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
 
+import type { ThreadState } from 'stream-chat';
+
 import {
   MessagesContextValue,
   useMessagesContext,
@@ -12,6 +14,7 @@ import {
   useThreadContext,
 } from '../../../contexts/threadContext/ThreadContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useStateStore } from '../../../hooks';
 import { useViewport } from '../../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
@@ -42,7 +45,10 @@ const styles = StyleSheet.create({
 type ThreadFooterComponentPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<MessagesContextValue<StreamChatGenerics>, 'Message'> &
-  Pick<ThreadContextValue<StreamChatGenerics>, 'parentMessagePreventPress' | 'thread'>;
+  Pick<
+    ThreadContextValue<StreamChatGenerics>,
+    'parentMessagePreventPress' | 'thread' | 'threadInstance'
+  >;
 
 export const InlineLoadingMoreThreadIndicator = () => {
   const { threadLoadingMore } = useThreadContext();
@@ -63,12 +69,17 @@ export const InlineLoadingMoreThreadIndicator = () => {
   );
 };
 
+const selector = (nextValue: ThreadState) =>
+  ({
+    replyCount: nextValue.replyCount,
+  }) as const;
+
 const ThreadFooterComponentWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: ThreadFooterComponentPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { Message, parentMessagePreventPress, thread } = props;
+  const { Message, parentMessagePreventPress, thread, threadInstance } = props;
   const { t } = useTranslationContext();
   const { vw } = useViewport();
 
@@ -87,12 +98,12 @@ const ThreadFooterComponentWithContext = <
     },
   } = useTheme();
 
+  const { replyCount = thread?.reply_count } = useStateStore(threadInstance?.state, selector) ?? {};
+
   if (!thread) {
     return null;
   }
 
-  const replyCount = thread.reply_count;
-
   return (
     <View style={styles.threadHeaderContainer} testID='thread-footer-component'>
       <View style={styles.messagePadding}>
@@ -145,10 +156,16 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   prevProps: ThreadFooterComponentPropsWithContext<StreamChatGenerics>,
   nextProps: ThreadFooterComponentPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { parentMessagePreventPress: prevParentMessagePreventPress, thread: prevThread } =
-    prevProps;
-  const { parentMessagePreventPress: nextParentMessagePreventPress, thread: nextThread } =
-    nextProps;
+  const {
+    parentMessagePreventPress: prevParentMessagePreventPress,
+    thread: prevThread,
+    threadInstance: prevThreadInstance,
+  } = prevProps;
+  const {
+    parentMessagePreventPress: nextParentMessagePreventPress,
+    thread: nextThread,
+    threadInstance: nextThreadInstance,
+  } = nextProps;
 
   if (prevParentMessagePreventPress !== nextParentMessagePreventPress) {
     return false;
@@ -158,10 +175,15 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     prevThread?.id === nextThread?.id &&
     prevThread?.text === nextThread?.text &&
     prevThread?.reply_count === nextThread?.reply_count;
+
   if (!threadEqual) {
     return false;
   }
 
+  if (prevThreadInstance !== nextThreadInstance) {
+    return false;
+  }
+
   const latestReactionsEqual =
     prevThread &&
     nextThread &&
@@ -195,7 +217,7 @@ export const ThreadFooterComponent = <
   props: ThreadFooterComponentProps<StreamChatGenerics>,
 ) => {
   const { Message } = useMessagesContext<StreamChatGenerics>();
-  const { parentMessagePreventPress, thread, threadLoadingMore } =
+  const { parentMessagePreventPress, thread, threadInstance, threadLoadingMore } =
     useThreadContext<StreamChatGenerics>();
 
   return (
@@ -204,6 +226,7 @@ export const ThreadFooterComponent = <
         Message,
         parentMessagePreventPress,
         thread,
+        threadInstance,
         threadLoadingMore,
       }}
       {...props}