IO-2208 added virtualization to conversation list

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

@@ -7,6 +7,8 @@ import { selectSelectedConversation } from "../../redux/messaging/messaging.sele
 import { TimeAgoFormatter } from "../../utils/DateFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import { List as VirtualizedList, AutoSizer } from "react-virtualized";
+
 import "./chat-conversation-list.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
@@ -18,73 +20,87 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(setSelectedConversation(conversationId)),
 });
 
-const ChatConversationListComponent = React.forwardRef(
-  function ChatConversationListComponent(
-    {
-      conversationList,
-      selectedConversation,
-      setSelectedConversation,
-      subscribeToMoreConversations,
-    },
-    ref
-  ) {
-    useEffect(
-      () => subscribeToMoreConversations(),
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      []
-    );
+function ChatConversationListComponent({
+  conversationList,
+  selectedConversation,
+  setSelectedConversation,
+  subscribeToMoreConversations,
+  loadMoreConversations,
+}) {
+  useEffect(
+    () => subscribeToMoreConversations(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const rowRenderer = ({ index, key, style }) => {
+    const item = conversationList[index];
 
     return (
-      <div className="chat-list-container">
-        <List
-          bordered
-          dataSource={conversationList}
-          renderItem={(item) => (
-            <List.Item
-              key={item.id}
-              onClick={() => setSelectedConversation(item.id)}
-              className={`chat-list-item ${
-                item.id === selectedConversation
-                  ? "chat-list-selected-conversation"
-                  : null
-              }`}
-            >
-              <div sryle={{ display: "inline-block" }}>
-                {item.label && <div className="chat-name">{item.label}</div>}
-                {item.job_conversations.length > 0 ? (
-                  <div className="chat-name">
-                    {item.job_conversations.map((j, idx) => (
-                      <div key={idx}>
-                        <OwnerNameDisplay ownerObject={j.job} />
-                      </div>
-                    ))}
-                  </div>
-                ) : (
-                  <PhoneFormatter>{item.phone_num}</PhoneFormatter>
-                )}
-              </div>
-              <div sryle={{ display: "inline-block" }}>
-                <div>
-                  {item.job_conversations.length > 0
-                    ? item.job_conversations.map((j, idx) => (
-                        <Tag key={idx} className="ro-number-tag">
-                          {j.job.ro_number}
-                        </Tag>
-                      ))
-                    : null}
+      <List.Item
+        key={key}
+        onClick={() => setSelectedConversation(item.id)}
+        className={`chat-list-item ${
+          item.id === selectedConversation
+            ? "chat-list-selected-conversation"
+            : null
+        }`}
+        style={style}
+      >
+        <div sryle={{ display: "inline-block" }}>
+          {item.label && <div className="chat-name">{item.label}</div>}
+          {item.job_conversations.length > 0 ? (
+            <div className="chat-name">
+              {item.job_conversations.map((j, idx) => (
+                <div key={idx}>
+                  <OwnerNameDisplay ownerObject={j.job} />
                 </div>
-                <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
-              </div>
-              <Badge count={item.messages_aggregate.aggregate.count || 0} />
-            </List.Item>
+              ))}
+            </div>
+          ) : (
+            <PhoneFormatter>{item.phone_num}</PhoneFormatter>
           )}
-          footer={<span ref={ref}></span>}
-        />
-      </div>
+        </div>
+        <div sryle={{ display: "inline-block" }}>
+          <div>
+            {item.job_conversations.length > 0
+              ? item.job_conversations.map((j, idx) => (
+                  <Tag key={idx} className="ro-number-tag">
+                    {j.job.ro_number}
+                  </Tag>
+                ))
+              : null}
+          </div>
+          <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
+        </div>
+        <Badge count={item.messages_aggregate.aggregate.count || 0} />
+      </List.Item>
     );
-  }
-);
+  };
 
-export default connect(mapStateToProps, mapDispatchToProps, null, {
-  forwardRef: true,
-})(ChatConversationListComponent);
+  return (
+    <div className="chat-list-container">
+      <AutoSizer>
+        {({ height, width }) => (
+          <VirtualizedList
+            height={height}
+            width={width}
+            rowCount={conversationList.length}
+            rowHeight={60}
+            rowRenderer={rowRenderer}
+            onScroll={({ scrollTop, scrollHeight, clientHeight }) => {
+              if (scrollTop + clientHeight === scrollHeight) {
+                loadMoreConversations();
+              }
+            }}
+          />
+        )}
+      </AutoSizer>
+    </div>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ChatConversationListComponent);

client/src/components/chat-conversation-list/chat-conversation-list.styles.scss

@@ -3,8 +3,9 @@
 }
 .chat-list-container {
   flex: 1;
-  overflow: auto;
+  overflow: hidden;
   height: 100%;
+  border: 1px solid gainsboro;
 }
 
 .chat-list-item {
@@ -21,4 +22,6 @@
   .ro-number-tag {
     align-self: baseline;
   }
+  padding: 12px 24px;
+  border-bottom: 1px solid gainsboro;
 }