IO-2208 Added pagination and subscription to chat

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

@@ -1,5 +1,5 @@
 import { Badge, List, Tag } from "antd";
-import React from "react";
+import React, { useEffect } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { setSelectedConversation } from "../../redux/messaging/messaging.actions";
@@ -18,60 +18,73 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(setSelectedConversation(conversationId)),
 });
 
-export function ChatConversationListComponent({
-  conversationList,
-  selectedConversation,
-  setSelectedConversation,
-}) {
-  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}
+const ChatConversationListComponent = React.forwardRef(
+  function ChatConversationListComponent(
+    {
+      conversationList,
+      selectedConversation,
+      setSelectedConversation,
+      subscribeToMoreConversations,
+    },
+    ref
+  ) {
+    useEffect(
+      () => subscribeToMoreConversations(),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      []
+    );
+
+    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>
-              <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
-            </div>
-            <Badge count={item.messages_aggregate.aggregate.count || 0} />
-          </List.Item>
-        )}
-      />
-    </div>
-  );
-}
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ChatConversationListComponent);
+              <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>
+          )}
+          footer={<span ref={ref}></span>}
+        />
+      </div>
+    );
+  }
+);
+
+export default connect(mapStateToProps, mapDispatchToProps, null, {
+  forwardRef: true,
+})(ChatConversationListComponent);

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

@@ -4,7 +4,7 @@ import {
   ShrinkOutlined,
   SyncOutlined,
 } from "@ant-design/icons";
-import { useQuery } from "@apollo/client";
+import { useQuery, useSubscription } from "@apollo/client";
 import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -12,7 +12,8 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
   CONVERSATION_LIST_QUERY,
-  UNREAD_CONVERSATION_COUNT,
+  CONVERSATION_LIST_SUBSCRIPTION,
+  UNREAD_CONVERSATION_COUNT_SUBSCRIPTION,
 } from "../../graphql/conversations.queries";
 import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
 import {
@@ -24,6 +25,7 @@ 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,
@@ -40,19 +42,29 @@ export function ChatPopupComponent({
 }) {
   const { t } = useTranslation();
   const [pollInterval, setpollInterval] = useState(0);
+  const { ref, inView } = useInView({});
 
-  const { data: unreadData } = useQuery(UNREAD_CONVERSATION_COUNT, {
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only",
-    ...(pollInterval > 0 ? { pollInterval } : {}),
-  });
+  const { data: unreadData } = useSubscription(
+    UNREAD_CONVERSATION_COUNT_SUBSCRIPTION
+  );
 
-  const { loading, data, refetch, called } = useQuery(CONVERSATION_LIST_QUERY, {
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only",
-    skip: !chatVisible,
-    ...(pollInterval > 0 ? { pollInterval } : {}),
-  });
+  // const { data: unreadData, refetch: unreadRefetch } = useQuery(
+  //   UNREAD_CONVERSATION_COUNT,
+  //   {
+  //     fetchPolicy: "network-only",
+  //     nextFetchPolicy: "network-only",
+  //   }
+  // );
+
+  const { loading, data, called, refetch, fetchMore, subscribeToMore } =
+    useQuery(CONVERSATION_LIST_QUERY, {
+      variables: {
+        offset: 0,
+      },
+      fetchPolicy: "cache-and-network",
+      nextFetchPolicy: "cache-first",
+      skip: !chatVisible,
+    });
 
   const fcmToken = sessionStorage.getItem("fcmtoken");
 
@@ -68,12 +80,15 @@ export function ChatPopupComponent({
     if (called && chatVisible) refetch();
   }, [chatVisible, called, refetch]);
 
-  // const unreadCount = data
-  //   ? data.conversations.reduce(
-  //       (acc, val) => val.messages_aggregate.aggregate.count + acc,
-  //       0
-  //     )
-  //   : 0;
+  useEffect(() => {
+    if (inView && data && data.conversations) {
+      fetchMore({
+        variables: {
+          offset: data.conversations.length,
+        },
+      });
+    }
+  }, [inView, data, fetchMore]);
 
   const unreadCount = unreadData?.messages_aggregate.aggregate.count || 0;
 
@@ -110,6 +125,26 @@ export function ChatPopupComponent({
                 ) : (
                   <ChatConversationListComponent
                     conversationList={data ? data.conversations : []}
+                    subscribeToMoreConversations={() => {
+                      subscribeToMore({
+                        document: CONVERSATION_LIST_SUBSCRIPTION,
+                        variables: { offset: 0 },
+                        updateQuery: (prev, { subscriptionData }) => {
+                          if (
+                            !subscriptionData.data ||
+                            subscriptionData.data.conversations.length === 0
+                          )
+                            return prev;
+                          const newConversations =
+                            subscriptionData.data.conversations;
+
+                          return Object.assign({}, prev, {
+                            conversations: [...newConversations],
+                          });
+                        },
+                      });
+                    }}
+                    ref={ref}
                   />
                 )}
               </Col>