formatting label for conversation list

packages/desktop/src/components/ConversationList.tsx

@@ -32,6 +32,7 @@ import useTerminal from './Terminal';
 import Conversation from '@nirvana/core/src/models/conversation.model';
 import useAuth from '../providers/AuthProvider';
 import { useImmer } from 'use-immer';
+import ConversationLabel from '../subcomponents/ConversationLabel';
 
 /**
  *
@@ -116,9 +117,9 @@ function ConversationRow({ conversation }: { conversation: Conversation }) {
           <FiCircle />
         </Box>
 
-        <Typography sx={{ mr: 'auto', color: 'GrayText' }} variant={'overline'}>
-          {conversationUsers.map((conversationUser) => conversationUser.displayName).join(', ')}
-        </Typography>
+        <Box sx={{ mr: 'auto', color: 'GrayText' }}>
+          <ConversationLabel users={conversationUsers} conversationName={conversation.name} />
+        </Box>
 
         <ListItemAvatar>
           <AvatarGroup variant={'rounded'}>

packages/desktop/src/subcomponents/ConversationLabel.tsx

@@ -1,15 +1,46 @@
 import React from 'react';
 
 import Conversation from '@nirvana/core/src/models/conversation.model';
+import { User } from '@nirvana/core/src/models/user.model';
+import { Typography } from '@mui/material';
+import useAuth from '../providers/AuthProvider';
+
+type IConversationLabel =
+  | {
+      conversationName?: string;
+      users: User[];
+    }
+  | {
+      conversationName: string;
+      users?: User[];
+    };
 
 /**
  * if there is a name in the conversation, then return that
  * if not, then return first three names
  */
-export default function ConversationLabel({ conversation }: { conversation: Conversation }) {
-  // if (conversation.memberIdsList?.length === 2) {
+export default function ConversationLabel({ conversationName, users }: IConversationLabel) {
+  const { user } = useAuth();
 
-  // }
+  if (conversationName) {
+    return <Typography variant="overline">{conversationName}</Typography>;
+  }
+
+  const filteredUsers = users.filter((convoUser) => convoUser.id !== user.uid);
+
+  if (filteredUsers.length === 1) {
+    const firstName = filteredUsers[0].displayName.split(' ')[0];
+
+    return <Typography variant="overline">{firstName}</Typography>;
+  }
+
+  if (filteredUsers.length > 1) {
+    const firstNames = filteredUsers.map((filteredUser) => filteredUser.displayName.split(' ')[0]);
+
+    const formattedFirstnames = firstNames.slice(0, -1).join(',') + ' and ' + firstNames.slice(-1);
+
+    return <Typography variant="overline">{formattedFirstnames}</Typography>;
+  }
 
   return;
 }