stream-chat-react-native-core 8.11.0 → 8.12.0-beta.1

package/src/components/MessageList/MessageList.tsx

@@ -17,7 +17,6 @@ import { useShouldScrollToRecentOnNewOwnMessage } from './hooks/useShouldScrollT
 import { InlineLoadingMoreIndicator } from './InlineLoadingMoreIndicator';
 import { InlineLoadingMoreRecentIndicator } from './InlineLoadingMoreRecentIndicator';
 import { InlineLoadingMoreRecentThreadIndicator } from './InlineLoadingMoreRecentThreadIndicator';
-import { getLastReceivedMessage } from './utils/getLastReceivedMessage';
 
 import {
   AttachmentPickerContextValue,
@@ -33,6 +32,10 @@ import {
   ImageGalleryContextValue,
   useImageGalleryContext,
 } from '../../contexts/imageGalleryContext/ImageGalleryContext';
+import {
+  MessageListItemContextValue,
+  MessageListItemProvider,
+} from '../../contexts/messageListItemContext/MessageListItemContext';
 import {
   MessagesContextValue,
   useMessagesContext,
@@ -45,11 +48,12 @@ import {
   PaginatedMessageListContextValue,
   usePaginatedMessageListContext,
 } from '../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
-import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
+import { mergeThemes, useTheme } from '../../contexts/themeContext/ThemeContext';
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
 import { useStableCallback } from '../../hooks';
 import { FileTypes } from '../../types/types';
+import { MessageWrapper } from '../Message/MessageSimple/MessageWrapper';
 
 // This is just to make sure that the scrolling happens in a different task queue.
 // TODO: Think if we really need this and strive to remove it if we can.
@@ -124,10 +128,10 @@ type MessageListPropsWithContext = Pick<
     ChannelContextValue,
     | 'channel'
     | 'channelUnreadState'
+    | 'channelUnreadStateStore'
     | 'disabled'
     | 'EmptyStateIndicator'
     | 'hideStickyDateHeader'
-    | 'highlightedMessageId'
     | 'loadChannelAroundMessage'
     | 'loading'
     | 'LoadingIndicator'
@@ -150,14 +154,9 @@ type MessageListPropsWithContext = Pick<
     | 'DateHeader'
     | 'disableTypingIndicator'
     | 'FlatList'
-    | 'InlineDateSeparator'
-    | 'InlineUnreadIndicator'
     | 'legacyImageViewerSwipeBehaviour'
-    | 'Message'
     | 'ScrollToBottomButton'
-    | 'MessageSystem'
     | 'myMessageTheme'
-    | 'shouldShowUnreadUnderlay'
     | 'TypingIndicator'
     | 'TypingIndicatorContainer'
     | 'UnreadMessagesNotification'
@@ -234,6 +233,10 @@ type MessageListPropsWithContext = Pick<
     isLiveStreaming?: boolean;
   };
 
+const renderItem = ({ item: message }: { item: LocalMessage }) => {
+  return <MessageWrapper message={message} />;
+};
+
 /**
  * The message list component renders a list of messages. It consumes the following contexts:
  *
@@ -250,7 +253,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   const {
     additionalFlatListProps,
     channel,
-    channelUnreadState,
+    channelUnreadStateStore,
     client,
     closePicker,
     DateHeader,
@@ -261,9 +264,6 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     FooterComponent = InlineLoadingMoreIndicator,
     HeaderComponent = LoadingMoreRecentIndicator,
     hideStickyDateHeader,
-    highlightedMessageId,
-    InlineDateSeparator,
-    InlineUnreadIndicator,
     inverted = true,
     isListActive = false,
     isLiveStreaming = false,
@@ -277,8 +277,6 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     loadMoreThread,
     markRead,
     maximumMessageLimit,
-    Message,
-    MessageSystem,
     myMessageTheme,
     NetworkDownIndicator,
     noGroupByUser,
@@ -293,7 +291,6 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     setMessages,
     setSelectedPicker,
     setTargetedMessage,
-    shouldShowUnreadUnderlay,
     StickyHeader,
     targetedMessage,
     thread,
@@ -308,8 +305,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
 
   const {
     colors: { white_snow },
-    messageList: { container, contentContainer, listContainer, messageContainer },
-    screenPadding,
+    messageList: { container, contentContainer, listContainer },
   } = theme;
 
   const myMessageThemeString = useMemo(() => JSON.stringify(myMessageTheme), [myMessageTheme]);
@@ -325,8 +321,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
    * processedMessageList changes on any state change
    */
   const {
-    dateSeparatorsRef,
-    messageGroupStylesRef,
+    messageListPreviousAndNextMessageStore,
     processedMessageList,
     rawMessageList,
     viewabilityChangedCallback,
@@ -395,10 +390,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
    */
   const messageIdLastScrolledToRef = useRef<string>(undefined);
   const [hasMoved, setHasMoved] = useState(false);
-  const lastReceivedId = useMemo(
-    () => getLastReceivedMessage(processedMessageList)?.id,
-    [processedMessageList],
-  );
+
   const [scrollToBottomButtonVisible, setScrollToBottomButtonVisible] = useState(false);
 
   const [stickyHeaderDate, setStickyHeaderDate] = useState<Date | undefined>();
@@ -437,26 +429,23 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     }
   });
 
-  const messagesLength = useRef<number>(processedMessageList.length);
-
   /**
    * This function should show or hide the unread indicator depending on the
    */
   const updateStickyUnreadIndicator = useStableCallback((viewableItems: ViewToken[]) => {
+    const channelUnreadState = channelUnreadStateStore.channelUnreadState;
     // we need this check to make sure that regular list change do not trigger
     // the unread notification to appear (for example if the old last read messages
     // go out of the viewport).
-    if (processedMessageList.length !== messagesLength.current) {
-      return;
-    }
-    messagesLength.current = processedMessageList.length;
+    const lastReadMessageId = channelUnreadState?.last_read_message_id;
+    const lastReadMessageVisible = viewableItems.some((item) => item.item.id === lastReadMessageId);
 
-    if (!viewableItems.length || !readEvents) {
-      setIsUnreadNotificationOpen(false);
-      return;
-    }
-
-    if (selectedPicker === 'images') {
+    if (
+      !viewableItems.length ||
+      !readEvents ||
+      lastReadMessageVisible ||
+      selectedPicker === 'images'
+    ) {
       setIsUnreadNotificationOpen(false);
       return;
     }
@@ -467,7 +456,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       const lastItemMessage = lastItem.item;
       const lastItemCreatedAt = lastItemMessage.created_at;
 
-      const unreadIndicatorDate = channelUnreadState?.last_read.getTime();
+      const unreadIndicatorDate = channelUnreadState?.last_read?.getTime();
       const lastItemDate = lastItemCreatedAt.getTime();
 
       if (
@@ -547,6 +536,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
    */
   useEffect(() => {
     const shouldMarkRead = () => {
+      const channelUnreadState = channelUnreadStateStore.channelUnreadState;
       return (
         !channelUnreadState?.first_unread_message_id &&
         !scrollToBottomButtonVisible &&
@@ -558,23 +548,22 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     const handleEvent = async (event: Event) => {
       const mainChannelUpdated = !event.message?.parent_id || event.message?.show_in_channel;
       const isMyOwnMessage = event.message?.user?.id === client.user?.id;
+      const channelUnreadState = channelUnreadStateStore.channelUnreadState;
       // When the scrollToBottomButtonVisible is true, we need to manually update the channelUnreadState when its a received message.
       if (
         (scrollToBottomButtonVisible || channelUnreadState?.first_unread_message_id) &&
         !isMyOwnMessage
       ) {
-        setChannelUnreadState((prev) => {
-          const previousUnreadCount = prev?.unread_messages ?? 0;
-          const previousLastMessage = getPreviousLastMessage(channel.state.messages, event.message);
-          return {
-            ...(prev || {}),
-            last_read:
-              prev?.last_read ??
-              (previousUnreadCount === 0 && previousLastMessage?.created_at
-                ? new Date(previousLastMessage.created_at)
-                : new Date(0)), // not having information about the last read message means the whole channel is unread,
-            unread_messages: previousUnreadCount + 1,
-          };
+        const previousUnreadCount = channelUnreadState?.unread_messages ?? 0;
+        const previousLastMessage = getPreviousLastMessage(channel.state.messages, event.message);
+        setChannelUnreadState({
+          ...channelUnreadState,
+          last_read:
+            channelUnreadState?.last_read ??
+            (previousUnreadCount === 0 && previousLastMessage?.created_at
+              ? new Date(previousLastMessage.created_at)
+              : new Date(0)), // not having information about the last read message means the whole channel is unread,
+          unread_messages: previousUnreadCount + 1,
         });
       } else if (mainChannelUpdated && shouldMarkRead()) {
         await markRead();
@@ -588,7 +577,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     };
   }, [
     channel,
-    channelUnreadState?.first_unread_message_id,
+    channelUnreadStateStore,
     client.user?.id,
     markRead,
     scrollToBottomButtonVisible,
@@ -779,95 +768,20 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [targetedMessage]);
 
-  const renderItem = useCallback(
-    ({ index, item: message }: { index: number; item: LocalMessage }) => {
-      if (!channel || channel.disconnected) {
-        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 = dateSeparatorsRef.current[message.id] && (
-        <InlineDateSeparator date={dateSeparatorsRef.current[message.id]} />
-      );
-
-      const renderMessage = (
-        <Message
-          goToMessage={goToMessage}
-          groupStyles={messageGroupStylesRef.current[message.id] ?? []}
-          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 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>
-          )}
-          {showUnreadUnderlay && <InlineUnreadIndicator />}
-        </View>
-      );
-    },
+  const messageListItemContextValue: MessageListItemContextValue = useMemo(
+    () => ({
+      goToMessage,
+      messageListPreviousAndNextMessageStore,
+      modifiedTheme,
+      noGroupByUser,
+      onThreadSelect,
+    }),
     [
-      InlineDateSeparator,
-      InlineUnreadIndicator,
-      Message,
-      MessageSystem,
-      channel,
-      channelUnreadState?.first_unread_message_id,
-      channelUnreadState?.last_read,
-      channelUnreadState?.last_read_message_id,
-      channelUnreadState?.unread_messages,
-      client.userID,
-      dateSeparatorsRef,
       goToMessage,
-      highlightedMessageId,
-      lastReceivedId,
-      messageContainer,
-      messageGroupStylesRef,
+      messageListPreviousAndNextMessageStore,
       modifiedTheme,
-      myMessageTheme,
+      noGroupByUser,
       onThreadSelect,
-      screenPadding,
-      shouldShowUnreadUnderlay,
-      threadList,
     ],
   );
 
@@ -1232,42 +1146,44 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           {EmptyStateIndicator ? <EmptyStateIndicator listType='message' /> : null}
         </View>
       ) : (
-        <FlatList
-          contentContainerStyle={flatListContentContainerStyle}
-          /** Disables the MessageList UI. Which means, message actions, reactions won't work. */
-          data={processedMessageList}
-          extraData={disabled}
-          inverted={inverted}
-          keyboardShouldPersistTaps='handled'
-          keyExtractor={keyExtractor}
-          ListFooterComponent={FooterComponent}
-          ListHeaderComponent={HeaderComponent}
-          /**
+        <MessageListItemProvider value={messageListItemContextValue}>
+          <FlatList
+            contentContainerStyle={flatListContentContainerStyle}
+            /** Disables the MessageList UI. Which means, message actions, reactions won't work. */
+            data={processedMessageList}
+            extraData={disabled}
+            inverted={inverted}
+            keyboardShouldPersistTaps='handled'
+            keyExtractor={keyExtractor}
+            ListFooterComponent={FooterComponent}
+            ListHeaderComponent={HeaderComponent}
+            /**
             If autoscrollToTopThreshold is 10, we scroll to recent only if before the update, the list was already at the
             bottom (10 offset or below).
             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={maintainVisibleContentPosition}
-          maxToRenderPerBatch={30}
-          onMomentumScrollEnd={onUserScrollEvent}
-          onScroll={handleScroll}
-          onScrollBeginDrag={onScrollBeginDrag}
-          onScrollEndDrag={onScrollEndDrag}
-          onScrollToIndexFailed={onScrollToIndexFailedRef.current}
-          onTouchEnd={dismissImagePicker}
-          onViewableItemsChanged={stableOnViewableItemsChanged}
-          ref={refCallback}
-          renderItem={renderItem}
-          scrollEventThrottle={isLiveStreaming ? 16 : undefined}
-          showsVerticalScrollIndicator={false}
-          // @ts-expect-error react-native internal
-          strictMode={isLiveStreaming}
-          style={flatListStyle}
-          testID='message-flat-list'
-          viewabilityConfig={flatListViewabilityConfig}
-          {...additionalFlatListPropsExcludingStyle}
-        />
+            maintainVisibleContentPosition={maintainVisibleContentPosition}
+            maxToRenderPerBatch={30}
+            onMomentumScrollEnd={onUserScrollEvent}
+            onScroll={handleScroll}
+            onScrollBeginDrag={onScrollBeginDrag}
+            onScrollEndDrag={onScrollEndDrag}
+            onScrollToIndexFailed={onScrollToIndexFailedRef.current}
+            onTouchEnd={dismissImagePicker}
+            onViewableItemsChanged={stableOnViewableItemsChanged}
+            ref={refCallback}
+            renderItem={renderItem}
+            scrollEventThrottle={isLiveStreaming ? 16 : undefined}
+            showsVerticalScrollIndicator={false}
+            // @ts-expect-error react-native internal
+            strictMode={isLiveStreaming}
+            style={flatListStyle}
+            testID='message-flat-list'
+            viewabilityConfig={flatListViewabilityConfig}
+            {...additionalFlatListPropsExcludingStyle}
+          />
+        </MessageListItemProvider>
       )}
       <View style={styles.stickyHeader}>
         {messageListLengthAfterUpdate && StickyHeader ? (
@@ -1299,6 +1215,7 @@ export const MessageList = (props: MessageListProps) => {
   const {
     channel,
     channelUnreadState,
+    channelUnreadStateStore,
     disabled,
     EmptyStateIndicator,
     enableMessageGroupingByUser,
@@ -1347,6 +1264,7 @@ export const MessageList = (props: MessageListProps) => {
       {...{
         channel,
         channelUnreadState,
+        channelUnreadStateStore,
         client,
         closePicker,
         DateHeader,

package/src/components/MessageList/UnreadMessagesNotification.tsx

@@ -21,7 +21,7 @@ export const UnreadMessagesNotification = (props: UnreadMessagesNotificationProp
   const { onCloseHandler, onPressHandler } = props;
   const { t } = useTranslationContext();
   const {
-    channelUnreadState,
+    channelUnreadStateStore,
     loadChannelAtFirstUnreadMessage,
     markRead,
     setChannelUnreadState,
@@ -33,7 +33,7 @@ export const UnreadMessagesNotification = (props: UnreadMessagesNotificationProp
       await onPressHandler();
     } else {
       await loadChannelAtFirstUnreadMessage({
-        channelUnreadState,
+        channelUnreadState: channelUnreadStateStore.channelUnreadState,
         setChannelUnreadState,
         setTargetedMessage,
       });

package/src/components/MessageList/__tests__/MessageList.test.js

@@ -382,12 +382,19 @@ describe('MessageList', () => {
     });
   });
 
-  it("should render the UnreadMessagesIndicator when there's unread messages", async () => {
+  it("should render the InlineUnreadIndicator when there's unread messages", async () => {
     const user1 = generateUser();
     const user2 = generateUser();
     const messages = Array.from({ length: 10 }, (_, i) =>
       generateMessage({ id: `${i}`, text: `message-${i}` }),
     );
+    const read_data = {
+      [user1.id]: {
+        last_read: new Date(),
+        last_read_message_id: '5',
+        unread_messages: 5,
+      },
+    };
     const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 }), generateMember({ user: user2 })],
     });
@@ -397,23 +404,18 @@ describe('MessageList', () => {
     const channel = chatClient.channel('messaging', mockedChannel.id);
     await channel.watch();
 
-    const channelUnreadState = {
-      last_read: new Date(),
-      last_read_message_id: '5',
-      unread_messages: 5,
-    };
-
     channel.state = {
       ...channelInitialState,
       latestMessages: [],
       messages,
+      read: read_data,
     };
 
     const { queryByLabelText } = render(
       <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel}>
-            <MessageList channelUnreadState={channelUnreadState} />
+            <MessageList />
           </Channel>
         </Chat>
       </OverlayProvider>,

package/src/components/MessageList/__tests__/useMessageDateSeparator.test.ts

@@ -0,0 +1,83 @@
+import { renderHook } from '@testing-library/react-native';
+
+import { LocalMessage } from 'stream-chat';
+
+import { MessagePreviousAndNextMessageStore } from '../../../state-store/message-list-prev-next-state';
+import { useMessageDateSeparator } from '../hooks/useMessageDateSeparator';
+
+describe('useMessageDateSeparator', () => {
+  let messageListPreviousAndNextMessageStore: MessagePreviousAndNextMessageStore;
+  let messages: LocalMessage[];
+
+  beforeEach(() => {
+    messageListPreviousAndNextMessageStore = new MessagePreviousAndNextMessageStore();
+    messages = [
+      {
+        created_at: new Date('2020-01-01T00:00:00.000Z'),
+        id: '1',
+        text: 'Hello',
+      },
+      {
+        created_at: new Date('2020-01-02T00:00:00.000Z'),
+        id: '2',
+        text: 'World',
+      },
+      {
+        created_at: new Date('2020-01-03T00:00:00.000Z'),
+        id: '3',
+        text: 'Hello World',
+      },
+    ] as LocalMessage[];
+    messageListPreviousAndNextMessageStore.setMessageListPreviousAndNextMessage({ messages });
+  });
+
+  it('should return undefined if no message is passed', () => {
+    const { result } = renderHook(() =>
+      useMessageDateSeparator({ message: undefined, messageListPreviousAndNextMessageStore }),
+    );
+    expect(result.current).toBeUndefined();
+  });
+
+  it('should return undefined if the hideDateSeparators prop is true', () => {
+    const { result } = renderHook(() =>
+      useMessageDateSeparator({
+        hideDateSeparators: true,
+        message: messages[1],
+        messageListPreviousAndNextMessageStore,
+      }),
+    );
+    expect(result.current).toBeUndefined();
+  });
+
+  it('should return the date separator for a message if previous message is not the same day', () => {
+    const { result } = renderHook(() =>
+      useMessageDateSeparator({ message: messages[1], messageListPreviousAndNextMessageStore }),
+    );
+    expect(result.current).toBe(messages[1].created_at);
+  });
+
+  it('should return undefined if the message is the same day as the previous message', () => {
+    const messages = [
+      {
+        created_at: new Date('2020-01-01T01:00:00.000Z'),
+        id: '1',
+        text: 'Hello',
+      },
+      {
+        created_at: new Date('2020-01-01T02:00:00.000Z'),
+        id: '2',
+        text: 'World',
+      },
+    ] as LocalMessage[];
+    const messageListPreviousAndNextMessageStore = new MessagePreviousAndNextMessageStore();
+    messageListPreviousAndNextMessageStore.setMessageListPreviousAndNextMessage({ messages });
+    const { result: resultOfFirstMessage } = renderHook(() =>
+      useMessageDateSeparator({ message: messages[0], messageListPreviousAndNextMessageStore }),
+    );
+    expect(resultOfFirstMessage.current).toBe(messages[0].created_at);
+    const { result: resultOfSecondMessage } = renderHook(() =>
+      useMessageDateSeparator({ message: messages[1], messageListPreviousAndNextMessageStore }),
+    );
+    expect(resultOfSecondMessage.current).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,66 @@
+import { useCallback, useMemo } from 'react';
+
+import { LocalMessage } from 'stream-chat';
+
+import { useStateStore } from '../../../hooks/useStateStore';
+import {
+  MessagePreviousAndNextMessageStore,
+  MessagePreviousAndNextMessageStoreType,
+} from '../../../state-store/message-list-prev-next-state';
+
+export const getDateSeparatorValue = ({
+  hideDateSeparators,
+  message,
+  previousMessage,
+}: {
+  hideDateSeparators?: boolean;
+  message?: LocalMessage;
+  previousMessage?: LocalMessage;
+}) => {
+  if (hideDateSeparators) {
+    return undefined;
+  }
+
+  const previousMessageDate = previousMessage?.created_at.toDateString();
+  const messageDate = message?.created_at.toDateString();
+
+  if (previousMessageDate !== messageDate) {
+    return message?.created_at;
+  }
+
+  return undefined;
+};
+
+/**
+ * Hook to get whether a message should have a date separator above it
+ */
+export const useMessageDateSeparator = ({
+  hideDateSeparators,
+  message,
+  messageListPreviousAndNextMessageStore,
+}: {
+  hideDateSeparators?: boolean;
+  message?: LocalMessage;
+  messageListPreviousAndNextMessageStore: MessagePreviousAndNextMessageStore;
+}) => {
+  const selector = useCallback(
+    (state: MessagePreviousAndNextMessageStoreType) => ({
+      previousMessage: message ? state.messageList[message.id]?.previousMessage : undefined,
+    }),
+    [message],
+  );
+  const { previousMessage } = useStateStore(messageListPreviousAndNextMessageStore.state, selector);
+
+  const dateSeparatorDate = useMemo(() => {
+    if (!message && !previousMessage) {
+      return undefined;
+    }
+    return getDateSeparatorValue({
+      hideDateSeparators,
+      message,
+      previousMessage,
+    });
+  }, [hideDateSeparators, message, previousMessage]);
+
+  return dateSeparatorDate;
+};