BOD-14 Functional 2 way messaging from app.

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>