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

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

@@ -1,8 +1,8 @@
-import React, { useEffect, useRef } from "react";
+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";
-import { CheckOutlined, CheckCircleOutlined } from "@ant-design/icons";
+import ChatMessageListComponent from "../chat-messages-list/chat-message-list.component";
 
 export default function ChatConversationOpenComponent({
   conversation,
@@ -10,49 +10,13 @@ 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 className='chat-overlay-open'>
-      <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>
+      <ChatMessageListComponent messages={messages} />
       <ChatSendMessage conversation={conversation} />
     </div>
   );