fix: date separator and group styles extraction to store

Author: khushal87

package/src/components/Channel/Channel.tsx

@@ -325,6 +325,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'forceAlignMessages'
       | 'Gallery'
       | 'getMessagesGroupStyles'
+      | 'getMessageGroupStyle'
       | 'Giphy'
       | 'giphyVersion'
       | 'handleBan'
@@ -614,6 +615,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     forceAlignMessages,
     Gallery = GalleryDefault,
     getMessagesGroupStyles,
+    getMessageGroupStyle,
     Giphy = GiphyDefault,
     giphyVersion = 'fixed_height',
     handleAttachButtonPress,
@@ -1912,6 +1914,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     FlatList,
     forceAlignMessages,
     Gallery,
+    getMessageGroupStyle,
     getMessagesGroupStyles,
     Giphy,
     giphyVersion,

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

@@ -27,6 +27,7 @@ export const useCreateMessagesContext = ({
   FlatList,
   forceAlignMessages,
   Gallery,
+  getMessageGroupStyle,
   getMessagesGroupStyles,
   Giphy,
   giphyVersion,
@@ -145,6 +146,7 @@ export const useCreateMessagesContext = ({
       FlatList,
       forceAlignMessages,
       Gallery,
+      getMessageGroupStyle,
       getMessagesGroupStyles,
       Giphy,
       giphyVersion,

package/src/components/Message/MessageSimple/MessageWrapper.tsx

@@ -4,14 +4,14 @@ import { View } from 'react-native';
 
 import { LocalMessage } from 'stream-chat';
 
-import { MessageListProps } from '../../../components/MessageList/MessageList';
+import { useMessageDateSeparator } from '../../../components/MessageList/hooks/useMessageDateSeparator';
+import { useMessageGroupStyles } from '../../../components/MessageList/hooks/useMessageGroupStyles';
 import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
-import { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
+import { useMessageListItemContext } from '../../../contexts/messageListItemContext/MessageListItemContext';
 import { useMessagesContext } from '../../../contexts/messagesContext/MessagesContext';
 import { ThemeProvider, useTheme } from '../../../contexts/themeContext/ThemeContext';
 
-import { Theme } from '../../../contexts/themeContext/utils/theme';
 import { useStateStore } from '../../../hooks/useStateStore';
 import { ChannelUnreadStateStoreType } from '../../../state-store/channel-unread-state';
 
@@ -22,36 +22,53 @@ const channelUnreadStateSelector = (state: ChannelUnreadStateStoreType) => ({
   unread_messages: state.channelUnreadState?.unread_messages,
 });
 
-export type MessageWrapperProps = Pick<MessageContextValue, 'goToMessage'> &
-  Pick<MessageListProps, 'onThreadSelect'> & {
-    isNewestMessage?: boolean;
-    message: LocalMessage;
-    modifiedTheme?: Theme;
-    dateSeparatorDate?: Date;
-    messageGroupStyles?: string[];
-  };
+export type MessageWrapperProps = {
+  isNewestMessage?: boolean;
+  message: LocalMessage;
+};
 
 export const MessageWrapper = (props: MessageWrapperProps) => {
-  const {
-    dateSeparatorDate,
-    isNewestMessage,
-    message,
-    messageGroupStyles,
-    goToMessage,
-    onThreadSelect,
-    modifiedTheme,
-  } = props;
+  const { isNewestMessage, message } = props;
   const { client } = useChatContext();
-  const { channelUnreadStateStore, channel, highlightedMessageId, threadList } =
-    useChannelContext();
   const {
+    channelUnreadStateStore,
+    channel,
+    hideDateSeparators,
+    highlightedMessageId,
+    maxTimeBetweenGroupedMessages,
+    threadList,
+  } = useChannelContext();
+  const {
+    getMessageGroupStyle,
     InlineDateSeparator,
     InlineUnreadIndicator,
     Message,
     MessageSystem,
     myMessageTheme,
     shouldShowUnreadUnderlay,
   } = useMessagesContext();
+  const {
+    goToMessage,
+    onThreadSelect,
+    noGroupByUser,
+    modifiedTheme,
+    messageListPreviousAndNextMessageStore,
+  } = useMessageListItemContext();
+
+  const dateSeparatorDate = useMessageDateSeparator({
+    hideDateSeparators,
+    message,
+    messageListPreviousAndNextMessageStore,
+  });
+
+  const groupStyles = useMessageGroupStyles({
+    dateSeparatorDate,
+    getMessageGroupStyle,
+    maxTimeBetweenGroupedMessages,
+    message,
+    messageListPreviousAndNextMessageStore,
+    noGroupByUser,
+  });
 
   const { first_unread_message_id, last_read, last_read_message_id, unread_messages } =
     useStateStore(channelUnreadStateStore.state, channelUnreadStateSelector);
@@ -87,7 +104,7 @@ export const MessageWrapper = (props: MessageWrapperProps) => {
   const renderMessage = (
     <Message
       goToMessage={goToMessage}
-      groupStyles={messageGroupStyles ?? []}
+      groupStyles={groupStyles}
       isTargetedMessage={highlightedMessageId === message.id}
       message={message}
       onThreadSelect={onThreadSelect}

package/src/components/MessageList/MessageFlashList.tsx

@@ -30,6 +30,10 @@ import {
   ImageGalleryContextValue,
   useImageGalleryContext,
 } from '../../contexts/imageGalleryContext/ImageGalleryContext';
+import {
+  MessageListItemContextValue,
+  MessageListItemProvider,
+} from '../../contexts/messageListItemContext/MessageListItemContext';
 import {
   MessagesContextValue,
   useMessagesContext,
@@ -251,6 +255,11 @@ const getItemTypeInternal = (message: LocalMessage) => {
   return 'generic-message';
 };
 
+const renderItem = ({ index, item: message }: { index: number; item: LocalMessage }) => {
+  const isNewestMessage = index === 0;
+  return <MessageWrapper isNewestMessage={isNewestMessage} message={message} />;
+};
+
 const channelUnreadStateSelector = (state: ChannelUnreadStateStoreType) => ({
   first_unread_message_id: state.channelUnreadState?.first_unread_message_id,
   last_read: state.channelUnreadState?.last_read,
@@ -355,8 +364,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
   );
 
   const {
-    dateSeparatorsRef,
-    messageGroupStylesRef,
+    messageListPreviousAndNextMessageStore,
     processedMessageList,
     rawMessageList,
     viewabilityChangedCallback,
@@ -715,25 +723,21 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     [],
   );
 
-  const renderItem = useCallback(
-    ({ index, item: message }: { index: number; item: LocalMessage }) => {
-      const dateSeparatorDate = dateSeparatorsRef.current[message.id];
-      const messageGroupStyles = messageGroupStylesRef.current[message.id] ?? [];
-      const isNewestMessage = index === 0;
-
-      return (
-        <MessageWrapper
-          dateSeparatorDate={dateSeparatorDate}
-          goToMessage={goToMessage}
-          isNewestMessage={isNewestMessage}
-          message={message}
-          messageGroupStyles={messageGroupStyles}
-          modifiedTheme={modifiedTheme}
-          onThreadSelect={onThreadSelect}
-        />
-      );
-    },
-    [dateSeparatorsRef, goToMessage, messageGroupStylesRef, modifiedTheme, onThreadSelect],
+  const messageListItemContextValue: MessageListItemContextValue = useMemo(
+    () => ({
+      goToMessage,
+      messageListPreviousAndNextMessageStore,
+      modifiedTheme,
+      noGroupByUser,
+      onThreadSelect,
+    }),
+    [
+      goToMessage,
+      messageListPreviousAndNextMessageStore,
+      modifiedTheme,
+      noGroupByUser,
+      onThreadSelect,
+    ],
   );
 
   const messagesWithImages =
@@ -1063,34 +1067,36 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
           {EmptyStateIndicator ? <EmptyStateIndicator listType='message' /> : null}
         </View>
       ) : (
-        <FlashList
-          contentContainerStyle={flatListContentContainerStyle}
-          data={processedMessageList}
-          drawDistance={800}
-          getItemType={getItemTypeInternal}
-          initialScrollIndex={
-            indexToScrollToRef.current === -1 ? undefined : indexToScrollToRef.current
-          }
-          keyboardShouldPersistTaps='handled'
-          keyExtractor={keyExtractor}
-          ListFooterComponent={FooterComponent}
-          ListHeaderComponent={HeaderComponent}
-          maintainVisibleContentPosition={maintainVisibleContentPosition}
-          onMomentumScrollEnd={onUserScrollEvent}
-          onScroll={handleScroll}
-          onScrollBeginDrag={onScrollBeginDrag}
-          onScrollEndDrag={onScrollEndDrag}
-          onTouchEnd={dismissImagePicker}
-          onViewableItemsChanged={stableOnViewableItemsChanged}
-          ref={refCallback}
-          renderItem={renderItem}
-          scrollEventThrottle={isLiveStreaming ? 16 : undefined}
-          showsVerticalScrollIndicator={false}
-          style={flatListStyle}
-          testID='message-flash-list'
-          viewabilityConfig={flatListViewabilityConfig}
-          {...additionalFlashListPropsExcludingStyle}
-        />
+        <MessageListItemProvider value={messageListItemContextValue}>
+          <FlashList
+            contentContainerStyle={flatListContentContainerStyle}
+            data={processedMessageList}
+            drawDistance={800}
+            getItemType={getItemTypeInternal}
+            initialScrollIndex={
+              indexToScrollToRef.current === -1 ? undefined : indexToScrollToRef.current
+            }
+            keyboardShouldPersistTaps='handled'
+            keyExtractor={keyExtractor}
+            ListFooterComponent={FooterComponent}
+            ListHeaderComponent={HeaderComponent}
+            maintainVisibleContentPosition={maintainVisibleContentPosition}
+            onMomentumScrollEnd={onUserScrollEvent}
+            onScroll={handleScroll}
+            onScrollBeginDrag={onScrollBeginDrag}
+            onScrollEndDrag={onScrollEndDrag}
+            onTouchEnd={dismissImagePicker}
+            onViewableItemsChanged={stableOnViewableItemsChanged}
+            ref={refCallback}
+            renderItem={renderItem}
+            scrollEventThrottle={isLiveStreaming ? 16 : undefined}
+            showsVerticalScrollIndicator={false}
+            style={flatListStyle}
+            testID='message-flash-list'
+            viewabilityConfig={flatListViewabilityConfig}
+            {...additionalFlashListPropsExcludingStyle}
+          />
+        </MessageListItemProvider>
       )}
       <View style={styles.stickyHeader}>
         {messageListLengthAfterUpdate && StickyHeader ? (