feature/IO-3000-messaging-sockets-migrations2 - Updated Polling Intervals is now socket based over FCMToken based

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

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) {
+    const handleSocketStatus = () => {
-      setpollInterval(0);
+      if (socket?.connected) {
-    } else {
+        setPollInterval(15 * 60 * 1000); // 15 minutes
-      setpollInterval(90000);
+      } 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 (
     <Badge count={unreadCount}>