Merge branch 'feature/IO-2208-chat-affix' into release/2023-06-09

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

@@ -29,15 +29,8 @@ function ChatConversationListComponent({
   conversationList,
   selectedConversation,
   setSelectedConversation,
-  subscribeToMoreConversations,
   loadMoreConversations,
 }) {
-  useEffect(
-    () => subscribeToMoreConversations(),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-
   const cache = new CellMeasurerCache({
     fixedWidth: true,
     defaultHeight: 60,

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

@@ -4,7 +4,7 @@ import {
   ShrinkOutlined,
   SyncOutlined,
 } from "@ant-design/icons";
-import { useLazyQuery, useSubscription } from "@apollo/client";
+import { useLazyQuery, useQuery } from "@apollo/client";
 import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
 import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -13,7 +13,7 @@ import { createStructuredSelector } from "reselect";
 import {
   CONVERSATION_LIST_QUERY,
   CONVERSATION_LIST_SUBSCRIPTION,
-  UNREAD_CONVERSATION_COUNT_SUBSCRIPTION,
+  UNREAD_CONVERSATION_COUNT,
 } from "../../graphql/conversations.queries";
 import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
 import {
@@ -42,19 +42,20 @@ export function ChatPopupComponent({
   const { t } = useTranslation();
   const [pollInterval, setpollInterval] = useState(0);
 
-  const { data: unreadData } = useSubscription(
-    UNREAD_CONVERSATION_COUNT_SUBSCRIPTION
-  );
-
-  const [
-    getConversations,
-    { loading, data, called, refetch, fetchMore, subscribeToMore },
-  ] = useLazyQuery(CONVERSATION_LIST_QUERY, {
+  const { data: unreadData } = useQuery(UNREAD_CONVERSATION_COUNT, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
-    skip: !chatVisible,
+    ...(pollInterval > 0 ? { pollInterval } : {}),
   });
 
+  const [getConversations, { loading, data, refetch, fetchMore }] =
+    useLazyQuery(CONVERSATION_LIST_QUERY, {
+      fetchPolicy: "network-only",
+      nextFetchPolicy: "network-only",
+      skip: !chatVisible,
+      ...(pollInterval > 0 ? { pollInterval } : {}),
+    });
+
   const fcmToken = sessionStorage.getItem("fcmtoken");
 
   useEffect(() => {
@@ -66,13 +67,13 @@ export function ChatPopupComponent({
   }, [fcmToken]);
 
   useEffect(() => {
-    if (called && chatVisible)
+    if (chatVisible)
       getConversations({
         variables: {
           offset: 0,
         },
       });
-  }, [chatVisible, called, getConversations]);
+  }, [chatVisible, getConversations]);
 
   const loadMoreConversations = useCallback(() => {
     if (data)
@@ -119,43 +120,6 @@ export function ChatPopupComponent({
                   <ChatConversationListComponent
                     conversationList={data ? data.conversations : []}
                     loadMoreConversations={loadMoreConversations}
-                    subscribeToMoreConversations={() =>
-                      subscribeToMore({
-                        document: CONVERSATION_LIST_SUBSCRIPTION,
-                        variables: { offset: 0 },
-                        updateQuery: (prev, { subscriptionData }) => {
-                          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;
-                            }
-
-                            conversations.unshift(conversation);
-                          }
-
-                          return Object.assign({}, prev, {
-                            conversations: conversations,
-                          });
-                        },
-                      })
-                    }
                   />
                 )}
               </Col>

client/src/graphql/conversations.queries.js

@@ -1,37 +1,5 @@
 import { gql } from "@apollo/client";
 
-export const CONVERSATION_LIST_SUBSCRIPTION = gql`
-  subscription CONVERSATION_LIST_SUBSCRIPTION($offset: Int!) {
-    conversations(
-      order_by: { updated_at: desc }
-      limit: 1
-      offset: $offset
-      where: { archived: { _eq: false } }
-    ) {
-      phone_num
-      id
-      updated_at
-      unreadcnt
-      messages_aggregate(
-        where: { read: { _eq: false }, isoutbound: { _eq: false } }
-      ) {
-        aggregate {
-          count
-        }
-      }
-      job_conversations {
-        job {
-          id
-          ro_number
-          ownr_fn
-          ownr_ln
-          ownr_co_nm
-        }
-      }
-    }
-  }
-`;
-
 export const UNREAD_CONVERSATION_COUNT = gql`
   query UNREAD_CONVERSATION_COUNT {
     messages_aggregate(
@@ -44,18 +12,6 @@ export const UNREAD_CONVERSATION_COUNT = gql`
   }
 `;
 
-export const UNREAD_CONVERSATION_COUNT_SUBSCRIPTION = gql`
-  subscription UNREAD_CONVERSATION_COUNT_SUBSCRIPTION {
-    messages_aggregate(
-      where: { read: { _eq: false }, isoutbound: { _eq: false } }
-    ) {
-      aggregate {
-        count
-      }
-    }
-  }
-`;
-
 export const CONVERSATION_LIST_QUERY = gql`
   query CONVERSATION_LIST_QUERY($offset: Int!) {
     conversations(