fix: unnecessary thread reload (#2397)

* fix: unnecessary thread reload * remove log * fix: threadList props import --------- Co-authored-by: Khushal Agarwal <[email protected]>
GetStream · Jan 23, 2024 · da7eb56 · da7eb56
1 parent 8c8bfad
commit da7eb56
Show file tree

Hide file tree

Showing 8 changed files with 530 additions and 1,037 deletions.
diff --git a/examples/TypeScriptMessaging/ios/Podfile.lock b/examples/TypeScriptMessaging/ios/Podfile.lock
diff --git a/examples/TypeScriptMessaging/ios/TypeScriptMessaging.xcodeproj/project.pbxproj b/examples/TypeScriptMessaging/ios/TypeScriptMessaging.xcodeproj/project.pbxproj
@@ -580,6 +580,7 @@
 				GCC_PREPROCESSOR_DEFINITIONS = (
 					"DEBUG=1",
 					"$(inherited)",
+					_LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION,
 				);
 				GCC_SYMBOLS_PRIVATE_EXTERN = NO;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
@@ -600,6 +601,11 @@
 				);
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					"-Wl",
+					"-ld_classic",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 			};
@@ -641,6 +647,10 @@
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386;
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"$(inherited)",
+					_LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION,
+				);
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
 				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
 				GCC_WARN_UNDECLARED_SELECTOR = YES;
@@ -658,6 +668,11 @@
 					"\"$(inherited)\"",
 				);
 				MTL_ENABLE_DEBUG_INFO = NO;
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					"-Wl",
+					"-ld_classic",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;

diff --git a/examples/TypeScriptMessaging/package.json b/examples/TypeScriptMessaging/package.json
@@ -20,7 +20,7 @@
     "@react-navigation/stack": "^6.3.16",
     "@stream-io/flat-list-mvcp": "0.10.3",
     "react": "18.2.0",
-    "react-native": "0.71.7",
+    "react-native": "0.71.15",
     "react-native-document-picker": "^9.0.1",
     "react-native-fs": "2.20.0",
     "react-native-gesture-handler": "~2.9.0",

diff --git a/examples/TypeScriptMessaging/yarn.lock b/examples/TypeScriptMessaging/yarn.lock
diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx
@@ -777,15 +777,18 @@ const ChannelWithContext = <
   useEffect(() => {
     const handleEvent: EventHandler<StreamChatGenerics> = (event) => {
       if (shouldSyncChannel) {
-        if (thread) {
-          const updatedThreadMessages =
-            (thread.id && channel && channel.state.threads[thread.id]) || threadMessages;
-          setThreadMessages(updatedThreadMessages);
-        }
+        const isTypingEvent = event.type === 'typing.start' || event.type === 'typing.stop';
+        if (!isTypingEvent) {
+          if (thread?.id) {
+            const updatedThreadMessages =
+              (thread.id && channel && channel.state.threads[thread.id]) || threadMessages;
+            setThreadMessages(updatedThreadMessages);
+          }
 
-        if (channel && thread && event.message?.id === thread.id) {
-          const updatedThread = channel.state.formatMessage(event.message);
-          setThread(updatedThread);
+          if (channel && thread?.id && event.message?.id === thread.id) {
+            const updatedThread = channel.state.formatMessage(event.message);
+            setThread(updatedThread);
+          }
         }
 
         // only update channel state if the events are not the previously subscribed useEffect's subscription events
@@ -1097,11 +1100,11 @@ const ChannelWithContext = <
     channelQueryCallRef.current(async () => {
       if (!channel?.initialized || !channel.state.isUpToDate) {
         await channel?.watch();
+        channel?.state.setIsUpToDate(true);
+        setHasNoMoreRecentMessagesToLoad(true);
       } else {
-        await loadLatestMessagesRef.current(true);
+        await channel.state.loadMessageIntoState('latest');
       }
-      channel?.state.setIsUpToDate(true);
-      setHasNoMoreRecentMessagesToLoad(true);
     });
 
   const reloadThread = async () => {
@@ -1999,11 +2002,14 @@ const ChannelWithContext = <
   /**
    * THREAD METHODS
    */
-  const openThread: ThreadContextValue<StreamChatGenerics>['openThread'] = (message) => {
-    const newThreadMessages = message?.id ? channel?.state?.threads[message.id] || [] : [];
-    setThread(message);
-    setThreadMessages(newThreadMessages);
-  };
+  const openThread: ThreadContextValue<StreamChatGenerics>['openThread'] = useCallback(
+    (message) => {
+      const newThreadMessages = message?.id ? channel?.state?.threads[message.id] || [] : [];
+      setThread(message);
+      setThreadMessages(newThreadMessages);
+    },
+    [setThread, setThreadMessages],
+  );
 
   const closeThread: ThreadContextValue<StreamChatGenerics>['closeThread'] = useCallback(() => {
     setThread(null);
@@ -2365,7 +2371,6 @@ export const Channel = <
 
   return (
     <ChannelWithContext<StreamChatGenerics>
-      key={props.channel?.cid}
       {...{
         client,
         enableOfflineSupport,

diff --git a/package/src/components/MessageInput/MessageInput.tsx b/package/src/components/MessageInput/MessageInput.tsx
@@ -81,7 +81,10 @@ const styles = StyleSheet.create({
 type MessageInputPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<ChatContextValue<StreamChatGenerics>, 'isOnline'> &
-  Pick<ChannelContextValue<StreamChatGenerics>, 'disabled' | 'members' | 'watchers'> &
+  Pick<
+    ChannelContextValue<StreamChatGenerics>,
+    'disabled' | 'members' | 'threadList' | 'watchers'
+  > &
   Pick<
     MessageInputContextValue<StreamChatGenerics>,
     | 'additionalTextInputProps'
@@ -132,9 +135,7 @@ type MessageInputPropsWithContext<
     | 'triggerType'
   > &
   Pick<ThreadContextValue<StreamChatGenerics>, 'thread'> &
-  Pick<TranslationContextValue, 't'> & {
-    threadList?: boolean;
-  };
+  Pick<TranslationContextValue, 't'>;
 
 const MessageInputWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -791,7 +792,12 @@ export const MessageInput = <
   const { isOnline } = useChatContext();
   const ownCapabilities = useOwnCapabilitiesContext();
 
-  const { disabled = false, members, watchers } = useChannelContext<StreamChatGenerics>();
+  const {
+    disabled = false,
+    members,
+    threadList,
+    watchers,
+  } = useChannelContext<StreamChatGenerics>();
 
   const {
     additionalTextInputProps,
@@ -900,6 +906,7 @@ export const MessageInput = <
         suggestions,
         t,
         thread,
+        threadList,
         triggerType,
         uploadNewFile,
         uploadNewImage,

diff --git a/package/src/components/MessageList/MessageList.tsx b/package/src/components/MessageList/MessageList.tsx
@@ -132,6 +132,7 @@ type MessageListPropsWithContext<
     | 'setTargetedMessage'
     | 'StickyHeader'
     | 'targetedMessage'
+    | 'threadList'
   > &
   Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
   Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setMessages'> &
@@ -215,10 +216,6 @@ type MessageListPropsWithContext<
      * ```
      */
     setFlatListRef?: (ref: FlatListType<MessageType<StreamChatGenerics>> | null) => void;
-    /**
-     * Boolean whether or not the Messages in the MessageList are part of a Thread
-     **/
-    threadList?: boolean;
   };
 
 /**
@@ -545,7 +542,11 @@ const MessageListWithContext = <
 
   useEffect(() => {
     if (!rawMessageList.length) return;
-    const notLatestSet = !threadList && channel.state.messages !== channel.state.latestMessages;
+    if (threadList) {
+      setAutoscrollToRecent(true);
+      return;
+    }
+    const notLatestSet = channel.state.messages !== channel.state.latestMessages;
     if (notLatestSet) {
       latestNonCurrentMessageBeforeUpdateRef.current =
         channel.state.latestMessages[channel.state.latestMessages.length - 1];
@@ -729,10 +730,8 @@ const MessageListWithContext = <
     // If onEndReached is in progress, better to wait for it to finish for smooth UX
     if (onEndReachedInPromise.current) {
       await onEndReachedInPromise.current;
-      onStartReachedInPromise.current = loadMoreRecent(limit).then(callback).catch(onError);
-    } else {
-      onStartReachedInPromise.current = loadMoreRecent(limit).then(callback).catch(onError);
     }
+    onStartReachedInPromise.current = loadMoreRecent(limit).then(callback).catch(onError);
   };
 
   /**
@@ -765,14 +764,10 @@ const MessageListWithContext = <
     // If onStartReached is in progress, better to wait for it to finish for smooth UX
     if (onStartReachedInPromise.current) {
       await onStartReachedInPromise.current;
-      onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore())
-        .then(callback)
-        .catch(onError);
-    } else {
-      onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore())
-        .then(callback)
-        .catch(onError);
     }
+    onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore())
+      .then(callback)
+      .catch(onError);
   };
 
   const onUserScrollEvent: NonNullable<ScrollViewProps['onScroll']> = (event) => {
@@ -1226,6 +1221,7 @@ export const MessageList = <
     setTargetedMessage,
     StickyHeader,
     targetedMessage,
+    threadList,
   } = useChannelContext<StreamChatGenerics>();
   const { client } = useChatContext<StreamChatGenerics>();
   const { setMessages } = useImageGalleryContext<StreamChatGenerics>();
@@ -1294,6 +1290,7 @@ export const MessageList = <
         targetedMessage,
         tDateTimeParser,
         thread,
+        threadList,
         TypingIndicator,
         TypingIndicatorContainer,
       }}

diff --git a/package/src/components/MessageList/hooks/useMessageList.ts b/package/src/components/MessageList/hooks/useMessageList.ts
@@ -106,11 +106,11 @@ export const useMessageList = <
   const processedMessageList = [
     ...messagesWithStylesReadByAndDateSeparator,
   ].reverse() as MessageType<StreamChatGenerics>[];
-  const rawMessageList = messageList;
+
   return {
     /** Messages enriched with dates/readby/groups and also reversed in order */
     processedMessageList,
     /** Raw messages from the channel state */
-    rawMessageList,
+    rawMessageList: messageList,
   };
 };