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;
+  }
+};

client/src/components/chat-messages-list/chat-message-list.styles.scss

@@ -1,22 +1,22 @@
-.messages {
-  height: 350px;
-  min-height: calc(100% - 10px);
-  max-height: calc(100% - 93px);
-  overflow-y: scroll;
-  overflow-x: hidden;
-}
-@media screen and (max-width: 735px) {
-  .messages {
-    max-height: calc(100% - 105px);
-  }
-}
-.messages::-webkit-scrollbar {
-  width: 8px;
-  background: transparent;
-}
-.messages::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.3);
-}
+// .messages {
+//   height: 300px;
+//   min-height: calc(100% - 10px);
+//   max-height: calc(100% - 93px);
+//   overflow-y: scroll;
+//   overflow-x: hidden;
+// }
+// @media screen and (max-width: 735px) {
+//   .messages {
+//     max-height: calc(100% - 105px);
+//   }
+// }
+// .messages::-webkit-scrollbar {
+//   width: 8px;
+//   background: transparent;
+// }
+// .messages::-webkit-scrollbar-thumb {
+//   background-color: rgba(0, 0, 0, 0.3);
+// }
 .messages ul li {
   display: inline-block;
   clear: both;