fix: improve channel preview display hooks and long title issue

Author: khushal87

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

@@ -91,6 +91,7 @@ export const useChannelPreviewDisplayName = <
   const members = channel?.state?.members;
   const channelName = channel?.data?.name;
   const characterLimit = characterLength || DEFAULT_MAX_CHARACTER_LENGTH;
+  const numOfMembers = Object.keys(members || {}).length;
 
   const displayName = useMemo(
     () =>
@@ -100,7 +101,8 @@ export const useChannelPreviewDisplayName = <
         currentUserId,
         members,
       }),
-    [channelName, characterLimit, currentUserId, members],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [channelName, characterLimit, currentUserId, members, numOfMembers],
   );
 
   return displayName;

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

@@ -1,30 +1,9 @@
-import { useMemo } from 'react';
-
-import type { Channel, StreamChat } from 'stream-chat';
+import type { Channel } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
-const getChannelPreviewDisplayPresence = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  channel: Channel<StreamChatGenerics>,
-  client: StreamChat<StreamChatGenerics>,
-) => {
-  const currentUserId = client.userID;
-
-  if (currentUserId) {
-    const members = Object.values(channel.state.members);
-    const otherMembers = members.filter((member) => member.user?.id !== currentUserId);
-
-    if (otherMembers.length === 1) {
-      return !!otherMembers[0].user?.online;
-    }
-  }
-  return false;
-};
-
 /**
  * Hook to set the display avatar presence for channel preview
  * @param {*} channel
@@ -37,17 +16,12 @@ export const useChannelPreviewDisplayPresence = <
   channel: Channel<StreamChatGenerics>,
 ) => {
   const { client } = useChatContext<StreamChatGenerics>();
+  const members = channel.state.members;
+  const membersCount = Object.keys(members).length;
 
-  const currentUserId = client.userID;
-  const members = Object.values(channel.state.members).filter(
-    (member) => !!member.user?.id && !!currentUserId && member.user?.id !== currentUserId,
-  );
-  const channelMemberOnline = members.some((member) => member.user?.online);
+  if (membersCount !== 2) return false;
 
-  const displayPresence = useMemo(() => {
-    return getChannelPreviewDisplayPresence(channel, client);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [channel, client, channelMemberOnline]);
+  const otherMember = Object.values(members).find((member) => member.user?.id !== client.userID);
 
-  return displayPresence;
+  return otherMember?.user?.online ?? false;
 };