Handling null scenarios

Author: vishalnarkhede

src/components/ChannelPreview/hooks/useChannelPreviewDisplayAvatar.js

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

src/components/ChannelPreview/hooks/useChannelPreviewDisplayName.js

@@ -4,19 +4,22 @@ import { ChatContext } from '../../../context';
 export const useChannelPreviewDisplayName = (channel) => {
   const { client } = useContext(ChatContext);
   const [displayName, setDisplayName] = useState(
-    getChannelPreviewDisplayName(channel, client.user.id),
+    getChannelPreviewDisplayName(channel, client),
   );
 
   useEffect(() => {
-    setDisplayName(getChannelPreviewDisplayName(channel, client.user.id));
+    setDisplayName(getChannelPreviewDisplayName(channel, client));
   }, [channel]);
 
   return displayName;
 };
 
-const getChannelPreviewDisplayName = (channel, currentUserId) => {
-  if (typeof channel?.data?.name === 'string') {
-    return channel.data.name;
+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(

src/components/ChannelPreview/hooks/useLatestMessagePreview.js

@@ -29,14 +29,16 @@ const getLatestMessageDisplayDate = (message, tDateTimeParser) => {
 };
 
 const getLatestMessagePreview = (channel, t, tDateTimeParser) => {
-  if (!channel.state.messages || !channel.state.messages.length) {
+  const messages = channel?.state?.messages;
+
+  if (!messages || !messages.length) {
     return {
       created_at: '',
       messageObject: {},
       text: '',
     };
   } else {
-    const message = channel.state.messages[channel.state.messages.length - 1];
+    const message = messages[messages.length - 1];
 
     return {
       created_at: getLatestMessageDisplayDate(message, tDateTimeParser),