fix: channel preview update on new message when coming from BG to FG (#2585)

* fix: channel preview update on new message when coming from BG to FG

* fix: channel preview update on new message when coming from BG to FG

Author: khushal87

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -42,7 +42,7 @@ const ChannelPreviewWithContext = <
   const [forceUpdate, setForceUpdate] = useState(0);
   const [unread, setUnread] = useState(channel.countUnread());
 
-  const latestMessagePreview = useLatestMessagePreview(channel, forceUpdate);
+  const latestMessagePreview = useLatestMessagePreview(channel, forceUpdate, lastMessage);
 
   const channelLastMessage = channel.lastMessage();
   const channelLastMessageString = `${channelLastMessage?.id}${channelLastMessage?.updated_at}`;

package/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts

@@ -8,6 +8,7 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 
 import { useTranslatedMessage } from '../../../hooks/useTranslatedMessage';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { stringifyMessage } from '../../../utils/utils';
 
 type LatestMessage<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -218,18 +219,20 @@ export const useLatestMessagePreview = <
 >(
   channel: Channel<StreamChatGenerics>,
   forceUpdate: number,
+  lastMessage?:
+    | ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>
+    | MessageResponse<StreamChatGenerics>,
 ) => {
   const { client } = useChatContext<StreamChatGenerics>();
   const { t } = useTranslationContext();
 
   const channelConfigExists = typeof channel?.getConfig === 'function';
 
-  const messages = channel.state.messages;
-  const message = messages.length ? messages[messages.length - 1] : undefined;
+  const translatedLastMessage = useTranslatedMessage<StreamChatGenerics>(lastMessage);
 
-  const translatedLastMessage = useTranslatedMessage<StreamChatGenerics>(message);
-
-  const channelLastMessageString = `${message?.id}${message?.updated_at}`;
+  const channelLastMessageString = translatedLastMessage
+    ? stringifyMessage(translatedLastMessage)
+    : '';
 
   const [readEvents, setReadEvents] = useState(true);
   const [latestMessagePreview, setLatestMessagePreview] = useState<

package/src/utils/utils.ts

@@ -9,6 +9,7 @@ import type {
   ChannelMemberResponse,
   CommandResponse,
   FormatMessageResponse,
+  MessageResponse,
   StreamChat,
   UserResponse,
 } from 'stream-chat';
@@ -614,7 +615,10 @@ export const stringifyMessage = <
   text,
   type,
   updated_at,
-}: FormatMessageResponse<StreamChatGenerics> | MessageType<StreamChatGenerics>): string =>
+}:
+  | MessageResponse<StreamChatGenerics>
+  | FormatMessageResponse<StreamChatGenerics>
+  | MessageType<StreamChatGenerics>): string =>
   `${
     latest_reactions ? latest_reactions.map(({ type, user }) => `${type}${user?.id}`).join() : ''
   }${