abc and some cleanup

Author: vishalnarkhede

src/components/Chat/hooks/useIsOnline.ts

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 
+import { useAppStateListener } from './useAppStateListener';
 import { NetInfo } from '../../../native';
 
 import type { NetInfoSubscription } from '@react-native-community/netinfo';
@@ -15,7 +16,6 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
-import { useAppStateListener } from './useAppStateListener';
 
 /**
  * Disconnect the websocket connection when app goes to background,

src/components/Message/Message.tsx

@@ -1295,6 +1295,12 @@ 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 ||

src/components/Message/MessageSimple/MessageContent.tsx

@@ -437,19 +437,25 @@ const areEqual = <
     tDateTimeParser: nextTDateTimeParser,
   } = nextProps;
 
+  const hasReactionsEqual = prevHasReactions === nextHasReactions;
+  if (!hasReactionsEqual) return false;
+
+  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 hasReactionsEqual = prevHasReactions === nextHasReactions;
-  if (!hasReactionsEqual) return false;
-
-  const lastGroupMessageEqual = prevLastGroupMessage === nextLastGroupMessage;
-  if (!lastGroupMessageEqual) return false;
-
   const onlyEmojisEqual = prevOnlyEmojis === nextOnlyEmojis;
   if (!onlyEmojisEqual) return false;
 

src/components/MessageList/MessageList.tsx

@@ -371,6 +371,7 @@ const MessageListWithContext = <
   const flatListRef = useRef<FlatListType<
     MessageType<At, Ch, Co, Ev, Me, Re, Us>
   > | null>(null);
+
   const initialScrollSet = useRef<boolean>(false);
   const channelResyncScrollSet = useRef<boolean>(true);
 
@@ -655,23 +656,23 @@ const MessageListWithContext = <
     );
   };
 
-  //
-  // We are keeping full control on message pagination, and not relying on react-native for it.
-  // The reasons being,
-  // 1. FlatList doesn't support onStartReached prop
-  // 2. `onEndReached` function prop available on react-native, gets executed
-  //    once per content length (and thats actually a nice optimization strategy).
-  //    But it also means, we always need to prioritize onEndReached above our
-  //    logic for `onStartReached`.
-  // 3. `onEndReachedThreshold` prop decides - at which scroll position to call `onEndReached`.
-  //    Its a factor of content length (which is necessary for "real" infinite scroll). But on
-  //    the other hand, it also makes calls to `onEndReached` (and this `channel.query`) way
-  //    too early during scroll, which we don't really need. So we are going to instead
-  //    keep some fixed offset distance, to decide when to call `loadMore` or `loadMoreRecent`.
-  //
-  // We are still gonna keep the optimization, which react-native does - only call onEndReached
-  // once per content length.
-  //
+  /**
+   * We are keeping full control on message pagination, and not relying on react-native for it.
+   * The reasons being,
+   * 1. FlatList doesn't support onStartReached prop
+   * 2. `onEndReached` function prop available on react-native, gets executed
+   *    once per content length (and thats actually a nice optimization strategy).
+   *    But it also means, we always need to prioritize onEndReached above our
+   *    logic for `onStartReached`.
+   * 3. `onEndReachedThreshold` prop decides - at which scroll position to call `onEndReached`.
+   *    Its a factor of content length (which is necessary for "real" infinite scroll). But on
+   *    the other hand, it also makes calls to `onEndReached` (and this `channel.query`) way
+   *    too early during scroll, which we don't really need. So we are going to instead
+   *    keep some fixed offset distance, to decide when to call `loadMore` or `loadMoreRecent`.
+   *
+   * We are still gonna keep the optimization, which react-native does - only call onEndReached
+   * once per content length.
+   */
 
   /**
    * 1. Makes a call to `loadMoreRecent` function, which queries more recent messages.

src/components/MessageList/NetworkDownIndicator.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
+
 import { useChannelContext } from '../../contexts/channelContext/ChannelContext';
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
 
@@ -22,15 +23,15 @@ const styles = StyleSheet.create({
 });
 
 export const NetworkDownIndicator = () => {
+  const { error } = useChannelContext();
+  const { isOnline } = useChatContext();
   const {
     theme: {
       colors: { grey },
       messageList: { errorNotification, errorNotificationText },
     },
   } = useTheme();
   const { t } = useTranslationContext();
-  const { isOnline } = useChatContext();
-  const { error } = useChannelContext();
 
   if (isOnline && !error) {
     return null;