Refactored Messaging as a part of BOD-14. Breaking changes remain.

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

@@ -1,17 +1,17 @@
 import { CheckCircleOutlined, CheckOutlined } from "@ant-design/icons";
 import React, { useEffect, useRef } from "react";
+import "./chat-message-list.styles.scss";
 
 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 => {
+  const StatusRender = (status) => {
     switch (status) {
       case "sent":
         return <CheckOutlined style={{ margin: "2px", float: "right" }} />;
@@ -27,7 +27,7 @@ export default function ChatMessageListComponent({ messages }) {
   return (
     <div className='messages'>
       <ul>
-        {messages.map(item => (
+        {messages.map((item) => (
           <li
             key={item.id}
             className={`${item.isoutbound ? "replies" : "sent"}`}>