BOD-14 WIP. CSS issues present with 2 way texting, but working live.

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

@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useEffect, useRef } 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";
+import { CheckOutlined, CheckCircleOutlined } from "@ant-design/icons";
 
 export default function ChatConversationOpenComponent({
   conversation,
@@ -9,24 +10,47 @@ export default function ChatConversationOpenComponent({
   subState
 }) {
   const [loading, error] = subState;
+  const messagesEndRef = useRef(null);
+
+  const scrollToBottom = () => {
+    console.log("use");
+    !!messagesEndRef.current &&
+      messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+  };
+
+  useEffect(scrollToBottom, [messages]);
+
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type='error' />;
 
+  const StatusRender = status => {
+    switch (status) {
+      case "sent":
+        return <CheckOutlined style={{ margin: "2px", float: "right" }} />;
+      case "delivered":
+        return (
+          <CheckCircleOutlined style={{ margin: "2px", float: "right" }} />
+        );
+      default:
+        return null;
+    }
+  };
+
   return (
-    <div>
-      <div className='messages' style={{ height: "400px" }}>
+    <div className='chat-overlay-open'>
+      <div className='messages'>
         <ul>
           {messages.map(item => (
             <li
               key={item.id}
               className={`${item.isoutbound ? "replies" : "sent"}`}>
-              <div>
-                <p>
-                  {item.text} <br /> <i>{item.status}</i>
-                </p>
-              </div>
+              <p>
+                {item.text}
+                {StatusRender(item.status)}
+              </p>
             </li>
           ))}
+          <li ref={messagesEndRef} />
         </ul>
       </div>
       <ChatSendMessage conversation={conversation} />