stream-chat-react-native-core 6.0.2 → 6.1.0-beta.1

package/src/components/Channel/Channel.tsx

@@ -12,7 +12,6 @@ import {
   Channel as ChannelType,
   EventHandler,
   FormatMessageResponse,
-  logChatPromiseExecution,
   MessageResponse,
   Reaction,
   SendMessageAPIResponse,
@@ -92,7 +91,7 @@ import {
   isImagePickerAvailable,
 } from '../../native';
 import * as dbApi from '../../store/apis';
-import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
+import { ChannelUnreadState, DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 import { addReactionToLocalState } from '../../utils/addReactionToLocalState';
 import { compressedImageURI } from '../../utils/compressImage';
 import { DBSyncManager } from '../../utils/DBSyncManager';
@@ -179,6 +178,7 @@ import { ScrollToBottomButton as ScrollToBottomButtonDefault } from '../MessageL
 import { StickyHeader as StickyHeaderDefault } from '../MessageList/StickyHeader';
 import { TypingIndicator as TypingIndicatorDefault } from '../MessageList/TypingIndicator';
 import { TypingIndicatorContainer as TypingIndicatorContainerDefault } from '../MessageList/TypingIndicatorContainer';
+import { UnreadMessagesNotification as UnreadMessagesNotificationDefault } from '../MessageList/UnreadMessagesNotification';
 import { MessageActionList as MessageActionListDefault } from '../MessageMenu/MessageActionList';
 import { MessageActionListItem as MessageActionListItemDefault } from '../MessageMenu/MessageActionListItem';
 import { MessageMenu as MessageMenuDefault } from '../MessageMenu/MessageMenu';
@@ -188,6 +188,15 @@ import { MessageUserReactionsAvatar as MessageUserReactionsAvatarDefault } from
 import { MessageUserReactionsItem as MessageUserReactionsItemDefault } from '../MessageMenu/MessageUserReactionsItem';
 import { Reply as ReplyDefault } from '../Reply/Reply';
 
+export type MarkReadFunctionOptions = {
+  /**
+   * Signal, whether the `channelUnreadUiState` should be updated.
+   * By default, the local state update is prevented when the Channel component is mounted.
+   * This is in order to keep the UI indicating the original unread state, when the user opens a channel.
+   */
+  updateChannelUnreadState?: boolean;
+};
+
 const styles = StyleSheet.create({
   selectChannel: { fontWeight: 'bold', padding: 16 },
 });
@@ -301,6 +310,7 @@ export type ChannelPropsWithContext<
       | 'handleDelete'
       | 'handleEdit'
       | 'handleFlag'
+      | 'handleMarkUnread'
       | 'handleMute'
       | 'handlePinMessage'
       | 'handleReaction'
@@ -360,6 +370,7 @@ export type ChannelPropsWithContext<
       | 'VideoThumbnail'
       | 'PollContent'
       | 'hasCreatePoll'
+      | 'UnreadMessagesNotification'
       | 'StreamingMessageView'
     >
   > &
@@ -384,7 +395,10 @@ export type ChannelPropsWithContext<
      * Overrides the Stream default mark channel read request (Advanced usage only)
      * @param channel Channel object
      */
-    doMarkReadRequest?: (channel: ChannelType<StreamChatGenerics>) => void;
+    doMarkReadRequest?: (
+      channel: ChannelType<StreamChatGenerics>,
+      setChannelUnreadUiState?: (state: ChannelUnreadState) => void,
+    ) => void;
     /**
      * Overrides the Stream default send message request (Advanced usage only)
      * @param channelId
@@ -433,6 +447,10 @@ export type ChannelPropsWithContext<
      * Custom loading error indicator to override the Stream default
      */
     LoadingErrorIndicator?: React.ComponentType<LoadingErrorProps>;
+    /**
+     * Boolean flag to enable/disable marking the channel as read on mount
+     */
+    markReadOnMount?: boolean;
     maxMessageLength?: number;
     /**
      * Load the channel at a specified message instead of the most recent message.
@@ -529,6 +547,7 @@ const ChannelWithContext = <
     handleDelete,
     handleEdit,
     handleFlag,
+    handleMarkUnread,
     handleMute,
     handlePinMessage,
     handleQuotedReply,
@@ -566,6 +585,7 @@ const ChannelWithContext = <
     loadingMore: loadingMoreProp,
     loadingMoreRecent: loadingMoreRecentProp,
     markdownRules,
+    markReadOnMount = true,
     maxMessageLength: maxMessageLengthProp,
     maxNumberOfFiles = 10,
     maxTimeBetweenGroupedMessages,
@@ -647,6 +667,7 @@ const ChannelWithContext = <
     threadMessages,
     TypingIndicator = TypingIndicatorDefault,
     TypingIndicatorContainer = TypingIndicatorContainerDefault,
+    UnreadMessagesNotification = UnreadMessagesNotificationDefault,
     UploadProgressIndicator = UploadProgressIndicatorDefault,
     UrlPreview = CardDefault,
     VideoThumbnail = VideoThumbnailDefault,
@@ -674,10 +695,13 @@ const ChannelWithContext = <
   const [thread, setThread] = useState<MessageType<StreamChatGenerics> | null>(threadProps || null);
   const [threadHasMore, setThreadHasMore] = useState(true);
   const [threadLoadingMore, setThreadLoadingMore] = useState(false);
+  const [channelUnreadState, setChannelUnreadState] = useState<ChannelUnreadState | undefined>(
+    undefined,
+  );
 
   const syncingChannelRef = useRef(false);
 
-  const { setTargetedMessage, targetedMessage } = useTargetedMessage();
+  const { highlightedMessageId, setTargetedMessage, targetedMessage } = useTargetedMessage();
 
   /**
    * This ref will hold the abort controllers for
@@ -692,6 +716,7 @@ const ChannelWithContext = <
   const {
     copyStateFromChannel,
     initStateFromChannel,
+    setRead,
     setTyping,
     state: channelState,
   } = useChannelDataState<StreamChatGenerics>(channel);
@@ -754,6 +779,22 @@ const ChannelWithContext = <
         }
       }
 
+      if (event.type === 'notification.mark_unread') {
+        setChannelUnreadState((prev) => {
+          if (!(event.last_read_at && event.user)) return prev;
+          return {
+            first_unread_message_id: event.first_unread_message_id,
+            last_read: new Date(event.last_read_at),
+            last_read_message_id: event.last_read_message_id,
+            unread_messages: event.unread_messages ?? 0,
+          };
+        });
+      }
+
+      if (event.type === 'channel.truncated' && event.cid === channel.cid) {
+        setChannelUnreadState(undefined);
+      }
+
       // only update channel state if the events are not the previously subscribed useEffect's subscription events
       if (channel && channel.initialized) {
         copyChannelState();
@@ -764,6 +805,8 @@ const ChannelWithContext = <
   useEffect(() => {
     let listener: ReturnType<typeof channel.on>;
     const initChannel = async () => {
+      setLastRead(new Date());
+      const unreadCount = channel.countUnread();
       if (!channel || !shouldSyncChannel || channel.offlineMode) return;
       let errored = false;
 
@@ -782,14 +825,32 @@ const ChannelWithContext = <
         loadInitialMessagesStateFromChannel(channel, channel.state.messagePagination.hasPrev);
       }
 
+      if (client.user?.id && channel.state.read[client.user.id]) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { user, ...ownReadState } = channel.state.read[client.user.id];
+        setChannelUnreadState(ownReadState);
+      }
+
       if (messageId) {
         await loadChannelAroundMessage({ messageId, setTargetedMessage });
       } else if (
         initialScrollToFirstUnreadMessage &&
-        channel.countUnread() > scrollToFirstUnreadThreshold
+        client.user &&
+        unreadCount > scrollToFirstUnreadThreshold
       ) {
-        await loadChannelAtFirstUnreadMessage({ setTargetedMessage });
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { user, ...ownReadState } = channel.state.read[client.user.id];
+        await loadChannelAtFirstUnreadMessage({
+          channelUnreadState: ownReadState,
+          setChannelUnreadState,
+          setTargetedMessage,
+        });
+      }
+
+      if (unreadCount > 0 && markReadOnMount) {
+        await markRead({ updateChannelUnreadState: false });
       }
+
       listener = channel.on(handleEvent);
     };
 
@@ -819,12 +880,12 @@ const ChannelWithContext = <
    */
   useEffect(() => {
     const handleEvent: EventHandler<StreamChatGenerics> = (event) => {
-      if (channel.cid === event.cid) copyChannelState();
+      if (channel.cid === event.cid) setRead(channel);
     };
 
     const { unsubscribe } = client.on('notification.mark_read', handleEvent);
     return unsubscribe;
-  }, [channel.cid, client, copyChannelState]);
+  }, [channel, client, setRead]);
 
   const threadPropsExists = !!threadProps;
 
@@ -858,23 +919,33 @@ const ChannelWithContext = <
   /**
    * CHANNEL METHODS
    */
-  const markRead: ChannelContextValue<StreamChatGenerics>['markRead'] = useRef(
-    throttle(
-      () => {
-        if (!channel || channel?.disconnected || !clientChannelConfig?.read_events) {
-          return;
-        }
+  const markRead: ChannelContextValue<StreamChatGenerics>['markRead'] = throttle(
+    async (options?: MarkReadFunctionOptions) => {
+      const { updateChannelUnreadState = true } = options ?? {};
+      if (!channel || channel?.disconnected || !clientChannelConfig?.read_events) {
+        return;
+      }
 
-        if (doMarkReadRequest) {
-          doMarkReadRequest(channel);
-        } else {
-          logChatPromiseExecution(channel.markRead(), 'mark read');
+      if (doMarkReadRequest) {
+        doMarkReadRequest(channel, updateChannelUnreadState ? setChannelUnreadState : undefined);
+      } else {
+        try {
+          const response = await channel.markRead();
+          if (updateChannelUnreadState && response && lastRead) {
+            setChannelUnreadState({
+              last_read: lastRead,
+              last_read_message_id: response?.event.last_read_message_id,
+              unread_messages: 0,
+            });
+          }
+        } catch (err) {
+          console.log('Error marking channel as read:', err);
         }
-      },
-      defaultThrottleInterval,
-      throttleOptions,
-    ),
-  ).current;
+      }
+    },
+    defaultThrottleInterval,
+    throttleOptions,
+  );
 
   const reloadThread = async () => {
     if (!channel || !thread?.id) return;
@@ -1596,8 +1667,9 @@ const ChannelWithContext = <
     overrideCapabilities: overrideOwnCapabilities,
   });
 
-  const channelContext = useCreateChannelContext({
+  const channelContext = useCreateChannelContext<StreamChatGenerics>({
     channel,
+    channelUnreadState,
     disabled: !!channel?.data?.frozen,
     EmptyStateIndicator,
     enableMessageGroupingByUser,
@@ -1608,9 +1680,11 @@ const ChannelWithContext = <
       !!(clientChannelConfig?.commands || [])?.some((command) => command.name === 'giphy'),
     hideDateSeparators,
     hideStickyDateHeader,
+    highlightedMessageId,
     isChannelActive: shouldSyncChannel,
     lastRead,
     loadChannelAroundMessage,
+    loadChannelAtFirstUnreadMessage,
     loading: channelMessagesState.loading,
     LoadingIndicator,
     markRead,
@@ -1620,6 +1694,7 @@ const ChannelWithContext = <
     read: channelState.read ?? {},
     reloadChannel,
     scrollToFirstUnreadThreshold,
+    setChannelUnreadState,
     setLastRead,
     setTargetedMessage,
     StickyHeader,
@@ -1748,6 +1823,7 @@ const ChannelWithContext = <
     handleDelete,
     handleEdit,
     handleFlag,
+    handleMarkUnread,
     handleMute,
     handlePinMessage,
     handleQuotedReply,
@@ -1815,6 +1891,7 @@ const ChannelWithContext = <
     targetedMessage,
     TypingIndicator,
     TypingIndicatorContainer,
+    UnreadMessagesNotification,
     updateMessage,
     UrlPreview,
     VideoThumbnail,

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

@@ -29,6 +29,7 @@ import {
   useChannelDataState,
   useChannelMessageDataState,
 } from '../hooks/useChannelDataState';
+import * as MessageListPaginationHooks from '../hooks/useMessageListPagination';
 
 // This component is used for performing effects in a component that consumes ChannelContext,
 // i.e. making use of the callbacks & values provided by the Channel component.
@@ -87,6 +88,7 @@ describe('Channel', () => {
     const nullChannel = {
       ...channel,
       cid: null,
+      countUnread: () => 0,
       off: () => {},
       on: () => ({
         unsubscribe: () => null,
@@ -464,79 +466,128 @@ describe('Channel initial load useEffect', () => {
     );
   });
 
-  it("should not call loadChannelAtFirstUnreadMessage if channel's unread count is 0", async () => {
-    const mockedChannel = generateChannelResponse({
-      messages: Array.from({ length: 10 }, (_, i) => generateMessage({ text: `message-${i}` })),
+  describe('initialScrollToFirstUnreadMessage', () => {
+    afterEach(() => {
+      // Clear all mocks after each test
+      jest.clearAllMocks();
+      // Restore all mocks to their original implementation
+      jest.restoreAllMocks();
+      cleanup();
     });
+    const mockedHook = (values) =>
+      jest.spyOn(MessageListPaginationHooks, 'useMessageListPagination').mockImplementation(() => ({
+        copyMessagesStateFromChannel: jest.fn(),
+        loadChannelAroundMessage: jest.fn(),
+        loadChannelAtFirstUnreadMessage: jest.fn(),
+        loadInitialMessagesStateFromChannel: jest.fn(),
+        loadLatestMessages: jest.fn(),
+        loadMore: jest.fn(),
+        loadMoreRecent: jest.fn(),
+        state: { ...channelInitialState },
+        ...values,
+      }));
+    it("should not call loadChannelAtFirstUnreadMessage if channel's unread count is 0", async () => {
+      const mockedChannel = generateChannelResponse({
+        messages: Array.from({ length: 10 }, (_, i) => generateMessage({ text: `message-${i}` })),
+      });
 
-    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
-    await channel.watch();
-    const messages = Array.from({ length: 100 }, (_, i) => generateMessage({ id: i }));
+      useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+      const channel = chatClient.channel('messaging', mockedChannel.id);
+      await channel.watch();
+      const user = generateUser();
+      const read_data = {};
 
-    const loadMessageIntoState = jest.fn();
-    channel.state = {
-      ...channelInitialState,
-      loadMessageIntoState,
-      messagePagination: {
-        hasNext: true,
-        hasPrev: true,
-      },
-      messages,
-    };
-    channel.countUnread = jest.fn(() => 0);
+      read_data[chatClient.user.id] = {
+        last_read: new Date(),
+        user,
+      };
 
-    renderComponent({ channel, initialScrollToFirstUnreadMessage: true });
+      channel.state = {
+        ...channelInitialState,
+        read: read_data,
+      };
+      channel.countUnread = jest.fn(() => 0);
 
-    await waitFor(() => {
-      expect(loadMessageIntoState).not.toHaveBeenCalled();
-    });
-  });
+      const loadChannelAtFirstUnreadMessageFn = jest.fn();
 
-  it("should call loadChannelAtFirstUnreadMessage if channel's unread count is greater than 0", async () => {
-    const mockedChannel = generateChannelResponse({
-      messages: Array.from({ length: 10 }, (_, i) => generateMessage({ text: `message-${i}` })),
-    });
+      mockedHook({ loadChannelAtFirstUnreadMessage: loadChannelAtFirstUnreadMessageFn });
 
-    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
-    await channel.watch();
-    const messages = Array.from({ length: 100 }, (_, i) => generateMessage({ id: i }));
+      renderComponent({ channel, initialScrollToFirstUnreadMessage: true });
 
-    let targetedMessageId = 0;
-    const loadMessageIntoState = jest.fn((id) => {
-      targetedMessageId = id;
-      const newMessages = getElementsAround(messages, 'id', id);
-      channel.state.messages = newMessages;
+      await waitFor(() => {
+        expect(loadChannelAtFirstUnreadMessageFn).not.toHaveBeenCalled();
+      });
     });
 
-    channel.state = {
-      ...channelInitialState,
-      loadMessageIntoState,
-      messagePagination: {
-        hasNext: true,
-        hasPrev: true,
-      },
-      messages,
-      messageSets: [{ isCurrent: true, isLatest: true }],
-    };
+    it("should call loadChannelAtFirstUnreadMessage if channel's unread count is greater than 0", async () => {
+      const mockedChannel = generateChannelResponse({
+        messages: Array.from({ length: 10 }, (_, i) => generateMessage({ text: `message-${i}` })),
+      });
 
-    channel.countUnread = jest.fn(() => 15);
+      useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+      const channel = chatClient.channel('messaging', mockedChannel.id);
+      await channel.watch();
 
-    renderComponent({ channel, initialScrollToFirstUnreadMessage: true });
+      const user = generateUser();
+      const numberOfUnreadMessages = 15;
+      const read_data = {};
 
-    await waitFor(() => {
-      expect(loadMessageIntoState).toHaveBeenCalledTimes(1);
+      read_data[chatClient.user.id] = {
+        last_read: new Date(),
+        unread_messages: numberOfUnreadMessages,
+        user,
+      };
+      channel.state = {
+        ...channelInitialState,
+        read: read_data,
+      };
+
+      channel.countUnread = jest.fn(() => numberOfUnreadMessages);
+      const loadChannelAtFirstUnreadMessageFn = jest.fn();
+
+      mockedHook({ loadChannelAtFirstUnreadMessage: loadChannelAtFirstUnreadMessageFn });
+
+      renderComponent({ channel, initialScrollToFirstUnreadMessage: true });
+
+      await waitFor(() => {
+        expect(loadChannelAtFirstUnreadMessageFn).toHaveBeenCalled();
+      });
     });
 
-    const { result: channelMessageState } = renderHook(() => useChannelMessageDataState(channel));
-    await waitFor(() =>
-      expect(
-        channelMessageState.current.state.messages.find(
-          (message) => message.id === targetedMessageId,
-        ),
-      ).toBeDefined(),
-    );
+    it("should not call loadChannelAtFirstUnreadMessage if channel's unread count is greater than 0 lesser than scrollToFirstUnreadThreshold", async () => {
+      const mockedChannel = generateChannelResponse({
+        messages: Array.from({ length: 10 }, (_, i) => generateMessage({ text: `message-${i}` })),
+      });
+
+      useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+      const channel = chatClient.channel('messaging', mockedChannel.id);
+      await channel.watch();
+
+      const user = generateUser();
+      const numberOfUnreadMessages = 2;
+      const read_data = {};
+
+      read_data[chatClient.user.id] = {
+        last_read: new Date(),
+        unread_messages: numberOfUnreadMessages,
+        user,
+      };
+      channel.state = {
+        ...channelInitialState,
+        read: read_data,
+      };
+
+      channel.countUnread = jest.fn(() => numberOfUnreadMessages);
+      const loadChannelAtFirstUnreadMessageFn = jest.fn();
+
+      mockedHook({ loadChannelAtFirstUnreadMessage: loadChannelAtFirstUnreadMessageFn });
+
+      renderComponent({ channel, initialScrollToFirstUnreadMessage: true });
+
+      await waitFor(() => {
+        expect(loadChannelAtFirstUnreadMessageFn).not.toHaveBeenCalled();
+      });
+    });
   });
 
   it('should call resyncChannel when connection changed event is triggered', async () => {

package/src/components/Channel/__tests__/ownCapabilities.test.js

@@ -236,6 +236,32 @@ describe('Own capabilities', () => {
     });
   });
 
+  describe(`${allOwnCapabilities.readEvents} capability`, () => {
+    it(`should render "Mark as Unread" action for messages when "${allOwnCapabilities.readEvents}" capability is enabled`, async () => {
+      await generateChannelWithCapabilities([allOwnCapabilities.readEvents]);
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByLabelText('markUnread action list item')).toBeTruthy();
+    });
+
+    it(`should not render "Mark Read" action for received message when "${allOwnCapabilities.readEvents}" capability is disabled`, async () => {
+      await generateChannelWithCapabilities();
+
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByLabelText('markUnread action list item')).toBeFalsy();
+    });
+
+    it('should override capability from "overrideOwnCapability.readEvents" prop', async () => {
+      await generateChannelWithCapabilities([allOwnCapabilities.readEvents]);
+
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage, {
+        overrideOwnCapabilities: {
+          readEvents: false,
+        },
+      });
+      expect(!!queryByLabelText('markUnread action list item')).toBeFalsy();
+    });
+  });
+
   describe(`${allOwnCapabilities.pinMessage} capability`, () => {
     it(`should render "Pin Message" action for sent message when "${allOwnCapabilities.pinMessage}" capability is enabled`, async () => {
       await generateChannelWithCapabilities([allOwnCapabilities.pinMessage]);