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,36 +20,32 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(setSelectedConversation(conversationId)),
 });
 
-const ChatConversationListComponent = React.forwardRef(
+function ChatConversationListComponent({
-  function ChatConversationListComponent(
-    {
   conversationList,
   selectedConversation,
   setSelectedConversation,
   subscribeToMoreConversations,
-    },
+  loadMoreConversations,
-    ref
+}) {
-  ) {
   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}
+        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>}
@@ -77,14 +75,32 @@ const ChatConversationListComponent = React.forwardRef(
         </div>
         <Badge count={item.messages_aggregate.aggregate.count || 0} />
       </List.Item>
-          )}
+    );
-          footer={<span ref={ref}></span>}
+  };
+
+  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, null, {
+export default connect(
-  forwardRef: true,
+  mapStateToProps,
-})(ChatConversationListComponent);
+  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;
 }

client/src/components/chat-popup/chat-popup.component.jsx

@@ -4,9 +4,9 @@ import {
   ShrinkOutlined,
   SyncOutlined,
 } from "@ant-design/icons";
-import { useQuery, useSubscription } from "@apollo/client";
+import { useLazyQuery, useQuery, useSubscription } from "@apollo/client";
 import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -25,7 +25,6 @@ import ChatConversationContainer from "../chat-conversation/chat-conversation.co
 import ChatNewConversation from "../chat-new-conversation/chat-new-conversation.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import "./chat-popup.styles.scss";
-import { useInView } from "react-intersection-observer";
 
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,
@@ -42,7 +41,6 @@ export function ChatPopupComponent({
 }) {
   const { t } = useTranslation();
   const [pollInterval, setpollInterval] = useState(0);
-  const { ref, inView } = useInView({});
 
   const { data: unreadData } = useSubscription(
     UNREAD_CONVERSATION_COUNT_SUBSCRIPTION
@@ -56,11 +54,10 @@ export function ChatPopupComponent({
   //   }
   // );
 
-  const { loading, data, called, refetch, fetchMore, subscribeToMore } =
+  const [
-    useQuery(CONVERSATION_LIST_QUERY, {
+    getConversations,
-      variables: {
+    { loading, data, called, fetchMore, subscribeToMore },
-        offset: 0,
+  ] = useLazyQuery(CONVERSATION_LIST_QUERY, {
-      },
     fetchPolicy: "cache-and-network",
     nextFetchPolicy: "cache-first",
     skip: !chatVisible,
@@ -77,18 +74,60 @@ export function ChatPopupComponent({
   }, [fcmToken]);
 
   useEffect(() => {
-    if (called && chatVisible) refetch();
+    if (called && chatVisible)
-  }, [chatVisible, called, refetch]);
+      getConversations({
+        variables: {
+          offset: 0,
+        },
+      });
+  }, [chatVisible, called, getConversations]);
 
-  useEffect(() => {
+  const loadMoreConversations = useCallback(() => {
-    if (inView && data && data.conversations) {
+    if (data)
       fetchMore({
         variables: {
           offset: data.conversations.length,
         },
       });
+  }, [data, fetchMore]);
+
+  const subscribeToMoreConversations = useCallback(
+    () =>
+      subscribeToMore({
+        document: CONVERSATION_LIST_SUBSCRIPTION,
+        variables: { offset: 0 },
+        updateQuery: (prev, { subscriptionData }) => {
+          console.log("Hello");
+          if (
+            !subscriptionData.data ||
+            subscriptionData.data.conversations.length === 0
+          )
+            return prev;
+
+          let conversations = prev.conversations;
+          const newConversations = subscriptionData.data.conversations;
+
+          for (const conversation of newConversations) {
+            const index = conversations.findIndex(
+              (prevConversation) => prevConversation.id === conversation.id
+            );
+
+            if (index !== -1) {
+              conversations.splice(index, 1);
+              conversations.unshift(conversation);
+              continue;
             }
-  }, [inView, data, fetchMore]);
+
+            conversation.unshift(conversation);
+          }
+
+          return Object.assign({}, prev, {
+            conversations: conversations,
+          });
+        },
+      }),
+    [subscribeToMore]
+  );
 
   const unreadCount = unreadData?.messages_aggregate.aggregate.count || 0;
 
@@ -105,10 +144,10 @@ export function ChatPopupComponent({
               <Tooltip title={t("messaging.labels.recentonly")}>
                 <InfoCircleOutlined />
               </Tooltip>
-              <SyncOutlined
+              {/* <SyncOutlined
                 style={{ cursor: "pointer" }}
                 onClick={() => refetch()}
-              />
+              /> */}
               {pollInterval > 0 && (
                 <Tag color="yellow">{t("messaging.labels.nopush")}</Tag>
               )}
@@ -125,7 +164,8 @@ export function ChatPopupComponent({
                 ) : (
                   <ChatConversationListComponent
                     conversationList={data ? data.conversations : []}
-                    subscribeToMoreConversations={() => {
+                    loadMoreConversations={loadMoreConversations}
+                    subscribeToMoreConversations={() =>
                       subscribeToMore({
                         document: CONVERSATION_LIST_SUBSCRIPTION,
                         variables: { offset: 0 },
@@ -135,16 +175,33 @@ export function ChatPopupComponent({
                             subscriptionData.data.conversations.length === 0
                           )
                             return prev;
+
+                          let conversations = [...prev.conversations];
                           const newConversations =
                             subscriptionData.data.conversations;
 
+                          for (const conversation of newConversations) {
+                            const index = conversations.findIndex(
+                              (prevConversation) =>
+                                prevConversation.id === conversation.id
+                            );
+
+                            if (index !== -1) {
+                              conversations.splice(index, 1);
+                              conversations.unshift(conversation);
+
+                              continue;
+                            }
+
+                            conversations.unshift(conversation);
+                          }
+
                           return Object.assign({}, prev, {
-                            conversations: [...newConversations],
+                            conversations: conversations,
                           });
                         },
-                      });
+                      })
-                    }}
+                    }
-                    ref={ref}
                   />
                 )}
               </Col>