fix: ignore message list rerenders due to state change

Author: khushal87

package/src/components/MessageList/MessageFlashList.tsx

@@ -53,7 +53,6 @@ import { mergeThemes, useTheme } from '../../contexts/themeContext/ThemeContext'
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
 import { useStableCallback, useStateStore } from '../../hooks';
-import { ChannelUnreadStateStoreType } from '../../state-store/channel-unread-state';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
 import { MessageWrapper } from '../Message/MessageSimple/MessageWrapper';
@@ -105,10 +104,6 @@ const messageInputHeightStoreSelector = (state: MessageInputHeightState) => ({
   height: state.height,
 });
 
-const channelUnreadStateStoreSelector = (state: ChannelUnreadStateStoreType) => ({
-  unread_messages: state.channelUnreadState?.unread_messages,
-});
-
 type MessageFlashListPropsWithContext = Pick<
   AttachmentPickerContextValue,
   'closePicker' | 'attachmentPickerStore'
@@ -322,11 +317,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     messageInputHeightStoreSelector,
   );
 
-  const { unread_messages } = useStateStore(
-    channelUnreadStateStore.state,
-    channelUnreadStateStoreSelector,
-  );
-
   const [hasMoved, setHasMoved] = useState(false);
   const [scrollToBottomButtonVisible, setScrollToBottomButtonVisible] = useState(false);
   const [isUnreadNotificationOpen, setIsUnreadNotificationOpen] = useState<boolean>(false);
@@ -1104,15 +1094,15 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
         <ScrollToBottomButton
           onPress={goToNewMessages}
           showNotification={scrollToBottomButtonVisible}
-          unreadCount={threadList ? 0 : unread_messages}
+          unreadCount={threadList ? 0 : channel?.countUnread()}
         />
       </Animated.View>
       <NetworkDownIndicator />
       {isUnreadNotificationOpen && !threadList ? (
         <View style={styles.unreadMessagesNotificationContainer}>
           <UnreadMessagesNotification
             onCloseHandler={onUnreadNotificationClose}
-            unreadCount={unread_messages}
+            channelUnreadStateStore={channelUnreadStateStore}
           />
         </View>
       ) : null}

package/src/components/MessageList/MessageList.tsx

@@ -66,7 +66,6 @@ import { ThreadContextValue, useThreadContext } from '../../contexts/threadConte
 import { useStableCallback } from '../../hooks';
 import { useStateStore } from '../../hooks/useStateStore';
 import { bumpOverlayLayoutRevision } from '../../state-store';
-import { ChannelUnreadStateStoreType } from '../../state-store/channel-unread-state';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
 import { MessageWrapper } from '../Message/MessageSimple/MessageWrapper';
@@ -305,10 +304,6 @@ const messageInputHeightStoreSelector = (state: MessageInputHeightState) => ({
   height: state.height,
 });
 
-const channelUnreadStateStoreSelector = (state: ChannelUnreadStateStoreType) => ({
-  unread_messages: state.channelUnreadState?.unread_messages,
-});
-
 /**
  * The message list component renders a list of messages. It consumes the following contexts:
  *
@@ -380,10 +375,6 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     messageInputHeightStore.store,
     messageInputHeightStoreSelector,
   );
-  const { unread_messages } = useStateStore(
-    channelUnreadStateStore.state,
-    channelUnreadStateStoreSelector,
-  );
 
   const myMessageThemeString = useMemo(() => JSON.stringify(myMessageTheme), [myMessageTheme]);
 
@@ -1328,7 +1319,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           <ScrollToBottomButton
             onPress={goToNewMessages}
             showNotification={scrollToBottomButtonVisible}
-            unreadCount={threadList ? 0 : unread_messages}
+            unreadCount={threadList ? 0 : channel?.countUnread()}
           />
         </Animated.View>
       ) : null}
@@ -1338,7 +1329,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
         <View style={styles.unreadMessagesNotificationContainer}>
           <UnreadMessagesNotification
             onCloseHandler={onUnreadNotificationClose}
-            unreadCount={unread_messages}
+            channelUnreadStateStore={channelUnreadStateStore}
           />
         </View>
       ) : null}

package/src/components/MessageList/UnreadMessagesNotification.tsx

@@ -1,15 +1,23 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { useChannelContext } from '../../contexts/channelContext/ChannelContext';
+import {
+  ChannelContextValue,
+  useChannelContext,
+} from '../../contexts/channelContext/ChannelContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { useStateStore } from '../../hooks/useStateStore';
 import { ArrowUp } from '../../icons/ArrowUp';
 import { NewClose } from '../../icons/NewClose';
+import { ChannelUnreadStateStoreType } from '../../state-store/channel-unread-state';
 import { primitives } from '../../theme';
 import { Button } from '../ui';
 
-export type UnreadMessagesNotificationProps = {
+export type UnreadMessagesNotificationProps = Pick<
+  ChannelContextValue,
+  'channelUnreadStateStore'
+> & {
   /**
    * Callback to handle the close event
    */
@@ -24,16 +32,21 @@ export type UnreadMessagesNotificationProps = {
   unreadCount?: number;
 };
 
+const channelUnreadStateSelector = (state: ChannelUnreadStateStoreType) => ({
+  unread_messages: state.channelUnreadState?.unread_messages,
+});
+
 export const UnreadMessagesNotification = (props: UnreadMessagesNotificationProps) => {
-  const { onCloseHandler, onPressHandler, unreadCount } = props;
+  const { onCloseHandler, onPressHandler, unreadCount, channelUnreadStateStore } = props;
   const { t } = useTranslationContext();
-  const {
-    channelUnreadStateStore,
-    loadChannelAtFirstUnreadMessage,
-    markRead,
-    setChannelUnreadState,
-    setTargetedMessage,
-  } = useChannelContext();
+  const { loadChannelAtFirstUnreadMessage, markRead, setChannelUnreadState, setTargetedMessage } =
+    useChannelContext();
+  const { unread_messages } = useStateStore(
+    channelUnreadStateStore.state,
+    channelUnreadStateSelector,
+  );
+
+  const count = unread_messages ?? unreadCount;
 
   const handleOnPress = async () => {
     if (onPressHandler) {
@@ -64,7 +77,7 @@ export const UnreadMessagesNotification = (props: UnreadMessagesNotificationProp
           variant='secondary'
           type='ghost'
           LeadingIcon={ArrowUp}
-          label={unreadCount ? t('{{count}} unread', { count: unreadCount }) : t('Unread Messages')}
+          label={count ? t('{{count}} unread', { count }) : t('Unread Messages')}
           onPress={handleOnPress}
           size='md'
         />