Merge pull request #267 from GetStream/vishal/channel-preview-messenger-tests

Optimizing ChannelPreview hooks

Author: DanC5

src/components/ChannelPreview/hooks/useChannelPreviewDisplayAvatar.js

@@ -9,32 +9,41 @@ import { ChatContext } from '../../../context';
  */
 export const useChannelPreviewDisplayAvatar = (channel) => {
   const { client } = useContext(ChatContext);
-  const [displayAvatar, setDisplayAvatar] = useState({});
+  const [displayAvatar, setDisplayAvatar] = useState(
+    getChannelPreviewDisplayAvatar(channel, client),
+  );
 
   useEffect(() => {
-    if (channel.data.image) {
-      setDisplayAvatar({
-        image: channel.data.image,
-        name: channel.data.name,
-      });
-    } else {
-      const members = Object.values(channel?.state?.members || {});
-      const otherMembers = members.filter(
-        (member) => member.user.id !== client.user.id,
-      );
-
-      if (otherMembers.length === 1) {
-        setDisplayAvatar({
-          image: otherMembers[0].user.image,
-          name: channel.data.name || otherMembers[0].user.name,
-        });
-      } else {
-        setDisplayAvatar({
-          name: channel.data.name,
-        });
-      }
-    }
+    setDisplayAvatar(getChannelPreviewDisplayAvatar(channel, client));
   }, [channel]);
 
   return displayAvatar;
 };
+
+const getChannelPreviewDisplayAvatar = (channel, client) => {
+  const currentUserId = client?.user?.id;
+  const channelName = channel?.data?.name;
+  const channelImage = channel?.data?.image;
+
+  if (channelImage) {
+    return {
+      image: channelImage,
+      name: channelName,
+    };
+  } else if (currentUserId) {
+    const members = Object.values(channel?.state?.members || {});
+    const otherMembers = members.filter(
+      (member) => member.user.id !== currentUserId,
+    );
+
+    if (otherMembers.length === 1) {
+      return {
+        image: otherMembers[0].user.image,
+        name: channelName || otherMembers[0].user.name,
+      };
+    }
+  }
+  return {
+    name: channelName,
+  };
+};

src/components/ChannelPreview/hooks/useChannelPreviewDisplayName.js

@@ -3,23 +3,32 @@ import { ChatContext } from '../../../context';
 
 export const useChannelPreviewDisplayName = (channel) => {
   const { client } = useContext(ChatContext);
-  const [displayName, setDisplayName] = useState('');
+  const [displayName, setDisplayName] = useState(
+    getChannelPreviewDisplayName(channel, client),
+  );
 
   useEffect(() => {
-    if (typeof channel?.data?.name === 'string') {
-      setDisplayName(channel.data.name);
-    } else {
-      const members = Object.values(channel?.state?.members || {});
-      const otherMembers = members.filter(
-        (member) => member.user.id !== client.user.id,
-      );
-      const name = otherMembers
-        .map((member) => member.user.name || member.user.id || 'Unnamed User')
-        .join(', ');
-
-      setDisplayName(name);
-    }
+    setDisplayName(getChannelPreviewDisplayName(channel, client));
   }, [channel]);
 
   return displayName;
 };
+
+const getChannelPreviewDisplayName = (channel, client) => {
+  const currentUserId = client?.user?.id;
+  const channelName = channel?.data?.name;
+
+  if (typeof channelName === 'string') {
+    return channelName;
+  } else {
+    const members = Object.values(channel?.state?.members || {});
+    const otherMembers = members.filter(
+      (member) => member.user.id !== currentUserId,
+    );
+    const name = otherMembers
+      .map((member) => member.user.name || member.user.id || 'Unnamed User')
+      .join(', ');
+
+    return name;
+  }
+};

src/components/ChannelPreview/hooks/useLatestMessagePreview.js

@@ -28,6 +28,26 @@ const getLatestMessageDisplayDate = (message, tDateTimeParser) => {
   }
 };
 
+const getLatestMessagePreview = (channel, t, tDateTimeParser) => {
+  const messages = channel?.state?.messages;
+
+  if (!messages || !messages.length) {
+    return {
+      created_at: '',
+      messageObject: {},
+      text: '',
+    };
+  } else {
+    const message = messages[messages.length - 1];
+
+    return {
+      created_at: getLatestMessageDisplayDate(message, tDateTimeParser),
+      messageObject: { ...message },
+      text: getLatestMessageDisplayText(message, t),
+    };
+  }
+};
+
 /**
  * Hook to set the display preview for latest message on channel.
  *
@@ -37,24 +57,14 @@ const getLatestMessageDisplayDate = (message, tDateTimeParser) => {
  */
 export const useLatestMessagePreview = (channel, lastMessage) => {
   const { t, tDateTimeParser } = useContext(TranslationContext);
-  const [latestMessagePreview, setLatestMessagePreview] = useState({});
+  const [latestMessagePreview, setLatestMessagePreview] = useState(
+    getLatestMessagePreview(channel, t, tDateTimeParser),
+  );
 
   useEffect(() => {
-    if (!channel.state.messages || !channel.state.messages.length) {
-      setLatestMessagePreview({
-        created_at: '',
-        messageObject: {},
-        text: '',
-      });
-    } else {
-      const message = channel.state.messages[channel.state.messages.length - 1];
-
-      setLatestMessagePreview({
-        created_at: getLatestMessageDisplayDate(message, tDateTimeParser),
-        messageObject: { ...message },
-        text: getLatestMessageDisplayText(message, t),
-      });
-    }
+    setLatestMessagePreview(
+      getLatestMessagePreview(channel, t, tDateTimeParser),
+    );
   }, [channel, lastMessage]);
 
   return latestMessagePreview;