diff --git a/client/src/components/chat-conversation/chat-conversation.container.jsx b/client/src/components/chat-conversation/chat-conversation.container.jsx index 5dfdeb8f0..7461fde6e 100644 --- a/client/src/components/chat-conversation/chat-conversation.container.jsx +++ b/client/src/components/chat-conversation/chat-conversation.container.jsx @@ -42,6 +42,7 @@ export function ChatConversationContainer({ bodyshop, selectedConversation }) { MARK_MESSAGES_AS_READ_BY_CONVERSATION, { variables: { conversationId: selectedConversation }, + refetchQueries: ["UNREAD_CONVERSATION_COUNT"], update(cache) { cache.modify({ id: cache.identify({ diff --git a/client/src/components/chat-popup/chat-popup.component.jsx b/client/src/components/chat-popup/chat-popup.component.jsx index 3c2294968..5466f43e2 100644 --- a/client/src/components/chat-popup/chat-popup.component.jsx +++ b/client/src/components/chat-popup/chat-popup.component.jsx @@ -10,7 +10,10 @@ import React, { 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, @@ -37,12 +40,19 @@ export function ChatPopupComponent({ }) { const { t } = useTranslation(); const [pollInterval, setpollInterval] = useState(0); - const { loading, data, refetch, called } = useQuery(CONVERSATION_LIST_QUERY, { + + const { data: unreadData } = useQuery(UNREAD_CONVERSATION_COUNT, { fetchPolicy: "network-only", nextFetchPolicy: "network-only", ...(pollInterval > 0 ? { pollInterval } : {}), }); + const { loading, data, refetch, called } = useQuery(CONVERSATION_LIST_QUERY, { + fetchPolicy: "network-only", + nextFetchPolicy: "network-only", + ...(pollInterval > 0 && chatVisible ? { pollInterval } : {}), + }); + const fcmToken = sessionStorage.getItem("fcmtoken"); useEffect(() => { @@ -57,12 +67,14 @@ 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; + // const unreadCount = data + // ? data.conversations.reduce( + // (acc, val) => val.messages_aggregate.aggregate.count + acc, + // 0 + // ) + // : 0; + + const unreadCount = unreadData?.messages_aggregate.aggregate.count || 0; return ( diff --git a/client/src/graphql/conversations.queries.js b/client/src/graphql/conversations.queries.js index 2bd735bf5..ef73f546b 100644 --- a/client/src/graphql/conversations.queries.js +++ b/client/src/graphql/conversations.queries.js @@ -31,6 +31,18 @@ import { gql } from "@apollo/client"; // } // `; +export const UNREAD_CONVERSATION_COUNT = gql` + query UNREAD_CONVERSATION_COUNT { + messages_aggregate( + where: { read: { _eq: false }, isoutbound: { _eq: false } } + ) { + aggregate { + count + } + } + } +`; + export const CONVERSATION_LIST_QUERY = gql` query CONVERSATION_LIST_QUERY { conversations(