IO-3000 Adjusted first approach at messaging WS changes.

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

@@ -2,20 +2,26 @@ import { useApolloClient } from "@apollo/client";
 import { getToken, onMessage } from "@firebase/messaging";
 import { Button, notification, Space } from "antd";
 import axios from "axios";
-import React, { useEffect } from "react";
+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";
+import { registerMessagingHandlers, unregisterMessagingHandlers } from "./registerMessagingSocketHandlers";
 
 export function ChatAffixContainer({ bodyshop, chatVisible }) {
   const { t } = useTranslation();
   const client = useApolloClient();
+  const { socket } = useContext(SocketContext);
 
   useEffect(() => {
     if (!bodyshop || !bodyshop.messagingservicesid) return;
 
+    //Register WS handlers
+    registerMessagingHandlers({ socket, client });
+
     async function SubscribeToTopic() {
       try {
         const r = await axios.post("/notifications/subscribe", {
@@ -61,7 +67,11 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
 
     SubscribeToTopic();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [bodyshop]);
+
+    return () => {
+      unregisterMessagingHandlers({ socket });
+    };
+  }, [bodyshop, socket, t, client]);
 
   useEffect(() => {
     function handleMessage(payload) {