From a2ada7d88ebf17063e36d7ca66453314284dad42 Mon Sep 17 00:00:00 2001
From: Dave Richer <dave@imexsystems.ca>
Date: Tue, 3 Dec 2024 13:58:16 -0800
Subject: [PATCH] feature/IO-3048-Fix-Job-Bug-Messaging - Unread count

Signed-off-by: Dave Richer <dave@imexsystems.ca>
---
 .../chat-popup/chat-popup.component.jsx       | 46 ++++++++++++-------
 1 file changed, 30 insertions(+), 16 deletions(-)

diff --git a/client/src/components/chat-popup/chat-popup.component.jsx b/client/src/components/chat-popup/chat-popup.component.jsx
index 443dfde3e..96a87885e 100644
--- a/client/src/components/chat-popup/chat-popup.component.jsx
+++ b/client/src/components/chat-popup/chat-popup.component.jsx
@@ -1,11 +1,11 @@
 import { InfoCircleOutlined, MessageOutlined, ShrinkOutlined, SyncOutlined } from "@ant-design/icons";
-import { useApolloClient, useLazyQuery } from "@apollo/client";
+import { useApolloClient, useLazyQuery, useQuery } from "@apollo/client";
 import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
 import React, { useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { CONVERSATION_LIST_QUERY } from "../../graphql/conversations.queries";
+import { CONVERSATION_LIST_QUERY, UNREAD_CONVERSATION_COUNT } from "../../graphql/conversations.queries";
 import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
 import { selectChatVisible, selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
 import ChatConversationListComponent from "../chat-conversation-list/chat-conversation-list.component";
@@ -38,6 +38,14 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
     ...(pollInterval > 0 ? { pollInterval } : {})
   });
 
+  // Query for unread count when chat is not visible
+  const { data: unreadData } = useQuery(UNREAD_CONVERSATION_COUNT, {
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+    skip: chatVisible, // Skip when chat is visible
+    ...(pollInterval > 0 ? { pollInterval } : {})
+  });
+
   // Socket connection status
   useEffect(() => {
     const handleSocketStatus = () => {
@@ -77,23 +85,29 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
 
   // Get unread count from the cache
   const unreadCount = (() => {
-    try {
-      const cachedData = client.readQuery({
-        query: CONVERSATION_LIST_QUERY,
-        variables: { offset: 0 }
-      });
+    if (chatVisible) {
+      try {
+        const cachedData = client.readQuery({
+          query: CONVERSATION_LIST_QUERY,
+          variables: { offset: 0 }
+        });
 
-      if (!cachedData?.conversations) return 0;
+        if (!cachedData?.conversations) return 0;
 
-      // Aggregate unread message count
-      return cachedData.conversations.reduce((total, conversation) => {
-        const unread = conversation.messages_aggregate?.aggregate?.count || 0;
-        return total + unread;
-      }, 0);
-    } catch (error) {
-      console.warn("Unread count not found in cache:", error);
-      return 0; // Fallback if not in cache
+        // Aggregate unread message count
+        return cachedData.conversations.reduce((total, conversation) => {
+          const unread = conversation.messages_aggregate?.aggregate?.count || 0;
+          return total + unread;
+        }, 0);
+      } catch (error) {
+        console.warn("Unread count not found in cache:", error);
+        return 0; // Fallback if not in cache
+      }
+    } else if (unreadData?.messages_aggregate?.aggregate?.count) {
+      // Use the unread count from the query result
+      return unreadData.messages_aggregate.aggregate.count;
     }
+    return 0;
   })();
 
   return (