BOD-14 Functional 2 way messaging from app.

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

@@ -1,4 +1,4 @@
-import { Button, Card } from "antd";
+import { Button, Card, Badge } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -25,24 +25,26 @@ const mapDispatchToProps = dispatch => ({
 export function ChatConversationComponent({
   conversation,
   toggleConversationVisible,
-  closeConversation
+  closeConversation,
+  messages,
+  subState
 }) {
-  const messages = [];
-
   return (
-    <div>
+    <Badge count={messages.length}>
       <Card
         title={
           conversation.open ? (
             <div style={{ display: "flex" }}>
               <div
-                onClick={() => toggleConversationVisible(conversation.phone)}>
-                <PhoneFormatter>{conversation.phone}</PhoneFormatter>
+                onClick={() =>
+                  toggleConversationVisible(conversation.phone_num)
+                }>
+                <PhoneFormatter>{conversation.phone_num}</PhoneFormatter>
               </div>
               <Button
                 type='danger'
                 shape='circle-outline'
-                onClick={() => closeConversation(conversation.phone)}>
+                onClick={() => closeConversation(conversation.phone_num)}>
                 X
               </Button>
             </div>
@@ -57,12 +59,13 @@ export function ChatConversationComponent({
           <ChatConversationOpenComponent
             messages={messages}
             conversation={conversation}
+            subState={subState}
           />
         ) : (
           <ChatConversationClosedComponent conversation={conversation} />
         )}
       </Card>
-    </div>
+    </Badge>
   );
 }