stream-chat-react-native-core 8.11.0 → 8.12.0

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

@@ -0,0 +1,147 @@
+import React, { useCallback } from 'react';
+
+import { View } from 'react-native';
+
+import { LocalMessage } from 'stream-chat';
+
+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 { useMessageListItemContext } from '../../../contexts/messageListItemContext/MessageListItemContext';
+import { useMessagesContext } from '../../../contexts/messagesContext/MessagesContext';
+import { ThemeProvider, useTheme } from '../../../contexts/themeContext/ThemeContext';
+
+import { useStateStore } from '../../../hooks/useStateStore';
+import { ChannelUnreadStateStoreType } from '../../../state-store/channel-unread-state';
+import { MessagePreviousAndNextMessageStoreType } from '../../../state-store/message-list-prev-next-state';
+
+const channelUnreadStateSelector = (state: ChannelUnreadStateStoreType) => ({
+  first_unread_message_id: state.channelUnreadState?.first_unread_message_id,
+  last_read_message_id: state.channelUnreadState?.last_read_message_id,
+  last_read_timestamp: state.channelUnreadState?.last_read?.getTime(),
+  unread_messages: state.channelUnreadState?.unread_messages,
+});
+
+export type MessageWrapperProps = {
+  message: LocalMessage;
+};
+
+export const MessageWrapper = React.memo((props: MessageWrapperProps) => {
+  const { message } = props;
+  const { client } = useChatContext();
+  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 selector = useCallback(
+    (state: MessagePreviousAndNextMessageStoreType) => ({
+      nextMessage: state.messageList[message.id]?.nextMessage,
+    }),
+    [message.id],
+  );
+  const { nextMessage } = useStateStore(messageListPreviousAndNextMessageStore.state, selector);
+  const isNewestMessage = nextMessage === undefined;
+  const groupStyles = useMessageGroupStyles({
+    dateSeparatorDate,
+    getMessageGroupStyle,
+    maxTimeBetweenGroupedMessages,
+    message,
+    messageListPreviousAndNextMessageStore,
+    noGroupByUser,
+  });
+
+  const { first_unread_message_id, last_read_timestamp, last_read_message_id, unread_messages } =
+    useStateStore(channelUnreadStateStore.state, channelUnreadStateSelector);
+  const {
+    theme: {
+      messageList: { messageContainer },
+      screenPadding,
+    },
+  } = useTheme();
+  if (!channel || channel.disconnected) {
+    return null;
+  }
+
+  const createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
+  const isLastReadMessage =
+    last_read_message_id === message.id ||
+    (!unread_messages && createdAtTimestamp === last_read_timestamp);
+
+  const showUnreadSeparator =
+    isLastReadMessage &&
+    !isNewestMessage &&
+    // The `channelUnreadState?.first_unread_message_id` is here for sent messages unread label
+    (!!first_unread_message_id || !!unread_messages);
+
+  const showUnreadUnderlay = !!shouldShowUnreadUnderlay && showUnreadSeparator;
+
+  const wrapMessageInTheme = client.userID === message.user?.id && !!myMessageTheme;
+  const renderDateSeperator = dateSeparatorDate ? (
+    <InlineDateSeparator date={dateSeparatorDate} />
+  ) : null;
+
+  const renderMessage = (
+    <Message
+      goToMessage={goToMessage}
+      groupStyles={groupStyles}
+      isTargetedMessage={highlightedMessageId === message.id}
+      message={message}
+      onThreadSelect={onThreadSelect}
+      showUnreadUnderlay={showUnreadUnderlay}
+      style={[messageContainer]}
+      threadList={threadList}
+    />
+  );
+
+  return (
+    <View testID={`message-list-item-${message.id}`}>
+      {message.type === 'system' ? (
+        <MessageSystem
+          message={message}
+          style={[{ paddingHorizontal: screenPadding }, messageContainer]}
+        />
+      ) : wrapMessageInTheme ? (
+        <ThemeProvider mergedStyle={modifiedTheme}>
+          <View testID={`message-list-item-${message.id}`}>
+            {renderDateSeperator}
+            {renderMessage}
+          </View>
+        </ThemeProvider>
+      ) : (
+        <View testID={`message-list-item-${message.id}`}>
+          {renderDateSeperator}
+          {renderMessage}
+        </View>
+      )}
+      {showUnreadUnderlay && <InlineUnreadIndicator />}
+    </View>
+  );
+});

package/src/components/Message/MessageSimple/__tests__/MessageStatus.test.js

@@ -81,11 +81,7 @@ describe('MessageStatus', () => {
       <ChannelsStateProvider>
         <Chat client={chatClient} i18nInstance={i18nInstance}>
           <Channel channel={channel}>
-            <MessageStatus
-              lastReceivedId={staticMessage.id}
-              message={staticMessage}
-              readBy={readBy}
-            />
+            <MessageStatus message={staticMessage} readBy={readBy} />
           </Channel>
         </Chat>
       </ChannelsStateProvider>,

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -22,7 +22,6 @@ export const useCreateMessageContext = ({
   isMessageAIGenerated,
   isMyMessage,
   lastGroupMessage,
-  lastReceivedId,
   members,
   message,
   messageContentOrder,
@@ -74,7 +73,6 @@ export const useCreateMessageContext = ({
       isMessageAIGenerated,
       isMyMessage,
       lastGroupMessage,
-      lastReceivedId,
       members,
       message,
       messageContentOrder,
@@ -105,7 +103,6 @@ export const useCreateMessageContext = ({
       hasReactions,
       isEditedMessageOpen,
       lastGroupMessage,
-      lastReceivedId,
       membersValue,
       myMessageThemeString,
       reactionsValue,

package/src/components/MessageList/MessageFlashList.tsx

@@ -17,8 +17,6 @@ import { InlineLoadingMoreIndicator } from './InlineLoadingMoreIndicator';
 import { InlineLoadingMoreRecentIndicator } from './InlineLoadingMoreRecentIndicator';
 import { InlineLoadingMoreRecentThreadIndicator } from './InlineLoadingMoreRecentThreadIndicator';
 
-import { getLastReceivedMessageFlashList } from './utils/getLastReceivedMessageFlashList';
-
 import {
   AttachmentPickerContextValue,
   useAttachmentPickerContext,
@@ -32,6 +30,10 @@ import {
   ImageGalleryContextValue,
   useImageGalleryContext,
 } from '../../contexts/imageGalleryContext/ImageGalleryContext';
+import {
+  MessageListItemContextValue,
+  MessageListItemProvider,
+} from '../../contexts/messageListItemContext/MessageListItemContext';
 import {
   MessagesContextValue,
   useMessagesContext,
@@ -44,11 +46,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';
 
 let FlashList;
 
@@ -102,6 +105,7 @@ type MessageFlashListPropsWithContext = Pick<
     ChannelContextValue,
     | 'channel'
     | 'channelUnreadState'
+    | 'channelUnreadStateStore'
     | 'disabled'
     | 'EmptyStateIndicator'
     | 'hideStickyDateHeader'
@@ -250,6 +254,10 @@ const getItemTypeInternal = (message: LocalMessage) => {
   return 'generic-message';
 };
 
+const renderItem = ({ item: message }: { item: LocalMessage }) => {
+  return <MessageWrapper message={message} />;
+};
+
 const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) => {
   const LoadingMoreRecentIndicator = props.threadList
     ? InlineLoadingMoreRecentThreadIndicator
@@ -257,7 +265,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
   const {
     additionalFlashListProps,
     channel,
-    channelUnreadState,
+    channelUnreadStateStore,
     client,
     closePicker,
     DateHeader,
@@ -268,9 +276,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     FooterComponent = LoadingMoreRecentIndicator,
     HeaderComponent = InlineLoadingMoreIndicator,
     hideStickyDateHeader,
-    highlightedMessageId,
-    InlineDateSeparator,
-    InlineUnreadIndicator,
     isListActive = false,
     isLiveStreaming = false,
     legacyImageViewerSwipeBehaviour,
@@ -283,8 +288,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     loadMoreThread,
     markRead,
     maximumMessageLimit,
-    Message,
-    MessageSystem,
     myMessageTheme,
     readEvents,
     NetworkDownIndicator,
@@ -299,7 +302,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     setMessages,
     setSelectedPicker,
     setTargetedMessage,
-    shouldShowUnreadUnderlay,
     StickyHeader,
     targetedMessage,
     thread,
@@ -349,8 +351,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
   );
 
   const {
-    dateSeparatorsRef,
-    messageGroupStylesRef,
+    messageListPreviousAndNextMessageStore,
     processedMessageList,
     rawMessageList,
     viewabilityChangedCallback,
@@ -378,11 +379,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     client.userID,
   );
 
-  const lastReceivedId = useMemo(
-    () => getLastReceivedMessageFlashList(processedMessageList)?.id,
-    [processedMessageList],
-  );
-
   const [autoscrollToRecent, setAutoscrollToRecent] = useState(true);
 
   useEffect(() => {
@@ -558,6 +554,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
    */
   useEffect(() => {
     const shouldMarkRead = () => {
+      const channelUnreadState = channelUnreadStateStore.channelUnreadState;
       return (
         !channelUnreadState?.first_unread_message_id &&
         !scrollToBottomButtonVisible &&
@@ -569,23 +566,22 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     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();
@@ -599,7 +595,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     };
   }, [
     channel,
-    channelUnreadState?.first_unread_message_id,
+    channelUnreadStateStore,
     client.user?.id,
     markRead,
     scrollToBottomButtonVisible,
@@ -640,12 +636,19 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
    * This function should show or hide the unread indicator depending on the
    */
   const updateStickyUnreadIndicator = useStableCallback((viewableItems: ViewToken[]) => {
-    if (!viewableItems.length || !readEvents) {
-      setIsUnreadNotificationOpen(false);
-      return;
-    }
+    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).
+    const lastReadMessageId = channelUnreadState?.last_read_message_id;
+    const lastReadMessageVisible = viewableItems.some((item) => item.item.id === lastReadMessageId);
 
-    if (selectedPicker === 'images') {
+    if (
+      !viewableItems.length ||
+      !readEvents ||
+      lastReadMessageVisible ||
+      selectedPicker === 'images'
+    ) {
       setIsUnreadNotificationOpen(false);
       return;
     }
@@ -657,7 +660,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     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 (
@@ -716,89 +719,20 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     [],
   );
 
-  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}
-          threadList={threadList}
-        />
-      );
-
-      return (
-        <View testID={`message-list-item-${index}`}>
-          {message.type === 'system' ? (
-            <MessageSystem message={message} />
-          ) : 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,
-      messageGroupStylesRef,
+      messageListPreviousAndNextMessageStore,
       modifiedTheme,
-      myMessageTheme,
+      noGroupByUser,
       onThreadSelect,
-      shouldShowUnreadUnderlay,
-      threadList,
     ],
   );
 
@@ -1129,34 +1063,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 ? (
@@ -1194,6 +1130,7 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
   const {
     channel,
     channelUnreadState,
+    channelUnreadStateStore,
     disabled,
     EmptyStateIndicator,
     enableMessageGroupingByUser,
@@ -1242,6 +1179,7 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
       {...{
         channel,
         channelUnreadState,
+        channelUnreadStateStore,
         client,
         closePicker,
         DateHeader,