BOD-14 Functional 2 way messaging from app.

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

@@ -1,7 +1,11 @@
 import { Button } from "antd";
 import React from "react";
 import { connect } from "react-redux";
-import { closeConversation, sendMessage, toggleConversationVisible } from "../../redux/messaging/messaging.actions";
+import {
+  closeConversation,
+  sendMessage,
+  toggleConversationVisible
+} from "../../redux/messaging/messaging.actions";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 
 const mapDispatchToProps = dispatch => ({
@@ -18,13 +22,13 @@ function ChatConversationClosedComponent({
 }) {
   return (
     <div style={{ display: "flex" }}>
-      <div onClick={() => toggleConversationVisible(conversation.phone)}>
-        <PhoneFormatter>{conversation.phone}</PhoneFormatter>
+      <div onClick={() => toggleConversationVisible(conversation.phone_num)}>
+        <PhoneFormatter>{conversation.phone_num}</PhoneFormatter>
       </div>
       <Button
         type='dashed'
         shape='circle-outline'
-        onClick={() => closeConversation(conversation.phone)}>
+        onClick={() => closeConversation(conversation.phone_num)}>
         X
       </Button>
     </div>

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>
   );
 }
 

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

@@ -1,17 +1,33 @@
+import { useSubscription } from "@apollo/react-hooks";
 import React from "react";
-import ChatConversationComponent from "./chat-conversation.component";
-
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { MESSAGES_SUBSCRIPTION } from "../../graphql/messages.queries";
+import ChatConversationComponent from "./chat-conversation.component";
+
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
 });
 const mapDispatchToProps = dispatch => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
+
+export function ChatConversationContainer({ conversation }) {
+  console.log("conversation", conversation);
+  const { loading, error, data } = useSubscription(MESSAGES_SUBSCRIPTION, {
+    variables: { conversationId: conversation.id }
+  });
+
+  return (
+    <ChatConversationComponent
+      subState={[loading, error]}
+      conversation={conversation}
+      messages={(data && data.messages) || []}
+    />
+  );
+}
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(function ChatConversationContainer({ conversation }) {
-  return <ChatConversationComponent conversation={conversation} />;
-});
+)(ChatConversationContainer);

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

@@ -1,10 +1,16 @@
 import React from "react";
+import AlertComponent from "../alert/alert.component";
 import ChatSendMessage from "../chat-send-message/chat-send-message.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+
 export default function ChatConversationOpenComponent({
   conversation,
-  messages
+  messages,
+  subState
 }) {
-  if (!!!messages) return <div>No Messages</div>;
+  const [loading, error] = subState;
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type='error' />;
 
   return (
     <div>
@@ -12,11 +18,13 @@ export default function ChatConversationOpenComponent({
         <ul>
           {messages.map(item => (
             <li
-              key={item.sid}
-              className={`${
-                item.direction === "inbound" ? "sent" : "replies"
-              }`}>
-              <p> {item.body}</p>
+              key={item.id}
+              className={`${item.isoutbound ? "replies" : "sent"}`}>
+              <div>
+                <p>
+                  {item.text} <br /> <i>{item.status}</i>
+                </p>
+              </div>
             </li>
           ))}
         </ul>