fix: useChannelPreviewData types

Author: khushal87

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

@@ -1,23 +1,44 @@
-import { useEffect, useMemo, useState } from 'react';
+import { type SetStateAction, useEffect, useMemo, useState } from 'react';
 
 import throttle from 'lodash/throttle';
-import type { Channel, ChannelState, Event, MessageResponse, StreamChat } from 'stream-chat';
+import type { Channel, Event, LocalMessage, MessageResponse, StreamChat } from 'stream-chat';
 
 import { useIsChannelMuted } from './useIsChannelMuted';
 
 import { useLatestMessagePreview } from './useLatestMessagePreview';
 
 import { useChannelsContext } from '../../../contexts';
+import { useStableCallback } from '../../../hooks';
+
+const setLastMessageThrottleTimeout = 500;
+const setLastMessageThrottleOptions = { leading: true, trailing: true };
+
+const refreshUnreadCountThrottleTimeout = 400;
+const refreshUnreadCountThrottleOptions = setLastMessageThrottleOptions;
+
+type LastMessageType = LocalMessage | MessageResponse;
 
 export const useChannelPreviewData = (
   channel: Channel,
   client: StreamChat,
   forceUpdateOverride?: number,
 ) => {
   const [forceUpdate, setForceUpdate] = useState(0);
-  const [lastMessage, setLastMessage] = useState<
-    ReturnType<ChannelState['formatMessage']> | MessageResponse
-  >(channel.state.messages[channel.state.messages.length - 1]);
+  const [lastMessage, setLastMessageInner] = useState<LastMessageType>(
+    () => channel.state.messages[channel.state.messages.length - 1],
+  );
+  const throttledSetLastMessage = useMemo(
+    () =>
+      throttle(
+        (newLastMessage: SetStateAction<LastMessageType>) => setLastMessageInner(newLastMessage),
+        setLastMessageThrottleTimeout,
+        setLastMessageThrottleOptions,
+      ),
+    [],
+  );
+  const setLastMessage = useStableCallback((newLastMessage: SetStateAction<LastMessageType>) =>
+    throttledSetLastMessage(newLastMessage),
+  );
   const [unread, setUnread] = useState(channel.countUnread());
   const { muted } = useIsChannelMuted(channel);
   const { forceUpdate: contextForceUpdate } = useChannelsContext();
@@ -26,29 +47,50 @@ export const useChannelPreviewData = (
   const channelLastMessage = channel.lastMessage();
   const channelLastMessageString = `${channelLastMessage?.id}${channelLastMessage?.updated_at}`;
 
+  const refreshUnreadCount = useMemo(
+    () =>
+      throttle(
+        () => {
+          if (muted) {
+            setUnread(0);
+          } else {
+            setUnread(channel.countUnread());
+          }
+        },
+        refreshUnreadCountThrottleTimeout,
+        refreshUnreadCountThrottleOptions,
+      ),
+    [channel, muted],
+  );
+
   useEffect(() => {
     const unsubscribe = channel.messageComposer.registerDraftEventSubscriptions();
     return () => unsubscribe();
   }, [channel.messageComposer]);
 
   useEffect(() => {
     const { unsubscribe } = client.on('notification.mark_read', () => {
-      setUnread(channel.countUnread());
+      refreshUnreadCount();
     });
     return unsubscribe;
-  }, [channel, client]);
+  }, [client, refreshUnreadCount]);
 
   useEffect(() => {
-    if (
+    setLastMessage((prevLastMessage) =>
       channelLastMessage &&
-      (channelLastMessage.id !== lastMessage?.id ||
-        channelLastMessage.updated_at !== lastMessage?.updated_at)
-    ) {
-      setLastMessage(channelLastMessage);
-    }
-    const newUnreadCount = channel.countUnread();
-    setUnread(newUnreadCount);
-  }, [channel, channelLastMessage, channelLastMessageString, channelListForceUpdate, lastMessage]);
+      (channelLastMessage.id !== prevLastMessage?.id ||
+        channelLastMessage.updated_at !== prevLastMessage?.updated_at)
+        ? channelLastMessage
+        : prevLastMessage,
+    );
+    refreshUnreadCount();
+  }, [
+    channelLastMessage,
+    channelLastMessageString,
+    channelListForceUpdate,
+    setLastMessage,
+    refreshUnreadCount,
+  ]);
 
   /**
    * This effect listens for the `notification.mark_read` event and sets the unread count to 0
@@ -91,18 +133,6 @@ export const useChannelPreviewData = (
     return unsubscribe;
   }, [client, channel]);
 
-  const refreshUnreadCount = useMemo(
-    () =>
-      throttle(() => {
-        if (muted) {
-          setUnread(0);
-        } else {
-          setUnread(channel.countUnread());
-        }
-      }, 400),
-    [channel, muted],
-  );
-
   /**
    * This effect listens for the `message.new`, `message.updated`, `message.deleted`, `message.undeleted`, and `channel.truncated` events
    */
@@ -118,7 +148,7 @@ export const useChannelPreviewData = (
       const message = event.message;
       if (message && (!message.parent_id || message.show_in_channel)) {
         setLastMessage(message);
-        setUnread(channel.countUnread());
+        refreshUnreadCount();
       }
     };
 
@@ -140,9 +170,13 @@ export const useChannelPreviewData = (
     ];
 
     return () => listeners.forEach((l) => l.unsubscribe());
-  }, [channel, refreshUnreadCount, forceUpdate, channelListForceUpdate]);
+  }, [channel, refreshUnreadCount, forceUpdate, channelListForceUpdate, setLastMessage]);
 
-  const latestMessagePreview = useLatestMessagePreview(channel, forceUpdate, lastMessage);
+  const latestMessagePreview = useLatestMessagePreview(
+    channel,
+    forceUpdate,
+    lastMessage as LocalMessage,
+  );
 
   return { latestMessagePreview, muted, unread };
 };

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

@@ -4,9 +4,8 @@ import { TFunction } from 'i18next';
 import type {
   AttachmentManagerState,
   Channel,
-  ChannelState,
   DraftMessage,
-  MessageResponse,
+  LocalMessage,
   PollState,
   PollVote,
   StreamChat,
@@ -22,10 +21,8 @@ import { useTranslatedMessage } from '../../../hooks/useTranslatedMessage';
 
 import { stringifyMessage } from '../../../utils/utils';
 
-type LatestMessage = ReturnType<ChannelState['formatMessage']> | MessageResponse;
-
 export type LatestMessagePreview = {
-  messageObject: LatestMessage | undefined;
+  messageObject: LocalMessage | undefined;
   previews: {
     bold: boolean;
     text: string;
@@ -48,7 +45,7 @@ const selector = (nextValue: PollState): LatestMessagePreviewSelectorReturnType
 });
 
 const getMessageSenderName = (
-  message: LatestMessage | undefined,
+  message: LocalMessage | undefined,
   currentUserId: string | undefined,
   t: (key: string) => string,
   membersLength: number,
@@ -87,7 +84,7 @@ const getLatestMessageDisplayText = (
   channel: Channel,
   client: StreamChat,
   draftMessage: DraftMessage | undefined,
-  message: LatestMessage | undefined,
+  message: LocalMessage | undefined,
   t: (key: string) => string,
   pollState: LatestMessagePreviewSelectorReturnType | undefined,
 ) => {
@@ -194,16 +191,18 @@ export enum MessageReadStatus {
   NOT_SENT_BY_CURRENT_USER = 0,
   UNREAD = 1,
   READ = 2,
+  DELIVERED = 3,
 }
 
 const getLatestMessageReadStatus = (
   channel: Channel,
   client: StreamChat,
-  message: LatestMessage | undefined,
+  lastMessage: LocalMessage | undefined,
   readEvents: boolean,
 ): MessageReadStatus => {
   const currentUserId = client.userID;
-  if (!message || currentUserId !== message.user?.id || readEvents === false) {
+  const isLastMessageOwn = currentUserId === lastMessage?.user?.id;
+  if (!lastMessage || !isLastMessageOwn || !readEvents) {
     return MessageReadStatus.NOT_SENT_BY_CURRENT_USER;
   }
 
@@ -212,10 +211,10 @@ const getLatestMessageReadStatus = (
     delete readList[currentUserId];
   }
 
-  const messageUpdatedAt = message.updated_at
-    ? typeof message.updated_at === 'string'
-      ? new Date(message.updated_at)
-      : message.updated_at
+  const messageUpdatedAt = lastMessage.updated_at
+    ? typeof lastMessage.updated_at === 'string'
+      ? new Date(lastMessage.updated_at)
+      : lastMessage.updated_at
     : undefined;
 
   return Object.values(readList).some(
@@ -232,7 +231,7 @@ const getLatestMessagePreview = (params: {
   pollState: LatestMessagePreviewSelectorReturnType | undefined;
   readEvents: boolean;
   t: TFunction;
-  lastMessage?: ReturnType<ChannelState['formatMessage']> | MessageResponse;
+  lastMessage?: LocalMessage;
 }) => {
   const { channel, client, draftMessage, lastMessage, pollState, readEvents, t } = params;
 
@@ -282,7 +281,7 @@ const stateSelector = (state: AttachmentManagerState) => ({
 export const useLatestMessagePreview = (
   channel: Channel,
   forceUpdate: number,
-  lastMessage?: ReturnType<ChannelState['formatMessage']> | MessageResponse,
+  lastMessage?: LocalMessage,
 ) => {
   const { client } = useChatContext();
   const { t } = useTranslationContext();
@@ -328,8 +327,6 @@ export const useLatestMessagePreview = (
     return read_events;
   }, [channelConfigExists, channel]);
 
-  const readStatus = getLatestMessageReadStatus(channel, client, translatedLastMessage, readEvents);
-
   const pollId = lastMessage?.poll_id ?? '';
   const poll = client.polls.fromState(pollId);
   const pollState: LatestMessagePreviewSelectorReturnType =
@@ -352,7 +349,6 @@ export const useLatestMessagePreview = (
     draftMessage,
     forceUpdate,
     readEvents,
-    readStatus,
     latestVotesByOption,
     createdBy,
     name,

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

@@ -71,7 +71,7 @@ const MessageTextContainerWithContext = (props: MessageTextContainerPropsWithCon
     },
   } = theme;
 
-  const translatedMessage = useTranslatedMessage(message) as LocalMessage;
+  const translatedMessage = useTranslatedMessage(message);
 
   if (!message.text) {
     return null;
@@ -94,7 +94,7 @@ const MessageTextContainerWithContext = (props: MessageTextContainerPropsWithCon
             ...markdownStyles,
             ...(onlyEmojis ? onlyEmojiMarkdown : {}),
           },
-          message: translatedMessage,
+          message: translatedMessage as LocalMessage,
           messageOverlay,
           messageTextNumberOfLines,
           onLongPress,

package/src/hooks/useTranslatedMessage.ts

@@ -1,10 +1,10 @@
-import type { LocalMessage, MessageResponse, TranslationLanguages } from 'stream-chat';
+import type { LocalMessage, TranslationLanguages } from 'stream-chat';
 
 import { useTranslationContext } from '../contexts/translationContext/TranslationContext';
 
 type TranslationKey = `${TranslationLanguages}_text`;
 
-export const useTranslatedMessage = (message?: MessageResponse | LocalMessage) => {
+export const useTranslatedMessage = (message?: LocalMessage) => {
   const { userLanguage } = useTranslationContext();
 
   const translationKey: TranslationKey = `${userLanguage}_text`;