BOD-14 Cleanup and re-org of some components for messaging.

client/src/components/chat-messages-list/chat-message-list.component.jsx

@@ -0,0 +1,44 @@
+import { CheckCircleOutlined, CheckOutlined } from "@ant-design/icons";
+import React, { useEffect, useRef } from "react";
+
+export default function ChatMessageListComponent({ messages }) {
+  const messagesEndRef = useRef(null);
+
+  const scrollToBottom = () => {
+    console.log("use");
+    !!messagesEndRef.current &&
+      messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+  };
+
+  useEffect(scrollToBottom, [messages]);
+  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 className='messages'>
+      <ul>
+        {messages.map(item => (
+          <li
+            key={item.id}
+            className={`${item.isoutbound ? "replies" : "sent"}`}>
+            <p>
+              {item.text}
+              {StatusRender(item.status)}
+            </p>
+          </li>
+        ))}
+        <li ref={messagesEndRef} />
+      </ul>
+    </div>
+  );
+}