Fixed up some messaging layout issues. BOD-78

client/src/components/chat-conversation-list/chat-conversation-list.component.jsx

@@ -1,10 +1,12 @@
-import { Badge, List } from "antd";
+import { Badge, List, Avatar } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { setSelectedConversation } from "../../redux/messaging/messaging.actions";
 import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
 import { createStructuredSelector } from "reselect";
 import "./chat-conversation-list.styles.scss";
+import { useTranslation } from "react-i18next";
+import PhoneFormatter from "../../utils/PhoneFormatter";
 
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,
@@ -20,9 +22,12 @@ export function ChatConversationListComponent({
   selectedConversation,
   setSelectedConversation,
 }) {
+  const { t } = useTranslation();
+
   return (
     <List
       bordered
+      size="small"
       dataSource={conversationList}
       renderItem={(item) => (
         <List.Item
@@ -31,8 +36,25 @@ export function ChatConversationListComponent({
             item.id === selectedConversation
               ? "chat-list-selected-conversation"
               : null
-          }`}>
-          {item.phone_num}
+          }`}
+        >
+          <List.Item.Meta
+            title={<PhoneFormatter>{item.phone_num}</PhoneFormatter>}
+            description={
+              item.job_conversations.length > 0 ? (
+                <div>
+                  {item.job_conversations.map(
+                    (j) =>
+                      `${j.job.ownr_fn || ""} ${j.job.ownr_ln || ""} ${
+                        j.job.ownr_co_nm || ""
+                      }`
+                  )}
+                </div>
+              ) : (
+                t("messaging.labels.nojobs")
+              )
+            }
+          />
           <Badge count={item.messages_aggregate.aggregate.count || 0} />
         </List.Item>
       )}