cleanup and fixes around goToMessage

Author: vishalnarkhede

src/components/Channel/Channel.tsx

@@ -895,18 +895,18 @@ const ChannelWithContext = <
         },
       });
 
-      const ol_topMessage = messages[0];
-      const ol_topMessage_id = messages[0]?.id;
-      const ol_bottomMessage = messages[messages.length - 1];
+      const oldListTopMessage = messages[0];
+      const oldListTopMessageId = messages[0]?.id;
+      const oldListBottomMessage = messages[messages.length - 1];
 
-      const nl_topMessage = state.messages[0];
-      const nl_bottomMessage = state.messages[state.messages.length - 1];
+      const newListTopMessage = state.messages[0];
+      const newListBottomMessage = state.messages[state.messages.length - 1];
 
       if (
-        !ol_topMessage || // previous list was empty
-        !ol_bottomMessage || // previous list was empty
-        !nl_topMessage || // new list is truncated
-        !nl_bottomMessage // new list is truncated
+        !oldListTopMessage || // previous list was empty
+        !oldListBottomMessage || // previous list was empty
+        !newListTopMessage || // new list is truncated
+        !newListBottomMessage // new list is truncated
       ) {
         /** Channel was truncated */
         channel.state.clearMessages();
@@ -916,26 +916,26 @@ const ChannelWithContext = <
         return;
       }
 
-      const ol_topMessage_createdAt = ol_topMessage.created_at;
-      const ol_bottomMessage_createdAt = ol_bottomMessage.created_at;
-      const nl_topMessage_createdAt = nl_topMessage.created_at
-        ? new Date(nl_topMessage.created_at)
+      const oldListTopMessageCreatedAt = oldListTopMessage.created_at;
+      const oldListBottomMessageCreatedAt = oldListBottomMessage.created_at;
+      const newListTopMessageCreatedAt = newListTopMessage.created_at
+        ? new Date(newListTopMessage.created_at)
         : new Date();
-      const nl_bottomMessage_createdAt = nl_bottomMessage?.created_at
-        ? new Date(nl_bottomMessage.created_at)
+      const newListBottomMessageCreatedAt = newListBottomMessage?.created_at
+        ? new Date(newListBottomMessage.created_at)
         : new Date();
 
       let finalMessages = [];
 
       if (
-        ol_topMessage &&
-        ol_topMessage_createdAt &&
-        ol_bottomMessage_createdAt &&
-        nl_topMessage_createdAt < ol_topMessage_createdAt &&
-        nl_bottomMessage_createdAt >= ol_bottomMessage_createdAt
+        oldListTopMessage &&
+        oldListTopMessageCreatedAt &&
+        oldListBottomMessageCreatedAt &&
+        newListTopMessageCreatedAt < oldListTopMessageCreatedAt &&
+        newListBottomMessageCreatedAt >= oldListBottomMessageCreatedAt
       ) {
         const index = state.messages.findIndex(
-          (m) => m.id === ol_topMessage_id,
+          (m) => m.id === oldListTopMessageId,
         );
         finalMessages = state.messages.slice(index);
       } else {

src/components/Chat/hooks/useAppStateListener.ts

@@ -11,20 +11,24 @@ export const useAppStateListener = (
   useEffect(() => {
     listenerExists && AppState.addEventListener('change', handleAppStateChange);
 
-    return () => {
+    return () =>
       listenerExists &&
-        AppState.removeEventListener('change', handleAppStateChange);
-    };
+      AppState.removeEventListener('change', handleAppStateChange);
   }, []);
 
   const handleAppStateChange = (nextAppState: AppStateStatus) => {
-    if (appState.current === 'background' && nextAppState === 'active') {
-      onForeground?.();
+    if (
+      appState.current === 'background' &&
+      nextAppState === 'active' &&
+      onForeground
+    ) {
+      onForeground();
     } else if (
       appState.current.match(/active|inactive/) &&
-      nextAppState === 'background'
+      nextAppState === 'background' &&
+      onBackground
     ) {
-      onBackground?.();
+      onBackground();
     }
     appState.current = nextAppState;
   };

src/components/Message/Message.tsx

@@ -1103,6 +1103,7 @@ const MessageWithContext = <
     channel,
     disabled,
     files: attachments.files,
+    goToMessage,
     groupStyles,
     handleAction,
     handleDeleteMessage,
@@ -1277,6 +1278,7 @@ const areEqual = <
 ) => {
   const {
     channel: prevChannel,
+    goToMessage: prevGoToMessage,
     lastReceivedId: prevLastReceivedId,
     message: prevMessage,
     showUnreadUnderlay: prevShowUnreadUnderlay,
@@ -1285,6 +1287,7 @@ const areEqual = <
   } = prevProps;
   const {
     channel: nextChannel,
+    goToMessage: nextGoToMessage,
     lastReceivedId: nextLastReceivedId,
     message: nextMessage,
     showUnreadUnderlay: nextShowUnreadUnderlay,
@@ -1295,22 +1298,20 @@ const areEqual = <
   const repliesEqual = prevMessage.reply_count === nextMessage.reply_count;
   if (!repliesEqual) return false;
 
-  /**
-   * We need to allow re-render when lastReceivedId changes, for following cases
-   * 1. updating the status (seen status) on latest message in list
-   * 2. updating quoted messages. Because when you press the quoted message, it makes a call
-   *    to `goToMessage` function, which is dependent on message list (length specifically).
-   */
   const lastReceivedIdChangedAndMatters =
     prevLastReceivedId !== nextLastReceivedId &&
     (prevLastReceivedId === prevMessage.id ||
       prevLastReceivedId === nextMessage.id ||
       nextLastReceivedId === prevMessage.id ||
-      nextLastReceivedId === nextMessage.id ||
-      (prevMessage.quoted_message_id && nextMessage.quoted_message_id));
+      nextLastReceivedId === nextMessage.id);
 
   if (lastReceivedIdChangedAndMatters) return false;
 
+  const goToMessageChangedAndMatters =
+    nextMessage.quoted_message_id && prevGoToMessage !== nextGoToMessage;
+
+  if (goToMessageChangedAndMatters) return false;
+
   const messageEqual =
     prevMessage.deleted_at === nextMessage.deleted_at &&
     (isMessageWithStylesReadByAndDateSeparator(prevMessage) &&

src/components/Message/MessageSimple/MessageContent.tsx

@@ -81,11 +81,11 @@ export type MessageContentPropsWithContext<
   MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,
   | 'alignment'
   | 'disabled'
+  | 'goToMessage'
   | 'groupStyles'
   | 'hasReactions'
   | 'isMyMessage'
   | 'lastGroupMessage'
-  | 'lastReceivedId'
   | 'members'
   | 'message'
   | 'messageContentOrder'
@@ -411,10 +411,10 @@ const areEqual = <
   nextProps: MessageContentPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
   const {
+    goToMessage: prevGoToMessage,
     groupStyles: prevGroupStyles,
     hasReactions: prevHasReactions,
     lastGroupMessage: prevLastGroupMessage,
-    lastReceivedId: prevLastReceivedId,
     members: prevMembers,
     message: prevMessage,
     messageContentOrder: prevMessageContentOrder,
@@ -424,10 +424,10 @@ const areEqual = <
     tDateTimeParser: prevTDateTimeParser,
   } = prevProps;
   const {
+    goToMessage: nextGoToMessage,
     groupStyles: nextGroupStyles,
     hasReactions: nextHasReactions,
     lastGroupMessage: nextLastGroupMessage,
-    lastReceivedId: nextLastReceivedId,
     members: nextMembers,
     message: nextMessage,
     messageContentOrder: nextMessageContentOrder,
@@ -443,18 +443,10 @@ const areEqual = <
   const lastGroupMessageEqual = prevLastGroupMessage === nextLastGroupMessage;
   if (!lastGroupMessageEqual) return false;
 
-  /**
-   * We need to allow re-render when lastReceivedId changes, for following cases
-   * 1. updating the status (seen status) on latest message in list
-   * 2. updating quoted messages. Because when you press the quoted message, it makes a call
-   *    to `goToMessage` function, which is dependent on message list (length specifically).
-   */
-  const lastReceivedIdChangedAndMatters =
-    prevLastReceivedId !== nextLastReceivedId &&
-    prevMessage.quoted_message_id &&
-    nextMessage.quoted_message_id;
-
-  if (lastReceivedIdChangedAndMatters) return false;
+  const goToMessageChangedAndMatters =
+    prevGoToMessage !== nextGoToMessage && nextMessage.quoted_message_id;
+
+  if (goToMessageChangedAndMatters) return false;
 
   const onlyEmojisEqual = prevOnlyEmojis === nextOnlyEmojis;
   if (!onlyEmojisEqual) return false;

src/components/Message/hooks/useCreateMessageContext.ts

@@ -29,6 +29,7 @@ export const useCreateMessageContext = <
   channel,
   disabled,
   files,
+  goToMessage,
   groupStyles,
   handleAction,
   handleDeleteMessage,
@@ -92,6 +93,7 @@ export const useCreateMessageContext = <
       channel,
       disabled,
       files,
+      goToMessage,
       groupStyles,
       handleAction,
       handleDeleteMessage,

src/components/MessageList/MessageList.tsx

@@ -1,4 +1,10 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   FlatListProps,
   FlatList as FlatListType,
@@ -522,13 +528,13 @@ const MessageListWithContext = <
         setScrollToBottomButtonVisible(false);
         resetPaginationTrackers();
 
-        if (flatListRef.current) {
-          setTimeout(() => {
+        setTimeout(
+          () =>
             flatListRef.current?.scrollToOffset({
               offset: 0,
-            });
-          });
-        }
+            }),
+          50,
+        );
         setTimeout(() => {
           channelResyncScrollSet.current = true;
           if (channel.countUnread() > 0) {
@@ -606,9 +612,7 @@ const MessageListWithContext = <
                 : []
             }
             lastReceivedId={
-              lastReceivedId === message.id || message.quoted_message_id
-                ? lastReceivedId
-                : undefined
+              lastReceivedId === message.id ? lastReceivedId : undefined
             }
             message={message}
             onThreadSelect={onThreadSelect}
@@ -842,30 +846,34 @@ const MessageListWithContext = <
       markRead();
     }
   };
-  const goToMessage = (messageId: string) => {
-    const indexOfParentInMessageList = messageList.findIndex(
-      (message) => message?.id === messageId,
-    );
 
-    if (indexOfParentInMessageList > -1) {
-      try {
-        if (flatListRef.current) {
-          flatListRef.current.scrollToIndex({
-            index: indexOfParentInMessageList,
-            viewPosition: 0.5,
-          });
-          setTargetedMessage(messageId);
+  const goToMessage = useCallback(
+    (messageId: string) => {
+      const indexOfParentInMessageList = messageList.findIndex(
+        (message) => message?.id === messageId,
+      );
+
+      if (indexOfParentInMessageList > -1) {
+        try {
+          if (flatListRef.current) {
+            flatListRef.current.scrollToIndex({
+              index: indexOfParentInMessageList,
+              viewPosition: 0.5,
+            });
+            setTargetedMessage(messageId);
 
-          return;
+            return;
+          }
+        } catch (_) {
+          // do nothing;
         }
-      } catch (_) {
-        // do nothing;
       }
-    }
 
-    loadChannelAtMessage({ messageId });
-    resetPaginationTrackers();
-  };
+      loadChannelAtMessage({ messageId });
+      resetPaginationTrackers();
+    },
+    [messageListLengthAfterUpdate, lastReceivedId],
+  );
 
   const messagesWithImages = messageList.filter((message) => {
     if (!message.deleted_at && message.attachments) {

src/contexts/messageContext/MessageContext.tsx

@@ -111,6 +111,7 @@ export type MessageContextValue<
   showMessageStatus: boolean;
   /** Whether or not the Message is part of a Thread */
   threadList: boolean;
+  goToMessage?: (messageId: string) => void;
   /** Latest message id on current channel */
   lastReceivedId?: string;
   /** Prevent message being pressed for image viewer view */