BOD-14 Added virtualization for messages with known bug. Added messages geting marked as read.

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

@@ -1,44 +1,68 @@
 import { CheckCircleOutlined, CheckOutlined } from "@ant-design/icons";
 import React, { useEffect, useRef } from "react";
 import "./chat-message-list.styles.scss";
+import { List, CellMeasurer, CellMeasurerCache } from "react-virtualized";
 
 export default function ChatMessageListComponent({ messages }) {
-  const messagesEndRef = useRef(null);
+  const virtualizedListRef = useRef(null);
+
+  const _cache = new CellMeasurerCache({
+    fixedWidth: true,
+    minHeight: 20,
+  });
 
   const scrollToBottom = () => {
-    !!messagesEndRef.current &&
-      messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+    console.log("SCrolling to", messages.length);
+    !!virtualizedListRef.current &&
+      virtualizedListRef.current.scrollToRow(messages.length - 1);
+
+    //TODO Outstanding isue on virtualization: https://github.com/bvaughn/react-virtualized/issues/1179
+    //Scrolling does not work on this version of React.
   };
 
   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;
-    }
+
+  const _rowRenderer = ({ index, key, parent, style }) => {
+    return (
+      <CellMeasurer cache={_cache} key={key} rowIndex={index} parent={parent}>
+        {({ measure, registerChild }) => (
+          <li
+            ref={registerChild}
+            style={style}
+            className={`${messages[index].isoutbound ? "replies" : "sent"}`}>
+            <p onLoad={measure}>
+              {messages[index].text}
+              {StatusRender(messages[index].status)}
+            </p>
+          </li>
+        )}
+      </CellMeasurer>
+    );
   };
 
   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} />
+        <List
+          ref={virtualizedListRef}
+          width={300}
+          height={300}
+          rowHeight={_cache.rowHeight}
+          rowRenderer={_rowRenderer}
+          rowCount={messages.length}
+        />
       </ul>
     </div>
   );
 }
+
+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;
+  }
+};