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

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

client/src/components/chat-affix/chat-affix.container.jsx

@@ -1,11 +1,6 @@
 import { useApolloClient } from "@apollo/client";
-import { getToken, onMessage } from "@firebase/messaging";
-import { Button, notification, Space } from "antd";
-import axios from "axios";
 import React, { useContext, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { messaging, requestForToken } from "../../firebase/firebase.utils";
-import FcmHandler from "../../utils/fcm-handler";
 import ChatPopupComponent from "../chat-popup/chat-popup.component";
 import "./chat-affix.styles.scss";
 import SocketContext from "../../contexts/SocketIO/socketContext";
@@ -20,81 +15,17 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
     if (!bodyshop || !bodyshop.messagingservicesid) return;
 
     //Register WS handlers
-    registerMessagingHandlers({ socket, client });
-
-    async function SubscribeToTopic() {
-      try {
-        const r = await axios.post("/notifications/subscribe", {
-          fcm_tokens: await getToken(messaging, {
-            vapidKey: import.meta.env.VITE_APP_FIREBASE_PUBLIC_VAPID_KEY
-          }),
-          type: "messaging",
-          imexshopid: bodyshop.imexshopid
-        });
-        console.log("FCM Topic Subscription", r.data);
-      } catch (error) {
-        console.log("Error attempting to subscribe to messaging topic: ", error);
-        notification.open({
-          key: "fcm",
-          type: "warning",
-          message: t("general.errors.fcm"),
-          btn: (
-            <Space>
-              <Button
-                onClick={async () => {
-                  await requestForToken();
-                  SubscribeToTopic();
-                }}
-              >
-                {t("general.actions.tryagain")}
-              </Button>
-              <Button
-                onClick={() => {
-                  const win = window.open(
-                    "https://help.imex.online/en/article/enabling-notifications-o978xi/",
-                    "_blank"
-                  );
-                  win.focus();
-                }}
-              >
-                {t("general.labels.help")}
-              </Button>
-            </Space>
-          )
-        });
-      }
+    if (socket && socket.connected) {
+      registerMessagingHandlers({ socket, client });
     }
 
-    SubscribeToTopic();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-
     return () => {
-      unregisterMessagingHandlers({ socket });
+      if (socket && socket.connected) {
+        unregisterMessagingHandlers({ socket });
+      }
     };
   }, [bodyshop, socket, t, client]);
 
-  useEffect(() => {
-    function handleMessage(payload) {
-      FcmHandler({
-        client,
-        payload: (payload && payload.data && payload.data.data) || payload.data
-      });
-    }
-
-    let stopMessageListener, channel;
-    try {
-      stopMessageListener = onMessage(messaging, handleMessage);
-      channel = new BroadcastChannel("imex-sw-messages");
-      channel.addEventListener("message", handleMessage);
-    } catch (error) {
-      console.log("Unable to set event listeners.");
-    }
-    return () => {
-      stopMessageListener && stopMessageListener();
-      channel && channel.removeEventListener("message", handleMessage);
-    };
-  }, [client]);
-
   if (!bodyshop || !bodyshop.messagingservicesid) return <></>;
 
   return (

client/src/components/chat-affix/registerMessagingSocketHandlers.js

@@ -1,8 +1,9 @@
 import { CONVERSATION_LIST_QUERY, GET_CONVERSATION_DETAILS } from "../../graphql/conversations.queries";
 
-export function registerMessagingHandlers({ socket, client }) {
+export const registerMessagingHandlers = ({ socket, client }) => {
   if (!(socket && client)) return;
-  function handleNewMessageSummary(message) {
+
+  const handleNewMessageSummary = (message) => {
     console.log("🚀 ~ SUMMARY CONSOLE LOG:", message);
 
     if (!message.isoutbound) {
@@ -69,9 +70,9 @@ export function registerMessagingHandlers({ socket, client }) {
         }
       });
     }
-  }
+  };
 
-  function handleNewMessageDetailed(message) {
+  const handleNewMessageDetailed = (message) => {
     console.log("🚀 ~ DETAIL CONSOLE LOG:", message);
     //They're looking at the conversation right now. Need to merge into the list of messages i.e. append to the end.
     //Add the message to the overall cache.
@@ -97,9 +98,9 @@ export function registerMessagingHandlers({ socket, client }) {
     // We got this as a receive.
     else {
     }
-  }
+  };
 
-  function handleMessageChanged(message) {
+  const handleMessageChanged = (message) => {
     //Find it in the cache, and just update it based on what was sent.
     client.cache.modify({
       id: client.cache.identify({
@@ -114,23 +115,23 @@ export function registerMessagingHandlers({ socket, client }) {
         }
       }
     });
-  }
+  };
 
-  function handleConversationChanged(conversation) {
+  const handleConversationChanged = (conversation) => {
     //If it was archived, marked unread, etc.
-  }
+  };
 
   socket.on("new-message-summary", handleNewMessageSummary);
   socket.on("new-message-detailed", handleNewMessageDetailed);
   socket.on("message-changed", handleMessageChanged);
-  socket.on("conversation-changed", handleConversationChanged); //TODO: Unread, mark as read, archived, unarchive, etc. 
-}
+  socket.on("conversation-changed", handleConversationChanged); //TODO: Unread, mark as read, archived, unarchive, etc.
+};
 
-export function unregisterMessagingHandlers({ socket }) {
+export const unregisterMessagingHandlers = ({ socket }) => {
   if (!socket) return;
   socket.off("new-message-summary");
   socket.off("new-message-detailed");
   socket.off("message-changed");
   socket.off("message-changed");
   socket.off("conversation-changed");
-}
+};

client/src/components/chat-conversation/chat-conversation.container.jsx

@@ -1,11 +1,10 @@
-import { useMutation, useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client";
 import axios from "axios";
-import React, { useEffect, useState, useContext } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import SocketContext from "../../contexts/SocketIO/socketContext";
 import { GET_CONVERSATION_DETAILS } from "../../graphql/conversations.queries";
-import { MARK_MESSAGES_AS_READ_BY_CONVERSATION } from "../../graphql/messages.queries";
 import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ChatConversationComponent from "./chat-conversation.component";
@@ -31,10 +30,16 @@ export function ChatConversationContainer({ bodyshop, selectedConversation }) {
   const { socket } = useContext(SocketContext);
 
   useEffect(() => {
-    socket.emit("join-bodyshop-conversation", { bodyshopId: bodyshop.id, conversationId: selectedConversation });
+    socket.emit("join-bodyshop-conversation", {
+      bodyshopId: bodyshop.id,
+      conversationId: selectedConversation
+    });
 
     return () => {
-      socket.emit("leave-bodyshop-conversation", { bodyshopId: bodyshop.id, conversationId: selectedConversation });
+      socket.emit("leave-bodyshop-conversation", {
+        bodyshopId: bodyshop.id,
+        conversationId: selectedConversation
+      });
     };
   }, [selectedConversation, bodyshop, socket]);
 

client/src/components/profile-shops/profile-shops.container.jsx

@@ -5,7 +5,7 @@ import { QUERY_ALL_ASSOCIATIONS, UPDATE_ACTIVE_ASSOCIATION } from "../../graphql
 import AlertComponent from "../alert/alert.component";
 import ProfileShopsComponent from "./profile-shops.component";
 import axios from "axios";
-import { getToken } from "firebase/messaging";
+import { getToken } from "  firebase/messaging";
 
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";