fix: Update quoted message preview on message update (#1503)

Author: MartinCupela

src/components/Channel/Channel.tsx

@@ -65,6 +65,7 @@ import type { Data as EmojiMartData } from 'emoji-mart';
 import type { MessageInputProps } from '../MessageInput/MessageInput';
 
 import type { CustomTrigger, DefaultStreamChatGenerics, GiphyVersions } from '../../types/types';
+import { makeAddNotifications } from './utils';
 
 export type ChannelProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -428,25 +429,7 @@ const ChannelInner = <
   /** MESSAGE */
 
   // Adds a temporary notification to message list, will be removed after 5 seconds
-  const addNotification = (text: string, type: 'success' | 'error') => {
-    if (typeof text !== 'string' || (type !== 'success' && type !== 'error')) {
-      return;
-    }
-
-    const id = uuidv4();
-
-    setNotifications((prevNotifications) => [...prevNotifications, { id, text, type }]);
-
-    const timeout = setTimeout(
-      () =>
-        setNotifications((prevNotifications) =>
-          prevNotifications.filter((notification) => notification.id !== id),
-        ),
-      5000,
-    );
-
-    notificationTimeouts.push(timeout);
-  };
+  const addNotification = makeAddNotifications(setNotifications, notificationTimeouts);
 
   const loadMoreFinished = debounce(
     (hasMore: boolean, messages: ChannelState<StreamChatGenerics>['messages']) => {

src/components/Channel/utils.ts

@@ -0,0 +1,26 @@
+import type { Dispatch, SetStateAction } from 'react';
+import type { ChannelNotifications } from '../../context/ChannelStateContext';
+import { v4 as uuidv4 } from 'uuid';
+
+export const makeAddNotifications = (
+  setNotifications: Dispatch<SetStateAction<ChannelNotifications>>,
+  notificationTimeouts: NodeJS.Timeout[],
+) => (text: string, type: 'success' | 'error') => {
+  if (typeof text !== 'string' || (type !== 'success' && type !== 'error')) {
+    return;
+  }
+
+  const id = uuidv4();
+
+  setNotifications((prevNotifications) => [...prevNotifications, { id, text, type }]);
+
+  const timeout = setTimeout(
+    () =>
+      setNotifications((prevNotifications) =>
+        prevNotifications.filter((notification) => notification.id !== id),
+      ),
+    5000,
+  );
+
+  notificationTimeouts.push(timeout);
+};

src/components/MessageInput/MessageInputFlat.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { FileUploadButton, ImageDropzone } from 'react-file-utils';
+import type { Event } from 'stream-chat';
 
 import { EmojiPicker } from './EmojiPicker';
 import { CooldownTimer as DefaultCooldownTimer } from './hooks/useCooldownTimer';
@@ -14,6 +15,8 @@ import { UploadsPreview } from './UploadsPreview';
 import { ChatAutoComplete } from '../ChatAutoComplete/ChatAutoComplete';
 import { Tooltip } from '../Tooltip/Tooltip';
 
+import { useChatContext } from '../../context/ChatContext';
+import { useChannelActionContext } from '../../context/ChannelActionContext';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useMessageInputContext } from '../../context/MessageInputContext';
@@ -29,8 +32,9 @@ export const MessageInputFlat = <
     multipleUploads,
     quotedMessage,
   } = useChannelStateContext<StreamChatGenerics>('MessageInputFlat');
+  const { setQuotedMessage } = useChannelActionContext('MessageInputFlat');
   const { t } = useTranslationContext('MessageInputFlat');
-
+  const { channel } = useChatContext<StreamChatGenerics>('MessageInputFlat');
   const {
     closeEmojiPicker,
     cooldownRemaining,
@@ -52,6 +56,24 @@ export const MessageInputFlat = <
     SendButton = DefaultSendButton,
   } = useComponentContext<StreamChatGenerics>('MessageInputFlat');
 
+  useEffect(() => {
+    const handleQuotedMessageUpdate = (e: Event<StreamChatGenerics>) => {
+      if (e.message?.id !== quotedMessage?.id) return;
+      if (e.type === 'message.deleted') {
+        setQuotedMessage(undefined);
+        return;
+      }
+      setQuotedMessage(e.message);
+    };
+    channel?.on('message.deleted', handleQuotedMessageUpdate);
+    channel?.on('message.updated', handleQuotedMessageUpdate);
+
+    return () => {
+      channel?.off('message.deleted', handleQuotedMessageUpdate);
+      channel?.off('message.updated', handleQuotedMessageUpdate);
+    };
+  }, [channel, quotedMessage]);
+
   return (
     <div
       className={`str-chat__input-flat ${

src/components/MessageInput/MessageInputSmall.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { FileUploadButton, ImageDropzone } from 'react-file-utils';
+import type { Event } from 'stream-chat';
 
 import { EmojiPicker } from './EmojiPicker';
 import { CooldownTimer as DefaultCooldownTimer } from './hooks/useCooldownTimer';
@@ -13,6 +14,8 @@ import { UploadsPreview } from './UploadsPreview';
 import { ChatAutoComplete } from '../ChatAutoComplete/ChatAutoComplete';
 import { Tooltip } from '../Tooltip/Tooltip';
 
+import { useChatContext } from '../../context/ChatContext';
+import { useChannelActionContext } from '../../context/ChannelActionContext';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useMessageInputContext } from '../../context/MessageInputContext';
@@ -31,7 +34,9 @@ export const MessageInputSmall = <
     multipleUploads,
     quotedMessage,
   } = useChannelStateContext<StreamChatGenerics>('MessageInputSmall');
+  const { setQuotedMessage } = useChannelActionContext('MessageInputSmall');
   const { t } = useTranslationContext('MessageInputSmall');
+  const { channel } = useChatContext<StreamChatGenerics>('MessageInputSmall');
 
   const {
     closeEmojiPicker,
@@ -54,6 +59,23 @@ export const MessageInputSmall = <
     QuotedMessagePreview = DefaultQuotedMessagePreview,
   } = useComponentContext<StreamChatGenerics>('MessageInputSmall');
 
+  useEffect(() => {
+    const handleQuotedMessageUpdate = (e: Event<StreamChatGenerics>) => {
+      if (!(quotedMessage && e.message?.id === quotedMessage.id)) return;
+      if (e.type === 'message.deleted') {
+        setQuotedMessage(undefined);
+        return;
+      }
+      setQuotedMessage(e.message);
+    };
+    channel?.on('message.deleted', handleQuotedMessageUpdate);
+    channel?.on('message.updated', handleQuotedMessageUpdate);
+
+    return () => {
+      channel?.off('message.deleted', handleQuotedMessageUpdate);
+      channel?.off('message.updated', handleQuotedMessageUpdate);
+    };
+  }, [channel, quotedMessage]);
   return (
     <div className='str-chat__small-message-input__wrapper'>
       <ImageDropzone