From 250faa672fd2997f728869a29f31876d77f03ed1 Mon Sep 17 00:00:00 2001 From: Dave Richer Date: Wed, 20 Nov 2024 14:53:01 -0800 Subject: [PATCH] feature/IO-3000-messaging-sockets-migrations2 - Updated Polling Intervals is now socket based over FCMToken based Signed-off-by: Dave Richer --- .../chat-popup/chat-popup.component.jsx | 42 ++++++++++++++----- 1 file changed, 31 insertions(+), 11 deletions(-) diff --git a/client/src/components/chat-popup/chat-popup.component.jsx b/client/src/components/chat-popup/chat-popup.component.jsx index b9a500166..b2625261d 100644 --- a/client/src/components/chat-popup/chat-popup.component.jsx +++ b/client/src/components/chat-popup/chat-popup.component.jsx @@ -1,7 +1,7 @@ import { InfoCircleOutlined, MessageOutlined, ShrinkOutlined, SyncOutlined } from "@ant-design/icons"; 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 React, { useCallback, useContext, useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; @@ -13,18 +13,21 @@ 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 SocketContext from "../../contexts/SocketIO/socketContext.jsx"; const mapStateToProps = createStructuredSelector({ selectedConversation: selectSelectedConversation, chatVisible: selectChatVisible }); + const mapDispatchToProps = (dispatch) => ({ toggleChatVisible: () => dispatch(toggleChatVisible()) }); export function ChatPopupComponent({ chatVisible, selectedConversation, toggleChatVisible }) { const { t } = useTranslation(); - const [pollInterval, setpollInterval] = useState(0); + const [pollInterval, setPollInterval] = useState(0); + const { socket } = useContext(SocketContext); const { data: unreadData } = useQuery(UNREAD_CONVERSATION_COUNT, { fetchPolicy: "network-only", @@ -39,16 +42,29 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh ...(pollInterval > 0 ? { pollInterval } : {}) }); - const fcmToken = sessionStorage.getItem("fcmtoken"); - - //TODO: Change to be a fallback incase sockets shit the bed useEffect(() => { - if (fcmToken) { - setpollInterval(0); - } else { - setpollInterval(90000); + const handleSocketStatus = () => { + if (socket?.connected) { + setPollInterval(15 * 60 * 1000); // 15 minutes + } else { + setPollInterval(60 * 1000); // 60 seconds + } + }; + + handleSocketStatus(); + + if (socket) { + socket.on("connect", handleSocketStatus); + socket.on("disconnect", handleSocketStatus); } - }, [fcmToken]); + + return () => { + if (socket) { + socket.off("connect", handleSocketStatus); + socket.off("disconnect", handleSocketStatus); + } + }; + }, [socket]); useEffect(() => { if (chatVisible) @@ -56,6 +72,8 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh variables: { offset: 0 } + }).catch((err) => { + console.error(`Error fetching conversations: ${(err, err.message || "")}`); }); }, [chatVisible, getConversations]); @@ -65,10 +83,12 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh variables: { offset: data.conversations.length } + }).catch((err) => { + console.error(`Error fetching more conversations: ${(err, err.message || "")}`); }); }, [data, fetchMore]); - const unreadCount = unreadData?.messages_aggregate.aggregate.count || 0; + const unreadCount = unreadData?.messages_aggregate?.aggregate?.count || 0; return (