fix: improve channel preview display hooks and long title issue

Author: khushal87

Diff for: package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayAvatar.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 
 import type { Channel, StreamChat } from 'stream-chat';
 
@@ -61,19 +61,10 @@ export const useChannelPreviewDisplayAvatar = <
 ) => {
   const { client } = useChatContext<StreamChatGenerics>();
 
-  const channelData = channel?.data;
-  const image = channelData?.image;
-  const name = channelData?.name;
-  const id = client?.user?.id;
-
-  const [displayAvatar, setDisplayAvatar] = useState(
-    getChannelPreviewDisplayAvatar(channel, client),
+  const displayAvatar = useMemo(
+    () => getChannelPreviewDisplayAvatar(channel, client),
+    [channel, client],
   );
 
-  useEffect(() => {
-    setDisplayAvatar(getChannelPreviewDisplayAvatar(channel, client));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id, image, name]);
-
   return displayAvatar;
 };

Diff for: package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayName.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 
 import type { Channel, ChannelMemberResponse } from 'stream-chat';
 
@@ -26,7 +26,9 @@ export const getChannelPreviewDisplayName = <
   members?: Channel<StreamChatGenerics>['state']['members'];
 }): string => {
   if (channelName) {
-    return channelName;
+    return channelName.length > characterLimit
+      ? `${channelName.slice(0, characterLimit - ELLIPSIS.length)}${ELLIPSIS}`
+      : channelName;
   }
 
   const channelMembers = Object.values(members || {});
@@ -83,33 +85,23 @@ export const useChannelPreviewDisplayName = <
   const { client } = useChatContext<StreamChatGenerics>();
   const { vw } = useViewport();
 
-  const DEFAULT_MAX_CHARACTER_LENGTH = (vw(100) - 16) / 6;
+  const DEFAULT_MAX_CHARACTER_LENGTH = Math.floor((vw(100) - 16) / 6);
 
   const currentUserId = client?.userID;
   const members = channel?.state?.members;
-  const numOfMembers = Object.keys(members || {}).length;
   const channelName = channel?.data?.name;
   const characterLimit = characterLength || DEFAULT_MAX_CHARACTER_LENGTH;
-  const [displayName, setDisplayName] = useState(
-    getChannelPreviewDisplayName({
-      channelName,
-      characterLimit,
-      currentUserId,
-      members,
-    }),
-  );
 
-  useEffect(() => {
-    setDisplayName(
+  const displayName = useMemo(
+    () =>
       getChannelPreviewDisplayName({
         channelName,
         characterLimit,
         currentUserId,
         members,
       }),
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [channelName, currentUserId, characterLimit, numOfMembers]);
+    [channelName, characterLimit, currentUserId, members],
+  );
 
   return displayName;
 };

Diff for: package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayPresence.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 
 import type { Channel, StreamChat } from 'stream-chat';
 
@@ -44,11 +44,10 @@ export const useChannelPreviewDisplayPresence = <
   );
   const channelMemberOnline = members.some((member) => member.user?.online);
 
-  const [displayPresence, setDisplayPresence] = useState(false);
-
-  useEffect(() => {
-    setDisplayPresence(getChannelPreviewDisplayPresence(channel, client));
-  }, [channel, channelMemberOnline, client]);
+  const displayPresence = useMemo(() => {
+    return getChannelPreviewDisplayPresence(channel, client);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [channel, client, channelMemberOnline]);
 
   return displayPresence;
 };

Diff for: package/src/components/ChannelPreview/hooks/useIsChannelMuted.ts

@@ -6,6 +6,12 @@ import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
+const defaultMuteStatus = {
+  createdAt: null,
+  expiresAt: null,
+  muted: false,
+};
+
 export const useIsChannelMuted = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
@@ -24,5 +30,5 @@ export const useIsChannelMuted = <
     return () => client.off('notification.channel_mutes_updated', handleEvent);
   }, [channel, client, muted]);
 
-  return muted || { createdAt: null, expiresAt: null, muted: false };
+  return muted ?? defaultMuteStatus;
 };

Diff for: package/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { TFunction } from 'i18next';
 import type {
@@ -286,19 +286,6 @@ export const useLatestMessagePreview = <
     : '';
 
   const [readEvents, setReadEvents] = useState(true);
-  const [latestMessagePreview, setLatestMessagePreview] = useState<
-    LatestMessagePreview<StreamChatGenerics>
-  >({
-    created_at: '',
-    messageObject: undefined,
-    previews: [
-      {
-        bold: false,
-        text: '',
-      },
-    ],
-    status: MessageReadStatus.NOT_SENT_BY_CURRENT_USER,
-  });
 
   const readStatus = getLatestMessageReadStatus(channel, client, translatedLastMessage, readEvents);
 
@@ -319,29 +306,25 @@ export const useLatestMessagePreview = <
     useStateStore(poll?.state, selector) ?? {};
   const { createdBy, latestVotesByOption, name } = pollState;
 
-  useEffect(
-    () =>
-      setLatestMessagePreview(
-        getLatestMessagePreview({
-          channel,
-          client,
-          lastMessage: translatedLastMessage,
-          pollState,
-          readEvents,
-          t,
-        }),
-      ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      channelLastMessageString,
-      forceUpdate,
+  const latestMessagePreview = useMemo(() => {
+    return getLatestMessagePreview({
+      channel,
+      client,
+      lastMessage: translatedLastMessage,
+      pollState,
       readEvents,
-      readStatus,
-      latestVotesByOption,
-      createdBy,
-      name,
-    ],
-  );
+      t,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    channelLastMessageString,
+    forceUpdate,
+    readEvents,
+    readStatus,
+    latestVotesByOption,
+    createdBy,
+    name,
+  ]);
 
   return latestMessagePreview;
 };