fix: jump to first unread message based on last_read timestamp

Author: MartinCupela

Diff for: src/components/Channel/Channel.tsx

@@ -70,7 +70,7 @@ import {
 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';
@@ -770,54 +770,113 @@ 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 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 firstMessageWithCreationDate = messages.find((msg) => msg.created_at);
+          if (!(messages.length && firstMessageWithCreationDate)) {
+            addNotification(t('Failed to jump to the first unread message'), 'error');
+            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);
+          }
+        }
       }
 
-      let indexOfLastReadMessage;
-
-      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;
-        }
+      if (!firstUnreadMessageId && !lastReadMessageId) {
+        addNotification(t('Failed to jump to the first unread message'), 'error');
+        return;
       }
 
-      if (typeof indexOfLastReadMessage === 'undefined') {
+      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',
       });