fix: rely on processedMessageList for calculations

Author: khushal87

package/src/components/MessageList/hooks/useMessageList.ts

@@ -74,26 +74,32 @@ export const useMessageList = (params: UseMessageListParams) => {
     () => new MessagePreviousAndNextMessageStore(),
   );
 
-  const filteredMessageList = useMemo(() => {
-    const filteredMessages = [];
+  const processedMessageList = useMemo<LocalMessage[]>(() => {
+    const newMessageList = [];
     for (const message of messageList) {
       if (
-        shouldIncludeMessageInList(message, {
+        !shouldIncludeMessageInList(message, {
           deletedMessagesVisibilityType,
           userId: client.userID,
         })
       ) {
-        filteredMessages.push(message);
+        continue;
+      }
+      if (isFlashList) {
+        newMessageList.push(message);
+      } else {
+        newMessageList.unshift(message);
       }
     }
-    return filteredMessages;
-  }, [messageList, deletedMessagesVisibilityType, client.userID]);
+    return newMessageList;
+  }, [messageList, deletedMessagesVisibilityType, client.userID, isFlashList]);
 
   useEffect(() => {
     messageListPreviousAndNextMessageStore.setMessageListPreviousAndNextMessage(
-      filteredMessageList,
+      processedMessageList,
+      isFlashList,
     );
-  }, [filteredMessageList, messageListPreviousAndNextMessageStore]);
+  }, [processedMessageList, messageListPreviousAndNextMessageStore, isFlashList]);
 
   /**
    * @deprecated use `useDateSeparator` hook instead directly in the Message.
@@ -102,9 +108,9 @@ export const useMessageList = (params: UseMessageListParams) => {
     () =>
       getDateSeparators({
         hideDateSeparators,
-        messages: filteredMessageList,
+        messages: processedMessageList,
       }),
-    [hideDateSeparators, filteredMessageList],
+    [hideDateSeparators, processedMessageList],
   );
 
   /**
@@ -122,15 +128,15 @@ export const useMessageList = (params: UseMessageListParams) => {
         dateSeparators: dateSeparatorsRef.current,
         hideDateSeparators,
         maxTimeBetweenGroupedMessages,
-        messages: filteredMessageList,
+        messages: processedMessageList,
         noGroupByUser,
         userId: client.userID,
       }),
     [
       getMessagesGroupStyles,
       hideDateSeparators,
       maxTimeBetweenGroupedMessages,
-      filteredMessageList,
+      processedMessageList,
       noGroupByUser,
       client.userID,
     ],
@@ -142,18 +148,6 @@ export const useMessageList = (params: UseMessageListParams) => {
   const messageGroupStylesRef = useRef<MessageGroupStyles>(messageGroupStyles);
   messageGroupStylesRef.current = messageGroupStyles;
 
-  const processedMessageList = useMemo<LocalMessage[]>(() => {
-    const newMessageList = [];
-    for (const message of filteredMessageList) {
-      if (isFlashList) {
-        newMessageList.push(message);
-      } else {
-        newMessageList.unshift(message);
-      }
-    }
-    return newMessageList;
-  }, [filteredMessageList, isFlashList]);
-
   const data = useRAFCoalescedValue(processedMessageList, isLiveStreaming);
 
   return useMemo(

package/src/state-store/message-list-prev-next-state.ts

@@ -21,15 +21,15 @@ export class MessagePreviousAndNextMessageStore {
     this.state = new StateStore<MessagePreviousAndNextMessageStoreType>(INITIAL_STATE);
   }
 
-  public setMessageListPreviousAndNextMessage(messages: LocalMessage[]) {
+  public setMessageListPreviousAndNextMessage(messages: LocalMessage[], isFlashList?: boolean) {
     const currentValue = this.state.getLatestValue();
     const prevMessageList: MessagePreviousAndNextMessageStoreType['messageList'] =
       currentValue.messageList;
     const newMessageList: MessagePreviousAndNextMessageStoreType['messageList'] = {};
     for (let i = 0; i < messages.length; i++) {
       const message = messages[i];
-      const previousMessage = messages[i - 1];
-      const nextMessage = messages[i + 1];
+      const previousMessage = isFlashList ? messages[i - 1] : messages[i + 1];
+      const nextMessage = isFlashList ? messages[i + 1] : messages[i - 1];
 
       const existing = prevMessageList[message.id];