fix: jump to first unread message when the last read and first unread message id is unknown (#2315)

Author: MartinCupela

src/components/Channel/Channel.tsx

@@ -66,14 +66,15 @@ import { TypingProvider } from '../../context/TypingContext';
 
 import {
   DEFAULT_INITIAL_CHANNEL_PAGE_SIZE,
+  DEFAULT_JUMP_TO_PAGE_SIZE,
   DEFAULT_NEXT_CHANNEL_PAGE_SIZE,
   DEFAULT_THREAD_PAGE_SIZE,
 } from '../../constants/limits';
 
 import type { UnreadMessagesNotificationProps } from '../MessageList';
 import { hasMoreMessagesProbably, UnreadMessagesSeparator } from '../MessageList';
 import { useChannelContainerClasses } from './hooks/useChannelContainerClasses';
-import { makeAddNotifications } from './utils';
+import { findInMsgSetByDate, findInMsgSetById, makeAddNotifications } from './utils';
 import { getChannel } from '../../utils';
 
 import type { MessageProps } from '../Message/types';
@@ -554,6 +555,10 @@ const ChannelInner = <
         };
       });
 
+    if (event.type === 'channel.truncated' && event.cid === channel.cid) {
+      _setChannelUnreadUiState(undefined);
+    }
+
     throttledCopyStateFromChannel();
   };
 
@@ -709,7 +714,7 @@ const ChannelInner = <
     return queryResponse.messages.length;
   };
 
-  const loadMoreNewer = async (limit = 100) => {
+  const loadMoreNewer = async (limit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE) => {
     if (!online.current || !window.navigator.onLine || !state.hasMoreNewer) return 0;
 
     const newestMessage = state?.messages?.[state?.messages?.length - 1];
@@ -744,7 +749,7 @@ const ChannelInner = <
 
   const clearHighlightedMessageTimeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const jumpToMessage = async (messageId: string, messageLimit = 100) => {
+  const jumpToMessage = async (messageId: string, messageLimit = DEFAULT_JUMP_TO_PAGE_SIZE) => {
     dispatch({ loadingMore: true, type: 'setLoadingMore' });
     await channel.state.loadMessageIntoState(messageId, undefined, messageLimit);
 
@@ -783,56 +788,118 @@ const ChannelInner = <
   };
 
   const jumpToFirstUnreadMessage = useCallback(
-    async (queryMessageLimit = 100) => {
-      if (!(client.user && channelUnreadUiState?.unread_messages)) return;
-      if (!channelUnreadUiState?.last_read_message_id) {
-        addNotification(t('Failed to jump to the first unread message'), 'error');
-        return;
-      }
-
-      let indexOfLastReadMessage;
+    async (queryMessageLimit = DEFAULT_JUMP_TO_PAGE_SIZE) => {
+      if (!channelUnreadUiState?.unread_messages) return;
+      let lastReadMessageId = channelUnreadUiState?.last_read_message_id;
+      let firstUnreadMessageId = channelUnreadUiState?.first_unread_message_id;
+      let isInCurrentMessageSet = false;
+      let hasMoreMessages = true;
+
+      if (firstUnreadMessageId) {
+        const result = findInMsgSetById(firstUnreadMessageId, channel.state.messages);
+        isInCurrentMessageSet = result.index !== -1;
+      } else if (lastReadMessageId) {
+        const result = findInMsgSetById(lastReadMessageId, channel.state.messages);
+        isInCurrentMessageSet = !!result.target;
+        firstUnreadMessageId =
+          result.index > -1 ? channel.state.messages[result.index + 1]?.id : undefined;
+      } else {
+        const lastReadTimestamp = channelUnreadUiState.last_read.getTime();
+        const { index: lastReadMessageIndex, target: lastReadMessage } = findInMsgSetByDate(
+          channelUnreadUiState.last_read,
+          channel.state.messages,
+          true,
+        );
+
+        if (lastReadMessage) {
+          firstUnreadMessageId = channel.state.messages[lastReadMessageIndex + 1]?.id;
+          isInCurrentMessageSet = !!firstUnreadMessageId;
+          lastReadMessageId = lastReadMessage.id;
+        } else {
+          dispatch({ loadingMore: true, type: 'setLoadingMore' });
+          let messages;
+          try {
+            messages = (
+              await channel.query(
+                {
+                  messages: {
+                    created_at_around: channelUnreadUiState.last_read.toISOString(),
+                    limit: queryMessageLimit,
+                  },
+                },
+                'new',
+              )
+            ).messages;
+          } catch (e) {
+            addNotification(t('Failed to jump to the first unread message'), 'error');
+            loadMoreFinished(hasMoreMessages, channel.state.messages);
+            return;
+          }
 
-      const currentMessageSet = channel.state.messages;
-      for (let i = currentMessageSet.length - 1; i >= 0; i--) {
-        const { id } = currentMessageSet[i];
-        if (id === channelUnreadUiState.last_read_message_id) {
-          indexOfLastReadMessage = i;
-          break;
+          const firstMessageWithCreationDate = messages.find((msg) => msg.created_at);
+          if (!firstMessageWithCreationDate) {
+            addNotification(t('Failed to jump to the first unread message'), 'error');
+            loadMoreFinished(hasMoreMessages, channel.state.messages);
+            return;
+          }
+          const firstMessageTimestamp = new Date(
+            firstMessageWithCreationDate.created_at as string,
+          ).getTime();
+          if (lastReadTimestamp < firstMessageTimestamp) {
+            // whole channel is unread
+            firstUnreadMessageId = firstMessageWithCreationDate.id;
+            hasMoreMessages = false;
+          } else {
+            const result = findInMsgSetByDate(channelUnreadUiState.last_read, messages);
+            lastReadMessageId = result.target?.id;
+            hasMoreMessages = result.index >= Math.floor(queryMessageLimit / 2);
+          }
+          loadMoreFinished(hasMoreMessages, channel.state.messages);
         }
       }
 
-      if (typeof indexOfLastReadMessage === 'undefined') {
+      if (!firstUnreadMessageId && !lastReadMessageId) {
+        addNotification(t('Failed to jump to the first unread message'), 'error');
+        return;
+      }
+
+      if (!isInCurrentMessageSet) {
         dispatch({ loadingMore: true, type: 'setLoadingMore' });
-        let hasMoreMessages = true;
         try {
-          await channel.state.loadMessageIntoState(
-            channelUnreadUiState.last_read_message_id,
-            undefined,
-            queryMessageLimit,
-          );
+          const targetId = (firstUnreadMessageId ?? lastReadMessageId) as string;
+          await channel.state.loadMessageIntoState(targetId, undefined, queryMessageLimit);
           /**
            * if the index of the last read message on the page is beyond the half of the page,
            * we have arrived to the oldest page of the channel
            */
-          indexOfLastReadMessage = channel.state.messages.findIndex(
-            (message) => message.id === channelUnreadUiState.last_read_message_id,
+          const indexOfTarget = channel.state.messages.findIndex(
+            (message) => message.id === targetId,
           ) as number;
-          hasMoreMessages = indexOfLastReadMessage >= Math.floor(queryMessageLimit / 2);
+          hasMoreMessages = indexOfTarget >= Math.floor(queryMessageLimit / 2);
+          loadMoreFinished(hasMoreMessages, channel.state.messages);
+          firstUnreadMessageId =
+            firstUnreadMessageId ?? channel.state.messages[indexOfTarget + 1]?.id;
         } catch (e) {
           addNotification(t('Failed to jump to the first unread message'), 'error');
           loadMoreFinished(hasMoreMessages, channel.state.messages);
           return;
         }
-
-        loadMoreFinished(hasMoreMessages, channel.state.messages);
       }
 
-      const firstUnreadMessage = channel.state.messages[indexOfLastReadMessage + 1];
-      const jumpToMessageId = firstUnreadMessage?.id ?? channelUnreadUiState.last_read_message_id;
+      if (!firstUnreadMessageId) {
+        addNotification(t('Failed to jump to the first unread message'), 'error');
+        return;
+      }
+      if (!channelUnreadUiState.first_unread_message_id)
+        _setChannelUnreadUiState({
+          ...channelUnreadUiState,
+          first_unread_message_id: firstUnreadMessageId,
+          last_read_message_id: lastReadMessageId,
+        });
 
       dispatch({
         hasMoreNewer: channel.state.messages !== channel.state.latestMessages,
-        highlightedMessageId: jumpToMessageId,
+        highlightedMessageId: firstUnreadMessageId,
         type: 'jumpToMessageFinished',
       });
 
@@ -845,7 +912,7 @@ const ChannelInner = <
         dispatch({ type: 'clearHighlightedMessage' });
       }, 500);
     },
-    [addNotification, channel, client, loadMoreFinished, t, channelUnreadUiState],
+    [addNotification, channel, loadMoreFinished, t, channelUnreadUiState],
   );
 
   const deleteMessage = useCallback(