feature/IO-3000-messaging-sockets-migrations2 -

- Final fix of unread messagages

Signed-off-by: Dave Richer <dave@imexsystems.ca>

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

@@ -1,11 +1,11 @@
 import { InfoCircleOutlined, MessageOutlined, ShrinkOutlined, SyncOutlined } from "@ant-design/icons";
-import { useLazyQuery, useQuery } from "@apollo/client";
+import { useApolloClient, useLazyQuery } from "@apollo/client";
 import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
-import React, { useCallback, useContext, useEffect, useState } from "react";
+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, UNREAD_CONVERSATION_COUNT } from "../../graphql/conversations.queries";
+import { CONVERSATION_LIST_QUERY } 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";
@@ -28,13 +28,9 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
   const { t } = useTranslation();
   const [pollInterval, setPollInterval] = useState(0);
   const { socket } = useContext(SocketContext);
+  const client = useApolloClient(); // Apollo Client instance for cache operations
 
-  const { data: unreadData } = useQuery(UNREAD_CONVERSATION_COUNT, {
+  // Lazy query for conversations
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only",
-    ...(pollInterval > 0 ? { pollInterval } : {})
-  });
-
   const [getConversations, { loading, data, refetch, fetchMore }] = useLazyQuery(CONVERSATION_LIST_QUERY, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
@@ -42,6 +38,7 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
     ...(pollInterval > 0 ? { pollInterval } : {})
   });
 
+  // Socket connection status
   useEffect(() => {
     const handleSocketStatus = () => {
       if (socket?.connected) {
@@ -66,6 +63,7 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
     };
   }, [socket]);
 
+  // Fetch conversations when chat becomes visible
   useEffect(() => {
     if (chatVisible)
       getConversations({
@@ -77,7 +75,26 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
       });
   }, [chatVisible, getConversations]);
 
-  const unreadCount = unreadData?.messages_aggregate?.aggregate?.count || 0;
+  // Get unread count from the cache
+  const unreadCount = (() => {
+    try {
+      const cachedData = client.readQuery({
+        query: CONVERSATION_LIST_QUERY,
+        variables: { offset: 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
+    }
+  })();
 
   return (
     <Badge count={unreadCount}>

client/src/redux/messaging/messaging.sagas.js

@@ -4,9 +4,7 @@ import { all, call, put, select, takeLatest } from "redux-saga/effects";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
   CONVERSATION_ID_BY_PHONE,
-  CONVERSATION_LIST_QUERY,
   CREATE_CONVERSATION,
-  GET_CONVERSATION_DETAILS,
   TOGGLE_CONVERSATION_ARCHIVE
 } from "../../graphql/conversations.queries";
 import { INSERT_CONVERSATION_TAG } from "../../graphql/job-conversations.queries";