stream-chat-react-native-core 6.7.3-beta.1 → 6.7.3-beta.3

package/src/components/MessageList/MessageList.tsx

@@ -53,6 +53,7 @@ import {
 import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
+import { useStableCallback } from '../../hooks';
 import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 
 // This is just to make sure that the scrolling happens in a different task queue.
@@ -362,6 +363,14 @@ const MessageListWithContext = <
 
   const [autoscrollToRecent, setAutoscrollToRecent] = useState(false);
 
+  const maintainVisibleContentPosition = useMemo(
+    () => ({
+      autoscrollToTopThreshold: autoscrollToRecent ? 10 : undefined,
+      minIndexForVisible: 1,
+    }),
+    [autoscrollToRecent],
+  );
+
   /**
    * We want to call onEndReached and onStartReached only once, per content length.
    * We keep track of calls to these functions per content length, with following trackers.
@@ -392,8 +401,9 @@ const MessageListWithContext = <
    */
   const messageIdLastScrolledToRef = useRef<string>(undefined);
   const [hasMoved, setHasMoved] = useState(false);
-  const [lastReceivedId, setLastReceivedId] = useState(
-    getLastReceivedMessage(processedMessageList)?.id,
+  const lastReceivedId = useMemo(
+    () => getLastReceivedMessage(processedMessageList)?.id,
+    [processedMessageList],
   );
   const [scrollToBottomButtonVisible, setScrollToBottomButtonVisible] = useState(false);
 
@@ -404,7 +414,7 @@ const MessageListWithContext = <
   const channelRef = useRef(channel);
   channelRef.current = channel;
 
-  const updateStickyHeaderDateIfNeeded = (viewableItems: ViewToken[]) => {
+  const updateStickyHeaderDateIfNeeded = useStableCallback((viewableItems: ViewToken[]) => {
     if (!viewableItems.length) {
       return;
     }
@@ -431,12 +441,12 @@ const MessageListWithContext = <
         setStickyHeaderDate(lastItem.item.created_at);
       }
     }
-  };
+  });
 
   /**
    * This function should show or hide the unread indicator depending on the
    */
-  const updateStickyUnreadIndicator = (viewableItems: ViewToken[]) => {
+  const updateStickyUnreadIndicator = useStableCallback((viewableItems: ViewToken[]) => {
     if (!viewableItems.length) {
       setIsUnreadNotificationOpen(false);
       return;
@@ -482,7 +492,7 @@ const MessageListWithContext = <
         setIsUnreadNotificationOpen(false);
       }
     }
-  };
+  });
 
   /**
    * FlatList doesn't accept changeable function for onViewableItemsChanged prop.
@@ -580,9 +590,6 @@ const MessageListWithContext = <
   ]);
 
   useEffect(() => {
-    const lastReceivedMessage = getLastReceivedMessage(processedMessageList);
-    setLastReceivedId(lastReceivedMessage?.id);
-
     /**
      * Scroll down when
      * created_at timestamp of top message before update is lesser than created_at timestamp of top message after update - channel has resynced
@@ -678,7 +685,7 @@ const MessageListWithContext = <
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [channel, rawMessageList, threadList]);
 
-  const goToMessage = async (messageId: string) => {
+  const goToMessage = useStableCallback(async (messageId: string) => {
     const indexOfParentInMessageList = processedMessageList.findIndex(
       (message) => message?.id === messageId,
     );
@@ -706,7 +713,7 @@ const MessageListWithContext = <
     } catch (e) {
       console.warn('Error while scrolling to message', e);
     }
-  };
+  });
 
   /**
    * Check if a messageId needs to be scrolled to after list loads, and scroll to it
@@ -749,78 +756,99 @@ const MessageListWithContext = <
   // TODO: do not apply on RN 0.73 and above
   const shouldApplyAndroidWorkaround = inverted && Platform.OS === 'android';
 
-  const renderItem = ({
-    index,
-    item: message,
-  }: {
-    index: number;
-    item: MessageType<StreamChatGenerics>;
-  }) => {
-    if (!channel || channel.disconnected || (!channel.initialized && !channel.offlineMode)) {
-      return null;
-    }
+  const renderItem = useCallback(
+    ({ index, item: message }: { index: number; item: MessageType<StreamChatGenerics> }) => {
+      if (!channel || channel.disconnected || (!channel.initialized && !channel.offlineMode)) {
+        return null;
+      }
 
-    const createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
-    const lastReadTimestamp = channelUnreadState?.last_read.getTime();
-    const isNewestMessage = index === 0;
-    const isLastReadMessage =
-      channelUnreadState?.last_read_message_id === message.id ||
-      (!channelUnreadState?.unread_messages && createdAtTimestamp === lastReadTimestamp);
-
-    const showUnreadSeparator =
-      isLastReadMessage &&
-      !isNewestMessage &&
-      // The `channelUnreadState?.first_unread_message_id` is here for sent messages unread label
-      (!!channelUnreadState?.first_unread_message_id || !!channelUnreadState?.unread_messages);
-
-    const showUnreadUnderlay = !!shouldShowUnreadUnderlay && showUnreadSeparator;
-
-    const wrapMessageInTheme = client.userID === message.user?.id && !!myMessageTheme;
-    const renderDateSeperator = isMessageWithStylesReadByAndDateSeparator(message) &&
-      message.dateSeparator && <InlineDateSeparator date={message.dateSeparator} />;
-    const renderMessage = (
-      <Message
-        goToMessage={goToMessage}
-        groupStyles={isMessageWithStylesReadByAndDateSeparator(message) ? message.groupStyles : []}
-        isTargetedMessage={highlightedMessageId === message.id}
-        lastReceivedId={
-          lastReceivedId === message.id || message.quoted_message_id ? lastReceivedId : undefined
-        }
-        message={message}
-        onThreadSelect={onThreadSelect}
-        showUnreadUnderlay={showUnreadUnderlay}
-        style={[messageContainer]}
-        threadList={threadList}
-      />
-    );
+      const createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
+      const lastReadTimestamp = channelUnreadState?.last_read.getTime();
+      const isNewestMessage = index === 0;
+      const isLastReadMessage =
+        channelUnreadState?.last_read_message_id === message.id ||
+        (!channelUnreadState?.unread_messages && createdAtTimestamp === lastReadTimestamp);
+
+      const showUnreadSeparator =
+        isLastReadMessage &&
+        !isNewestMessage &&
+        // The `channelUnreadState?.first_unread_message_id` is here for sent messages unread label
+        (!!channelUnreadState?.first_unread_message_id || !!channelUnreadState?.unread_messages);
+
+      const showUnreadUnderlay = !!shouldShowUnreadUnderlay && showUnreadSeparator;
+
+      const wrapMessageInTheme = client.userID === message.user?.id && !!myMessageTheme;
+      const renderDateSeperator = isMessageWithStylesReadByAndDateSeparator(message) &&
+        message.dateSeparator && <InlineDateSeparator date={message.dateSeparator} />;
+      const renderMessage = (
+        <Message
+          goToMessage={goToMessage}
+          groupStyles={
+            isMessageWithStylesReadByAndDateSeparator(message) ? message.groupStyles : []
+          }
+          isTargetedMessage={highlightedMessageId === message.id}
+          lastReceivedId={
+            lastReceivedId === message.id || message.quoted_message_id ? lastReceivedId : undefined
+          }
+          message={message}
+          onThreadSelect={onThreadSelect}
+          showUnreadUnderlay={showUnreadUnderlay}
+          style={[messageContainer]}
+          threadList={threadList}
+        />
+      );
 
-    return (
-      <View
-        style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}
-        testID={`message-list-item-${index}`}
-      >
-        {message.type === 'system' ? (
-          <MessageSystem
-            message={message}
-            style={[{ paddingHorizontal: screenPadding }, messageContainer]}
-          />
-        ) : wrapMessageInTheme ? (
-          <ThemeProvider mergedStyle={modifiedTheme}>
+      return (
+        <View
+          style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}
+          testID={`message-list-item-${index}`}
+        >
+          {message.type === 'system' ? (
+            <MessageSystem
+              message={message}
+              style={[{ paddingHorizontal: screenPadding }, messageContainer]}
+            />
+          ) : wrapMessageInTheme ? (
+            <ThemeProvider mergedStyle={modifiedTheme}>
+              <View testID={`message-list-item-${index}`}>
+                {renderDateSeperator}
+                {renderMessage}
+              </View>
+            </ThemeProvider>
+          ) : (
             <View testID={`message-list-item-${index}`}>
               {renderDateSeperator}
               {renderMessage}
             </View>
-          </ThemeProvider>
-        ) : (
-          <View testID={`message-list-item-${index}`}>
-            {renderDateSeperator}
-            {renderMessage}
-          </View>
-        )}
-        {showUnreadUnderlay && <InlineUnreadIndicator />}
-      </View>
-    );
-  };
+          )}
+          {showUnreadUnderlay && <InlineUnreadIndicator />}
+        </View>
+      );
+    },
+    [
+      InlineDateSeparator,
+      InlineUnreadIndicator,
+      Message,
+      MessageSystem,
+      channel,
+      channelUnreadState?.first_unread_message_id,
+      channelUnreadState?.last_read,
+      channelUnreadState?.last_read_message_id,
+      channelUnreadState?.unread_messages,
+      client.userID,
+      goToMessage,
+      highlightedMessageId,
+      lastReceivedId,
+      messageContainer,
+      modifiedTheme,
+      myMessageTheme,
+      onThreadSelect,
+      screenPadding,
+      shouldApplyAndroidWorkaround,
+      shouldShowUnreadUnderlay,
+      threadList,
+    ],
+  );
 
   /**
    * We are keeping full control on message pagination, and not relying on react-native for it.
@@ -845,7 +873,7 @@ const MessageListWithContext = <
    * 2. Ensures that we call `loadMoreRecent`, once per content length
    * 3. If the call to `loadMore` is in progress, we wait for it to finish to make sure scroll doesn't jump.
    */
-  const maybeCallOnStartReached = async () => {
+  const maybeCallOnStartReached = useStableCallback(async () => {
     // If onStartReached has already been called for given data length, then ignore.
     if (
       processedMessageList?.length &&
@@ -882,14 +910,14 @@ const MessageListWithContext = <
     )
       .then(callback)
       .catch(onError);
-  };
+  });
 
   /**
    * 1. Makes a call to `loadMore` function, which queries more older messages.
    * 2. Ensures that we call `loadMore`, once per content length
    * 3. If the call to `loadMoreRecent` is in progress, we wait for it to finish to make sure scroll doesn't jump.
    */
-  const maybeCallOnEndReached = async () => {
+  const maybeCallOnEndReached = useStableCallback(async () => {
     // If onEndReached has already been called for given messageList length, then ignore.
     if (processedMessageList?.length && onEndReachedTracker.current[processedMessageList.length]) {
       return;
@@ -918,9 +946,9 @@ const MessageListWithContext = <
     onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore())
       .then(callback)
       .catch(onError);
-  };
+  });
 
-  const onUserScrollEvent: NonNullable<ScrollViewProps['onScroll']> = (event) => {
+  const onUserScrollEvent: NonNullable<ScrollViewProps['onScroll']> = useStableCallback((event) => {
     const nativeEvent = event.nativeEvent;
     clearTimeout(onScrollEventTimeoutRef.current);
     const offset = nativeEvent.contentOffset.y;
@@ -941,9 +969,9 @@ const MessageListWithContext = <
     if (isScrollAtEnd) {
       maybeCallOnEndReached();
     }
-  };
+  });
 
-  const handleScroll: ScrollViewProps['onScroll'] = (event) => {
+  const handleScroll: ScrollViewProps['onScroll'] = useStableCallback((event) => {
     const messageListHasMessages = processedMessageList.length > 0;
     const offset = event.nativeEvent.contentOffset.y;
     // Show scrollToBottom button once scroll position goes beyond 150.
@@ -965,9 +993,9 @@ const MessageListWithContext = <
     if (onListScroll) {
       onListScroll(event);
     }
-  };
+  });
 
-  const goToNewMessages = async () => {
+  const goToNewMessages = useStableCallback(async () => {
     const isNotLatestSet = channel.state.messages !== channel.state.latestMessages;
 
     if (isNotLatestSet) {
@@ -988,7 +1016,7 @@ const MessageListWithContext = <
     await markRead({
       updateChannelUnreadState: false,
     });
-  };
+  });
 
   const scrollToIndexFailedRetryCountRef = useRef<number>(0);
   const failScrollTimeoutId = useRef<ReturnType<typeof setTimeout>>(undefined);
@@ -1089,35 +1117,35 @@ const MessageListWithContext = <
     threadList,
   ]);
 
-  const dismissImagePicker = () => {
+  const dismissImagePicker = useStableCallback(() => {
     if (selectedPicker) {
       setSelectedPicker(undefined);
       closePicker();
     }
-  };
+  });
 
-  const onScrollBeginDrag: ScrollViewProps['onScrollBeginDrag'] = (event) => {
+  const onScrollBeginDrag: ScrollViewProps['onScrollBeginDrag'] = useStableCallback((event) => {
     !hasMoved && selectedPicker && setHasMoved(true);
     onUserScrollEvent(event);
-  };
+  });
 
-  const onScrollEndDrag: ScrollViewProps['onScrollEndDrag'] = (event) => {
+  const onScrollEndDrag: ScrollViewProps['onScrollEndDrag'] = useStableCallback((event) => {
     hasMoved && selectedPicker && setHasMoved(false);
     onUserScrollEvent(event);
-  };
+  });
 
-  const refCallback = (ref: FlatListType<MessageType<StreamChatGenerics>>) => {
+  const refCallback = useStableCallback((ref: FlatListType<MessageType<StreamChatGenerics>>) => {
     flatListRef.current = ref;
 
     if (setFlatListRef) {
       setFlatListRef(ref);
     }
-  };
+  });
 
-  const onUnreadNotificationClose = async () => {
+  const onUnreadNotificationClose = useStableCallback(async () => {
     await markRead();
     setIsUnreadNotificationOpen(false);
-  };
+  });
 
   const debugRef = useDebugContext();
 
@@ -1178,6 +1206,25 @@ const MessageListWithContext = <
     additionalFlatListPropsExcludingStyle = rest;
   }
 
+  const flatListStyle = useMemo(
+    () => [
+      styles.listContainer,
+      listContainer,
+      additionalFlatListProps?.style,
+      shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined,
+    ],
+    [additionalFlatListProps?.style, listContainer, shouldApplyAndroidWorkaround],
+  );
+
+  const flatListContentContainerStyle = useMemo(
+    () => [
+      styles.contentContainer,
+      additionalFlatListProps?.contentContainerStyle,
+      contentContainer,
+    ],
+    [additionalFlatListProps?.contentContainerStyle, contentContainer],
+  );
+
   if (!FlatList) {
     return null;
   }
@@ -1202,11 +1249,7 @@ const MessageListWithContext = <
         </View>
       ) : (
         <FlatList
-          contentContainerStyle={[
-            styles.contentContainer,
-            additionalFlatListProps?.contentContainerStyle,
-            contentContainer,
-          ]}
+          contentContainerStyle={flatListContentContainerStyle}
           /** Disables the MessageList UI. Which means, message actions, reactions won't work. */
           data={processedMessageList}
           extraData={disabled}
@@ -1222,10 +1265,7 @@ const MessageListWithContext = <
             minIndexForVisible = 1 means that beyond the item at index 1 we will not change the position on list updates,
             however it is not used when autoscrollToTopThreshold = 10.
           */
-          maintainVisibleContentPosition={{
-            autoscrollToTopThreshold: autoscrollToRecent ? 10 : undefined,
-            minIndexForVisible: 1,
-          }}
+          maintainVisibleContentPosition={maintainVisibleContentPosition}
           maxToRenderPerBatch={30}
           onMomentumScrollEnd={onUserScrollEvent}
           onScroll={handleScroll}
@@ -1238,12 +1278,7 @@ const MessageListWithContext = <
           renderItem={renderItem}
           scrollEnabled={overlay === 'none'}
           showsVerticalScrollIndicator={!shouldApplyAndroidWorkaround}
-          style={[
-            styles.listContainer,
-            listContainer,
-            additionalFlatListProps?.style,
-            shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined,
-          ]}
+          style={flatListStyle}
           testID='message-flat-list'
           viewabilityConfig={flatListViewabilityConfig}
           {...additionalFlatListPropsExcludingStyle}

package/src/components/MessageList/hooks/useMessageList.ts

@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+
 import type { ChannelState, MessageResponse } from 'stream-chat';
 
 import { useLastReadData } from './useLastReadData';
@@ -44,6 +46,29 @@ export const isMessageWithStylesReadByAndDateSeparator = <
 ): message is MessagesWithStylesReadByAndDateSeparator<StreamChatGenerics> =>
   (message as MessagesWithStylesReadByAndDateSeparator<StreamChatGenerics>).readBy !== undefined;
 
+export const shouldIncludeMessageInList = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  message: MessageType<StreamChatGenerics>,
+  options: { deletedMessagesVisibilityType?: DeletedMessagesVisibilityType; userId?: string },
+) => {
+  const { deletedMessagesVisibilityType, userId } = options;
+  const isMessageTypeDeleted = message.type === 'deleted';
+  switch (deletedMessagesVisibilityType) {
+    case 'sender':
+      return !isMessageTypeDeleted || message.user?.id === userId;
+
+    case 'receiver':
+      return !isMessageTypeDeleted || message.user?.id !== userId;
+
+    case 'never':
+      return !isMessageTypeDeleted;
+
+    default:
+      return !!message;
+  }
+};
+
 export const useMessageList = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
@@ -63,51 +88,57 @@ export const useMessageList = <
     ? undefined
     : read;
 
-  const dateSeparators = getDateSeparators<StreamChatGenerics>({
-    deletedMessagesVisibilityType,
-    hideDateSeparators,
-    messages: messageList,
-    userId: client.userID,
-  });
-
-  const messageGroupStyles = getMessagesGroupStyles<StreamChatGenerics>({
-    dateSeparators,
-    hideDateSeparators,
-    maxTimeBetweenGroupedMessages,
-    messages: messageList,
-    noGroupByUser,
-    userId: client.userID,
-  });
-
   const readData = useLastReadData({
     messages: messageList,
     read: readList,
     userID: client.userID,
   });
 
-  const messagesWithStylesReadByAndDateSeparator = messageList
-    .filter((msg) => {
-      const isMessageTypeDeleted = msg.type === 'deleted';
-      if (deletedMessagesVisibilityType === 'sender') {
-        return !isMessageTypeDeleted || msg.user?.id === client.userID;
-      } else if (deletedMessagesVisibilityType === 'receiver') {
-        return !isMessageTypeDeleted || msg.user?.id !== client.userID;
-      } else if (deletedMessagesVisibilityType === 'never') {
-        return !isMessageTypeDeleted;
-      } else {
-        return msg;
+  const processedMessageList = useMemo<MessageType<StreamChatGenerics>[]>(() => {
+    const dateSeparators = getDateSeparators({
+      deletedMessagesVisibilityType,
+      hideDateSeparators,
+      messages: messageList,
+      userId: client.userID,
+    });
+
+    const messageGroupStyles = getMessagesGroupStyles({
+      dateSeparators,
+      hideDateSeparators,
+      maxTimeBetweenGroupedMessages,
+      messages: messageList,
+      noGroupByUser,
+      userId: client.userID,
+    });
+
+    const newMessageList = [];
+    for (const message of messageList) {
+      if (
+        shouldIncludeMessageInList(message, {
+          deletedMessagesVisibilityType,
+          userId: client.userID,
+        })
+      ) {
+        const messageId = message.id;
+        newMessageList.unshift({
+          ...message,
+          dateSeparator: dateSeparators[messageId] || undefined,
+          groupStyles: messageGroupStyles[messageId] || ['single'],
+          readBy: messageId ? readData[messageId] || false : false,
+        });
       }
-    })
-    .map((msg) => ({
-      ...msg,
-      dateSeparator: dateSeparators[msg.id] || undefined,
-      groupStyles: messageGroupStyles[msg.id] || ['single'],
-      readBy: msg.id ? readData[msg.id] || false : false,
-    }));
-
-  const processedMessageList = [
-    ...messagesWithStylesReadByAndDateSeparator,
-  ].reverse() as MessageType<StreamChatGenerics>[];
+    }
+    return newMessageList;
+  }, [
+    client.userID,
+    deletedMessagesVisibilityType,
+    getMessagesGroupStyles,
+    hideDateSeparators,
+    maxTimeBetweenGroupedMessages,
+    messageList,
+    noGroupByUser,
+    readData,
+  ]);
 
   return {
     /** Messages enriched with dates/readby/groups and also reversed in order */