fix: update quoting message on update of quoted message (#2408)

Author: MartinCupela

src/components/Message/__tests__/utils.test.js

@@ -150,6 +150,64 @@ describe('Message utils', () => {
       expect(shouldUpdate).toBe(true);
     });
 
+    it('should update if rendered with a different quoted message', () => {
+      const cases = [
+        ['deleted_at', undefined, new Date().toISOString()],
+        ['latest_reactions', [], [1]],
+        ['own_reactions', [], [1]],
+        ['pinned', false, true],
+        ['reply_count', 0, 1],
+        ['status', 'sending', 'received'],
+        ['text', '', 'a'],
+        ['type', 'X', 'Y'],
+        ['updated_at', new Date(1).toISOString(), new Date(2).toISOString()],
+        [
+          'user',
+          { updated_at: new Date(1).toISOString() },
+          { updated_at: new Date(2).toISOString() },
+        ],
+      ];
+      const message = generateMessage();
+      const quotedMessage = generateMessage();
+      cases.forEach(([key, prevVal, nextVal]) => {
+        const shouldUpdate = !areMessagePropsEqual(
+          {
+            message: {
+              ...message,
+              quoted_message: { ...quotedMessage, [key]: prevVal },
+              quoted_message_id: quotedMessage.id,
+            },
+          },
+          {
+            message: {
+              ...message,
+              quoted_message: { ...quotedMessage, [key]: nextVal },
+              quoted_message_id: quotedMessage.id,
+            },
+          },
+        );
+        expect(shouldUpdate).toBe(true);
+      });
+      expect(
+        !areMessagePropsEqual(
+          {
+            message: {
+              ...message,
+              quoted_message: undefined,
+              quoted_message_id: undefined,
+            },
+          },
+          {
+            message: {
+              ...message,
+              quoted_message: quotedMessage,
+              quoted_message_id: quotedMessage.id,
+            },
+          },
+        ),
+      ).toBe(true);
+    });
+
     it('should update if rendered with a different message is read by other users', () => {
       const message = generateMessage();
       const currentReadBy = [alice];

src/components/Message/utils.tsx

@@ -232,22 +232,31 @@ export const showMessageActionsBox = (
   return true;
 };
 
-const areMessagesEqual = <
+function areMessagesEqual<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 >(
   prevMessage: StreamMessage<StreamChatGenerics>,
   nextMessage: StreamMessage<StreamChatGenerics>,
-) =>
-  prevMessage.deleted_at === nextMessage.deleted_at &&
-  prevMessage.latest_reactions?.length === nextMessage.latest_reactions?.length &&
-  prevMessage.own_reactions?.length === nextMessage.own_reactions?.length &&
-  prevMessage.pinned === nextMessage.pinned &&
-  prevMessage.reply_count === nextMessage.reply_count &&
-  prevMessage.status === nextMessage.status &&
-  prevMessage.text === nextMessage.text &&
-  prevMessage.type === nextMessage.type &&
-  prevMessage.updated_at === nextMessage.updated_at &&
-  prevMessage.user?.updated_at === nextMessage.user?.updated_at;
+): boolean {
+  return (
+    prevMessage.deleted_at === nextMessage.deleted_at &&
+    prevMessage.latest_reactions?.length === nextMessage.latest_reactions?.length &&
+    prevMessage.own_reactions?.length === nextMessage.own_reactions?.length &&
+    prevMessage.pinned === nextMessage.pinned &&
+    prevMessage.reply_count === nextMessage.reply_count &&
+    prevMessage.status === nextMessage.status &&
+    prevMessage.text === nextMessage.text &&
+    prevMessage.type === nextMessage.type &&
+    prevMessage.updated_at === nextMessage.updated_at &&
+    prevMessage.user?.updated_at === nextMessage.user?.updated_at &&
+    Boolean(prevMessage.quoted_message) === Boolean(nextMessage.quoted_message) &&
+    (!prevMessage.quoted_message ||
+      areMessagesEqual(
+        prevMessage.quoted_message as StreamMessage<StreamChatGenerics>,
+        nextMessage.quoted_message as StreamMessage<StreamChatGenerics>,
+      ))
+  );
+}
 
 export const areMessagePropsEqual = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics