refactor: remove isMessageEqual logic and added message.updated_at

Author: khushal87

docusaurus/docs/reactnative/common-content/core-components/channel/props/is_message_equal.mdx

@@ -38,7 +38,6 @@ import InitialScrollToFirstUnreadMessage from '../common-content/core-components
 import InlineDateSeparator from '../common-content/core-components/channel/props/inline_date_separator.mdx';
 import InlineUnreadIndicator from '../common-content/core-components/channel/props/inline_unread_indicator.mdx';
 import IsAttachmentEqual from '../common-content/core-components/channel/props/is_attachment_equal.mdx';
-import IsMessageEqual from '../common-content/core-components/channel/props/is_message_equal.mdx';
 import LegacyImageViewerSwipeBehaviour from '../common-content/core-components/channel/props/legacy_image_viewer_swipe_behaviour.mdx';
 import MarkdownRules from '../common-content/core-components/channel/props/markdown_rules.mdx';
 import MessageAvatar from '../common-content/core-components/channel/props/message_avatar.mdx';
@@ -154,10 +153,6 @@ Id of current channel.
 
 <IsAttachmentEqual />
 
-### <div class="label description">_forwarded from [Channel](../core-components/channel.mdx#ismessageequal)_ props</div> isMessageEqual {#ismessageequal}
-
-<IsMessageEqual />
-
 ### <div class="label description">_forwarded from [Channel](../core-components/channel.mdx#legacyimageviewerswipebehaviour)_ props</div> legacyImageViewerSwipeBehaviour {#legacyimageviewerswipebehaviour}
 
 <legacyImageViewerSwipeBehaviour />

docusaurus/docs/reactnative/contexts/messages_context.mdx

@@ -77,7 +77,6 @@ import InputEditingStateHeader from '../common-content/core-components/channel/p
 import InputGiphySearch from '../common-content/core-components/channel/props/input_giphy_search.mdx';
 import InputReplyStateHeader from '../common-content/core-components/channel/props/input_reply_state_header.mdx';
 import IsAttachmentEqual from '../common-content/core-components/channel/props/is_attachment_equal.mdx';
-import IsMessageEqual from '../common-content/core-components/channel/props/is_message_equal.mdx';
 import LegacyImageViewerSwipeBehaviour from '../common-content/core-components/channel/props/legacy_image_viewer_swipe_behaviour.mdx';
 import MarkdownRules from '../common-content/core-components/channel/props/markdown_rules.mdx';
 import MaxMessageLength from '../common-content/core-components/channel/props/max_message_length.mdx';
@@ -522,10 +521,6 @@ The max allowable is 255, which when reached displays as `255+`.
 
 <IsAttachmentEqual />
 
-### IsMessageEqual
-
-<IsMessageEqual />
-
 ### keyboardBehavior
 
 Behavior for the keyboard passed to the underlying [KeyboardAvoidingView](https://reactnative.dev/docs/keyboardavoidingview#behavior).

docusaurus/docs/reactnative/core-components/channel.mdx

@@ -507,26 +507,3 @@ The `deleteMessagesVisibiltyType` prop in the Channel component enables changing
   deletedMessagesVisibiltyType="sender"
 >
 ```
-
-## Memoization handler for custom message properties
-
-When we add a custom property to the message object, and the data is changed around that property, the component is not rerendered by default. This should be fixed by passing a custom handler to the prop [`isMessageEqual`](../core-components/channel.mdx#ismessageequal) to [Channel](../core-components/channel.mdx) component. The logic should be implemented by the user by itself and must be similar to an equality check function we pass to a [React.memo](https://reactjs.org/docs/react-api.html#reactmemo) as a second argument.
-
-Eg: Suppose we add a `customField` property to the message object. We want to use the value of this field from the message object and have an update in the UI every time the property's value changes. We can do this by implementing a memoization handler for this field as below:
-
-```tsx
-import { Channel } from 'stream-chat-react-native';
-
-const isMessageEqualHandler = (prevMessage,  nextMessage) => {
-  const messageEqual = prevMessage.customField === nextMessage.customField;
-  if (!messageEqual) return false;
-  return true;
-};
-
-<Channel
-  ...
-  isMessageEqual={isMessageEqualHandler}
->
-  {/* The underlying components */}
-</Channel>
-```

docusaurus/docs/reactnative/guides/message_customizations.mdx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useMemo, useState } from 'react';
-import { LogBox, Platform, SafeAreaView, View, useColorScheme } from 'react-native';
+import { LogBox, Platform, SafeAreaView, View, useColorScheme, Text } from 'react-native';
 import { DarkTheme, DefaultTheme, NavigationContainer, RouteProp } from '@react-navigation/native';
 import {
   createStackNavigator,
@@ -19,6 +19,7 @@ import {
   Thread,
   ThreadContextValue,
   useAttachmentPickerContext,
+  useMessageContext,
   useOverlayContext,
 } from 'stream-chat-react-native';
 

examples/TypeScriptMessaging/App.tsx

@@ -256,7 +256,6 @@ export type ChannelPropsWithContext<
       | 'InlineDateSeparator'
       | 'InlineUnreadIndicator'
       | 'isAttachmentEqual'
-      | 'isMessageEqual'
       | 'legacyImageViewerSwipeBehaviour'
       | 'markdownRules'
       | 'Message'
@@ -461,7 +460,6 @@ const ChannelWithContext = <
     InputGiphySearch = InputGiphyCommandInputDefault,
     InputReplyStateHeader = InputReplyStateHeaderDefault,
     isAttachmentEqual,
-    isMessageEqual,
     keyboardBehavior,
     KeyboardCompatibleView = KeyboardCompatibleViewDefault,
     keyboardVerticalOffset,
@@ -1703,7 +1701,6 @@ const ChannelWithContext = <
     InlineDateSeparator,
     InlineUnreadIndicator,
     isAttachmentEqual,
-    isMessageEqual,
     legacyImageViewerSwipeBehaviour,
     markdownRules,
     Message,

package/src/components/Channel/Channel.tsx

@@ -43,7 +43,6 @@ export const useCreateMessagesContext = <
   InlineDateSeparator,
   InlineUnreadIndicator,
   isAttachmentEqual,
-  isMessageEqual,
   legacyImageViewerSwipeBehaviour,
   markdownRules,
   Message,
@@ -130,7 +129,6 @@ export const useCreateMessagesContext = <
       InlineDateSeparator,
       InlineUnreadIndicator,
       isAttachmentEqual,
-      isMessageEqual,
       legacyImageViewerSwipeBehaviour,
       markdownRules,
       Message,

package/src/components/Channel/__tests__/isMessageEqual.test.js

@@ -113,7 +113,6 @@ export type MessagePropsWithContext<
     | 'handleRetry'
     | 'handleThreadReply'
     | 'isAttachmentEqual'
-    | 'isMessageEqual'
     | 'messageActions'
     | 'messageContentOrder'
     | 'MessageSimple'
@@ -684,7 +683,6 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const {
     goToMessage: prevGoToMessage,
     isAttachmentEqual,
-    isMessageEqual,
     isTargetedMessage: prevIsTargetedMessage,
     lastReceivedId: prevLastReceivedId,
     members: prevMembers,
@@ -734,7 +732,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
     prevMessage.text === nextMessage.text &&
-    prevMessage.pinned === nextMessage.pinned;
+    prevMessage.pinned === nextMessage.pinned &&
+    prevMessage.updated_at === nextMessage.updated_at;
 
   if (!messageEqual) return false;
 
@@ -797,10 +796,6 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const targetedMessageEqual = prevIsTargetedMessage === nextIsTargetedMessage;
   if (!targetedMessageEqual) return false;
 
-  if (isMessageEqual) {
-    return !!isMessageEqual(prevMessage, nextMessage);
-  }
-
   return true;
 };
 

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -296,14 +296,11 @@ export type MessagesContextValue<
   handleRetry?: (message: MessageType<StreamChatGenerics>) => Promise<void>;
   /** Handler to access when a thread reply action is invoked */
   handleThreadReply?: (message: MessageType<StreamChatGenerics>) => Promise<void>;
+  /** Handler to deal with custom memoization logic of Attachment */
   isAttachmentEqual?: (
     prevAttachment: Attachment<StreamChatGenerics>,
     nextAttachment: Attachment<StreamChatGenerics>,
   ) => boolean;
-  isMessageEqual?: (
-    prevMessage: MessageType<StreamChatGenerics>,
-    nextMessage: MessageType<StreamChatGenerics>,
-  ) => boolean;
   legacyImageViewerSwipeBehaviour?: boolean;
   /** Object specifying rules defined within simple-markdown https://github.com/Khan/simple-markdown#adding-a-simple-extension */
   markdownRules?: MarkdownRules;