stream-chat-react-native-core 4.3.0-beta.4 → 4.3.0-beta.5

package/src/components/Attachment/Attachment.tsx

@@ -26,6 +26,7 @@ export type AttachmentPropsWithContext<
   | 'Gallery'
   | 'giphyVersion'
   | 'Giphy'
+  | 'isAttachmentEqual'
   | 'UrlPreview'
 > & {
   /**
@@ -101,15 +102,20 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   prevProps: AttachmentPropsWithContext<StreamChatGenerics>,
   nextProps: AttachmentPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { attachment: prevAttachment } = prevProps;
+  const { attachment: prevAttachment, isAttachmentEqual } = prevProps;
   const { attachment: nextAttachment } = nextProps;
 
   const attachmentEqual =
     prevAttachment.actions?.length === nextAttachment.actions?.length &&
     prevAttachment.image_url === nextAttachment.image_url &&
     prevAttachment.thumb_url === nextAttachment.thumb_url;
+  if (!attachmentEqual) return false;
 
-  return attachmentEqual;
+  if (isAttachmentEqual) {
+    return isAttachmentEqual(prevAttachment, nextAttachment);
+  }
+
+  return true;
 };
 
 const MemoizedAttachment = React.memo(
@@ -129,6 +135,7 @@ export type AttachmentProps<
     | 'Giphy'
     | 'giphyVersion'
     | 'UrlPreview'
+    | 'isAttachmentEqual'
   >
 > &
   Pick<AttachmentPropsWithContext<StreamChatGenerics>, 'attachment'>;
@@ -159,6 +166,7 @@ export const Attachment = <
     Gallery: ContextGallery,
     Giphy: ContextGiphy,
     giphyVersion: ContextGiphyVersion,
+    isAttachmentEqual,
     UrlPreview: ContextUrlPreview,
   } = useMessagesContext<StreamChatGenerics>();
 
@@ -185,6 +193,7 @@ export const Attachment = <
         Gallery,
         Giphy,
         giphyVersion,
+        isAttachmentEqual,
         UrlPreview,
       }}
     />

package/src/components/Channel/Channel.tsx

@@ -255,6 +255,7 @@ export type ChannelPropsWithContext<
       | 'handleThreadReply'
       | 'InlineDateSeparator'
       | 'InlineUnreadIndicator'
+      | 'isAttachmentEqual'
       | 'legacyImageViewerSwipeBehaviour'
       | 'markdownRules'
       | 'Message'
@@ -458,6 +459,7 @@ const ChannelWithContext = <
     InputEditingStateHeader = InputEditingStateHeaderDefault,
     InputGiphySearch = InputGiphyCommandInputDefault,
     InputReplyStateHeader = InputReplyStateHeaderDefault,
+    isAttachmentEqual,
     keyboardBehavior,
     KeyboardCompatibleView = KeyboardCompatibleViewDefault,
     keyboardVerticalOffset,
@@ -1698,6 +1700,7 @@ const ChannelWithContext = <
     initialScrollToFirstUnreadMessage,
     InlineDateSeparator,
     InlineUnreadIndicator,
+    isAttachmentEqual,
     legacyImageViewerSwipeBehaviour,
     markdownRules,
     Message,

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

@@ -0,0 +1,100 @@
+import React from 'react';
+
+import { Text } from 'react-native';
+
+import { act, cleanup, render, waitFor } from '@testing-library/react-native';
+
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+
+import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
+import dispatchMessageUpdateEvent from '../../../mock-builders/event/messageUpdated';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
+import { generateMember } from '../../../mock-builders/generator/member';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { generateUser } from '../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Channel } from '../../Channel/Channel';
+import { Chat } from '../../Chat/Chat';
+import { MessageList } from '../../MessageList/MessageList';
+
+describe('Message', () => {
+  let channel;
+  let chatClient;
+
+  const user = generateUser({ id: 'id', name: 'name' });
+  const messages = [
+    generateMessage({
+      attachments: [{ customField: 'custom-field', type: 'test' }],
+      user,
+    }),
+  ];
+
+  beforeEach(async () => {
+    const members = [generateMember({ user })];
+    const mockedChannel = generateChannelResponse({
+      members,
+      messages,
+    });
+
+    chatClient = await getTestClientWithUser(user);
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+
+  const getMessageWithCustomFields = () => {
+    const isAttachmentEqualHandler = (prevProps, nextProps) => {
+      const propsEqual = prevProps.customField === nextProps.customField;
+      if (!propsEqual) return false;
+      return true;
+    };
+
+    return (
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel
+            Card={({ customField, type }) => {
+              if (type === 'test') {
+                return <Text testID='attachment-custom-field'>{customField}</Text>;
+              }
+            }}
+            channel={channel}
+            isAttachmentEqual={isAttachmentEqualHandler}
+          >
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>
+    );
+  };
+
+  it('should render attachment with custom field', async () => {
+    const { getByText } = render(getMessageWithCustomFields());
+
+    await waitFor(() => {
+      expect(getByText('custom-field')).toBeTruthy();
+    });
+
+    act(() => {
+      dispatchMessageUpdateEvent(
+        chatClient,
+        {
+          ...messages[0],
+          attachments: [{ customField: 'custom-field-2', type: 'test' }],
+          updated_at: new Date(),
+        },
+        channel,
+      );
+    });
+
+    await waitFor(() => {
+      expect(getByText('custom-field-2')).toBeTruthy();
+    });
+  });
+});

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

@@ -42,6 +42,7 @@ export const useCreateMessagesContext = <
   initialScrollToFirstUnreadMessage,
   InlineDateSeparator,
   InlineUnreadIndicator,
+  isAttachmentEqual,
   legacyImageViewerSwipeBehaviour,
   markdownRules,
   Message,
@@ -127,6 +128,7 @@ export const useCreateMessagesContext = <
       initialScrollToFirstUnreadMessage,
       InlineDateSeparator,
       InlineUnreadIndicator,
+      isAttachmentEqual,
       legacyImageViewerSwipeBehaviour,
       markdownRules,
       Message,

package/src/components/Message/Message.tsx

@@ -112,6 +112,7 @@ export type MessagePropsWithContext<
     | 'handleReaction'
     | 'handleRetry'
     | 'handleThreadReply'
+    | 'isAttachmentEqual'
     | 'messageActions'
     | 'messageContentOrder'
     | 'MessageSimple'
@@ -472,6 +473,7 @@ const MessageWithContext = <
     t,
     updateMessage,
   });
+
   const showMessageOverlay = async (messageReactions = false, error = errorOrFailed) => {
     await dismissKeyboard();
 
@@ -680,6 +682,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
 ) => {
   const {
     goToMessage: prevGoToMessage,
+    isAttachmentEqual,
     isTargetedMessage: prevIsTargetedMessage,
     lastReceivedId: prevLastReceivedId,
     members: prevMembers,
@@ -729,8 +732,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
     prevMessage.text === nextMessage.text &&
-    prevMessage.updated_at === nextMessage.updated_at &&
-    prevMessage.pinned === nextMessage.pinned;
+    prevMessage.pinned === nextMessage.pinned &&
+    prevMessage.updated_at === nextMessage.updated_at;
 
   if (!messageEqual) return false;
 
@@ -752,12 +755,20 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     (Array.isArray(prevMessageAttachments) &&
       Array.isArray(nextMessageAttachments) &&
       prevMessageAttachments.length === nextMessageAttachments.length &&
-      prevMessageAttachments.every((attachment, index) =>
-        attachment.type === 'image'
-          ? attachment.image_url === nextMessageAttachments[index].image_url &&
-            attachment.thumb_url === nextMessageAttachments[index].thumb_url
-          : attachment.type === nextMessageAttachments[index].type,
-      )) ||
+      prevMessageAttachments.every((attachment, index) => {
+        const attachmentKeysEqual =
+          attachment.type === 'image'
+            ? attachment.image_url === nextMessageAttachments[index].image_url &&
+              attachment.thumb_url === nextMessageAttachments[index].thumb_url
+            : attachment.type === nextMessageAttachments[index].type;
+
+        if (isAttachmentEqual)
+          return (
+            attachmentKeysEqual && !!isAttachmentEqual(attachment, nextMessageAttachments[index])
+          );
+
+        return attachmentKeysEqual;
+      })) ||
     prevMessageAttachments === nextMessageAttachments;
   if (!attachmentsEqual) return false;
 

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -84,6 +84,7 @@ export type MessageContentPropsWithContext<
     | 'FileAttachmentGroup'
     | 'formatDate'
     | 'Gallery'
+    | 'isAttachmentEqual'
     | 'MessageFooter'
     | 'MessageHeader'
     | 'MessageDeleted'
@@ -371,6 +372,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     goToMessage: prevGoToMessage,
     groupStyles: prevGroupStyles,
     hasReactions: prevHasReactions,
+    isAttachmentEqual,
     lastGroupMessage: prevLastGroupMessage,
     members: prevMembers,
     message: prevMessage,
@@ -402,7 +404,6 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
 
   const goToMessageChangedAndMatters =
     nextMessage.quoted_message_id && prevGoToMessage !== nextGoToMessage;
-
   if (goToMessageChangedAndMatters) return false;
 
   const onlyEmojisEqual = prevOnlyEmojis === nextOnlyEmojis;
@@ -431,7 +432,6 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     prevMessage.type === nextMessage.type &&
     prevMessage.text === nextMessage.text &&
     prevMessage.pinned === nextMessage.pinned;
-
   if (!messageEqual) return false;
 
   const isPrevQuotedMessageTypeDeleted = prevMessage.quoted_message?.type === 'deleted';
@@ -440,21 +440,28 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const quotedMessageEqual =
     prevMessage.quoted_message?.id === nextMessage.quoted_message?.id &&
     isPrevQuotedMessageTypeDeleted === isNextQuotedMessageTypeDeleted;
-
   if (!quotedMessageEqual) return false;
 
-  const prevAttachments = prevMessage.attachments;
-  const nextAttachments = nextMessage.attachments;
+  const prevMessageAttachments = prevMessage.attachments;
+  const nextMessageAttachments = nextMessage.attachments;
   const attachmentsEqual =
-    Array.isArray(prevAttachments) && Array.isArray(nextAttachments)
-      ? prevAttachments.length === nextAttachments.length &&
-        prevAttachments.every(
-          (attachment, index) =>
-            attachment.image_url === nextAttachments[index].image_url &&
-            attachment.og_scrape_url === nextAttachments[index].og_scrape_url &&
-            attachment.thumb_url === nextAttachments[index].thumb_url,
-        )
-      : prevAttachments === nextAttachments;
+    Array.isArray(prevMessageAttachments) &&
+    Array.isArray(nextMessageAttachments) &&
+    prevMessageAttachments.length === nextMessageAttachments.length &&
+    prevMessageAttachments.every((attachment, index) => {
+      const attachmentKeysEqual =
+        attachment.type === 'image'
+          ? attachment.image_url === nextMessageAttachments[index].image_url &&
+            attachment.thumb_url === nextMessageAttachments[index].thumb_url
+          : attachment.type === nextMessageAttachments[index].type;
+
+      if (isAttachmentEqual)
+        return (
+          attachmentKeysEqual && !!isAttachmentEqual(attachment, nextMessageAttachments[index])
+        );
+
+      return attachmentKeysEqual;
+    });
   if (!attachmentsEqual) return false;
 
   const latestReactionsEqual =
@@ -527,6 +534,7 @@ export const MessageContent = <
     FileAttachmentGroup,
     formatDate,
     Gallery,
+    isAttachmentEqual,
     MessageDeleted,
     MessageFooter,
     MessageHeader,
@@ -549,6 +557,7 @@ export const MessageContent = <
         goToMessage,
         groupStyles,
         hasReactions,
+        isAttachmentEqual,
         isMyMessage,
         lastGroupMessage,
         lastReceivedId,

package/src/components/Message/MessageSimple/MessageSimple.tsx

@@ -144,18 +144,21 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const channelEqual = prevChannel?.state.messages.length === nextChannel?.state.messages.length;
   if (!channelEqual) return false;
 
-  const prevAttachments = prevMessage.attachments;
-  const nextAttachments = nextMessage.attachments;
+  const prevMessageAttachments = prevMessage.attachments;
+  const nextMessageAttachments = nextMessage.attachments;
   const attachmentsEqual =
-    Array.isArray(prevAttachments) && Array.isArray(nextAttachments)
-      ? prevAttachments.length === nextAttachments.length &&
-        prevAttachments.every(
-          (attachment, index) =>
-            attachment.image_url === nextAttachments[index].image_url &&
-            attachment.og_scrape_url === nextAttachments[index].og_scrape_url &&
-            attachment.thumb_url === nextAttachments[index].thumb_url,
-        )
-      : prevAttachments === nextAttachments;
+    Array.isArray(prevMessageAttachments) &&
+    Array.isArray(nextMessageAttachments) &&
+    prevMessageAttachments.length === nextMessageAttachments.length &&
+    prevMessageAttachments.every((attachment, index) => {
+      const attachmentKeysEqual =
+        attachment.type === 'image'
+          ? attachment.image_url === nextMessageAttachments[index].image_url &&
+            attachment.thumb_url === nextMessageAttachments[index].thumb_url
+          : attachment.type === nextMessageAttachments[index].type;
+
+      return attachmentKeysEqual;
+    });
   if (!attachmentsEqual) return false;
 
   const latestReactionsEqual =

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -296,6 +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;
   legacyImageViewerSwipeBehaviour?: boolean;
   /** Object specifying rules defined within simple-markdown https://github.com/Khan/simple-markdown#adding-a-simple-extension */
   markdownRules?: MarkdownRules;

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.3.0-beta.4"
+  "version": "4.3.0-beta.5"
 }