BOD-14 Fixed some broken UI with temporary hard coded valeus. Added basic Chat tagging features

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

@@ -4,24 +4,33 @@ import ChatMessageListComponent from "../chat-messages-list/chat-message-list.co
 import ChatSendMessage from "../chat-send-message/chat-send-message.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component.jsx";
 import AlertComponent from "../alert/alert.component";
+import ChatConversationTitle from "../chat-conversation-title/chat-conversation-title.component";
 
-export default function ChatConversationComponent({
-  messages,
-  subState,
-  conversation,
-  unreadCount,
-}) {
+export default function ChatConversationComponent({ subState, conversation }) {
   const [loading, error] = subState;
 
   if (loading) return <LoadingSkeleton />;
   if (error) return <AlertComponent message={error.message} type='error' />;
 
+  const unreadCount =
+    (conversation &&
+      conversation &&
+      conversation.messages_aggregate &&
+      conversation.messages_aggregate.aggregate &&
+      conversation.messages_aggregate.aggregate.count) ||
+    0;
+
+  const messages =
+    (conversation && conversation.messages) ||
+    [];
+
   return (
     <div className='chat-conversation'>
       <Badge count={unreadCount}>
-        <ChatSendMessage conversation={conversation} />
         <Card size='small'>
+          <ChatConversationTitle conversation={conversation} />
           <ChatMessageListComponent messages={messages} />
+          <ChatSendMessage conversation={conversation} />
         </Card>
       </Badge>
     </div>

client/src/components/chat-conversation/chat-conversation.container.jsx

@@ -27,28 +27,9 @@ export function ChatConversationContainer({ selectedConversation }) {
   return (
     <ChatConversationComponent
       subState={[loading, error]}
-      unreadCount={
-        (data &&
-          data.conversations_by_pk &&
-          data.conversations_by_pk.messages_aggregate &&
-          data.conversations_by_pk.messages_aggregate.aggregate &&
-          data.conversations_by_pk.messages_aggregate.aggregate.count) ||
-        0
-      }
-      conversation={{
-        conversationId: selectedConversation,
-        phone_num:
-          (data &&
-            data.conversations_by_pk &&
-            data.conversations_by_pk.phone_num) ||
-          "",
-      }}
-      messages={
-        (data &&
-          data.conversations_by_pk &&
-          data.conversations_by_pk.messages) ||
-        []
-      }
+      conversation={data ? data.conversations_by_pk : {}}
+        
+
     />
   );
 }