fix: improve uselatestmessagepreview

Author: khushal87

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

@@ -5,6 +5,7 @@ import type {
   AttachmentManagerState,
   Channel,
   ChannelState,
+  DraftMessage,
   MessageResponse,
   PollState,
   PollVote,
@@ -85,8 +86,7 @@ const getMentionUsers = (mentionedUser: UserResponse[] | undefined) => {
 const getLatestMessageDisplayText = (
   channel: Channel,
   client: StreamChat,
-  draftText: string | undefined,
-  draftAttachments: boolean | undefined,
+  draftMessage: DraftMessage | undefined,
   message: LatestMessage | undefined,
   t: (key: string) => string,
   pollState: LatestMessagePreviewSelectorReturnType | undefined,
@@ -106,18 +106,21 @@ const getLatestMessageDisplayText = (
     ? `${messageSender === t('You') ? '' : '@'}${messageSender}: `
     : '';
   const boldOwner = messageSenderText.includes('@');
-  if (draftText) {
-    return [
-      { bold: true, draft: true, text: 'Draft:' },
-      { bold: false, text: draftText },
-    ];
-  }
-  if (draftAttachments) {
-    return [
-      { bold: true, draft: true, text: 'Draft:' },
-      { bold: false, text: t('🏙 Attachment...') },
-    ];
+  if (draftMessage) {
+    if (draftMessage.attachments?.length) {
+      return [
+        { bold: true, draft: true, text: 'Draft:' },
+        { bold: false, text: t('🏙 Attachment...') },
+      ];
+    }
+    if (draftMessage.text) {
+      return [
+        { bold: true, draft: true, text: 'Draft:' },
+        { bold: false, text: draftMessage.text },
+      ];
+    }
   }
+
   if (message.text) {
     // rough guess optimization to limit string preview to max 100 characters
     const shortenedText = message.text.substring(0, 100).replace(/\n/g, ' ');
@@ -218,15 +221,13 @@ const getLatestMessageReadStatus = (
 const getLatestMessagePreview = (params: {
   channel: Channel;
   client: StreamChat;
-  draftText?: string;
-  draftAttachments?: boolean;
+  draftMessage?: DraftMessage;
   pollState: LatestMessagePreviewSelectorReturnType | undefined;
   readEvents: boolean;
   t: TFunction;
   lastMessage?: ReturnType<ChannelState['formatMessage']> | MessageResponse;
 }) => {
-  const { channel, client, draftText, draftAttachments, lastMessage, pollState, readEvents, t } =
-    params;
+  const { channel, client, draftMessage, lastMessage, pollState, readEvents, t } = params;
 
   const messages = channel.state.messages;
 
@@ -251,15 +252,7 @@ const getLatestMessagePreview = (params: {
   return {
     created_at: message?.created_at,
     messageObject: message,
-    previews: getLatestMessageDisplayText(
-      channel,
-      client,
-      draftText,
-      draftAttachments,
-      message,
-      t,
-      pollState,
-    ),
+    previews: getLatestMessageDisplayText(channel, client, draftMessage, message, t, pollState),
     status: getLatestMessageReadStatus(channel, client, message, readEvents),
   };
 };
@@ -297,7 +290,17 @@ export const useLatestMessagePreview = (
     stateSelector,
   );
 
-  const draftAttachments = attachments.length > 0;
+  const draftMessage: DraftMessage | undefined = useMemo(
+    () =>
+      !channel.messageComposer.compositionIsEmpty
+        ? {
+            attachments,
+            id: channel.messageComposer.id,
+            text: draftText,
+          }
+        : undefined,
+    [channel.messageComposer, attachments, draftText],
+  );
 
   const channelConfigExists = typeof channel?.getConfig === 'function';
 
@@ -330,8 +333,7 @@ export const useLatestMessagePreview = (
     return getLatestMessagePreview({
       channel,
       client,
-      draftAttachments,
-      draftText,
+      draftMessage,
       lastMessage: translatedLastMessage,
       pollState,
       readEvents,
@@ -340,8 +342,7 @@ export const useLatestMessagePreview = (
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     channelLastMessageString,
-    draftText,
-    draftAttachments,
+    draftMessage,
     forceUpdate,
     readEvents,
     readStatus,