fixed event is registered multiple times

src/Components/SideMenu/index.js

@@ -288,18 +288,19 @@ export function SideMenuContent({
 
     subscribeTopicMessage();
 
-    document.addEventListener(wsConnectionCustomEventName, () =>
+    const handleSubscribeTopicMessage = () => subscribeTopicMessage();
-      subscribeTopicMessage()
+
+    document.addEventListener(
+      wsConnectionCustomEventName,
+      handleSubscribeTopicMessage
     );
 
     // auto close sideMenu on mobile
     // this will prevent to auto close sideMenu on first render as the useEffects will be called after the first render
     if (contentFirstRender.current) {
       contentFirstRender.current = false;
-      return;
+      //return;
-    }
+    } else if (
-
-    if (
       /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
         navigator.userAgent
       ) ||
@@ -307,6 +308,12 @@ export function SideMenuContent({
     ) {
       setIsSideMenuCollapsed(true);
     }
+
+    return () =>
+      document.removeEventListener(
+        wsConnectionCustomEventName,
+        handleSubscribeTopicMessage
+      );
   }, [location.pathname]);
 
   return (

src/Contexts/WebSocketContext.js

@@ -22,6 +22,7 @@ const WebSocketContext = createContext(null);
 export const useWebSocketContext = () => useContext(WebSocketContext);
 
 let wsConnectionEvent = null;
+let firstConnection = true;
 
 export default function WebSocketProvider({
   children,
@@ -56,11 +57,14 @@ export default function WebSocketProvider({
     );
 
     ws.current.onopen = () => {
-      console.log("connected");
       sideBarContext.setConnectionBadgeStatus("success");
       setIsWebSocketReady(true);
 
+      if (firstConnection) {
+        firstConnection = false;
+      } else {
         document.dispatchEvent(wsConnectionEvent);
+      }
 
       myFetch("/user/", "GET").then((data) => {
         appContext.userId.current = data.UserId;

src/Pages/AdminArea/Manage/index.js

@@ -153,7 +153,15 @@ function LogManagerServersTable({ t, webSocketContext, appContext }) {
 
     lmscRequest();
 
-    document.addEventListener(wsConnectionCustomEventName, () => lmscRequest());
+    const handleLmscRequest = () => lmscRequest();
+
+    document.addEventListener(wsConnectionCustomEventName, handleLmscRequest);
+
+    return () =>
+      document.removeEventListener(
+        wsConnectionCustomEventName,
+        handleLmscRequest
+      );
   }, []);
 
   return (

src/Pages/AdminArea/Roles/index.js

@@ -132,8 +132,14 @@ export default function AdminAreaRoles() {
 
     rolesRequest();
 
-    document.addEventListener(wsConnectionCustomEventName, () =>
+    const handleRolesRequest = () => rolesRequest();
-      rolesRequest()
+
+    document.addEventListener(wsConnectionCustomEventName, handleRolesRequest);
+
+    return () =>
+      document.removeEventListener(
+        wsConnectionCustomEventName,
+        handleRolesRequest
       );
   }, []);
 

src/Pages/AllUsers/index.js

@@ -341,8 +341,14 @@ export default function AllUsers() {
 
     usersRequest();
 
-    document.addEventListener(wsConnectionCustomEventName, () =>
+    const handleUsersRequest = () => usersRequest();
-      usersRequest()
+
+    document.addEventListener(wsConnectionCustomEventName, handleUsersRequest);
+
+    return () =>
+      document.removeEventListener(
+        wsConnectionCustomEventName,
+        handleUsersRequest
       );
   }, []);
 

src/Pages/Consoles/index.js

@@ -18,13 +18,23 @@ export default function Consoles() {
     const lmscRequest = () =>
       myFetch("/lmsc", "GET").then((data) => {
         consolesContext.setConnectedLogManagerServers(data);
-
         setSelectedLogServer(data.length > 0 ? data[0].Address : "");
       });
 
     lmscRequest();
 
-    document.addEventListener(wsConnectionCustomEventName, () => lmscRequest());
+    const handleWsConnectionEvent = () => lmscRequest();
+
+    document.addEventListener(
+      wsConnectionCustomEventName,
+      handleWsConnectionEvent
+    );
+
+    return () =>
+      document.removeEventListener(
+        wsConnectionCustomEventName,
+        handleWsConnectionEvent
+      );
   }, []);
 
   useEffect(() => {

src/Pages/GroupTasks/Overview/GroupTasksViewModal.js

@@ -21,6 +21,7 @@ import {
   GetDuration,
   hasXYPermission,
   myFetch,
+  wsConnectionCustomEventName,
 } from "../../../utils";
 import {
   CheckOutlined,
@@ -63,6 +64,7 @@ export default function GroupTasksViewModal({ isOpen }) {
   useEffect(() => {
     if (!isOpen) return;
 
+    const stepsRequest = () =>
       myFetch(
         `/grouptasks/${paramCategory}/steps/${paramGroupTaskId}`,
         "GET"
@@ -84,6 +86,21 @@ export default function GroupTasksViewModal({ isOpen }) {
           groupTasksContext.setSelectInputs(inputs);
         }
       });
+
+    stepsRequest();
+
+    const handleWsConnectionEvent = () => stepsRequest();
+
+    document.addEventListener(
+      wsConnectionCustomEventName,
+      handleWsConnectionEvent
+    );
+
+    return () =>
+      document.removeEventListener(
+        wsConnectionCustomEventName,
+        handleWsConnectionEvent
+      );
   }, [isOpen, paramCategory]);
 
   if (!isOpen) return <></>;

src/Pages/GroupTasks/Overview/index.js

@@ -95,8 +95,17 @@ export default function GroupTasks({ isGroupTasksViewModalOpen }) {
 
     groupTasksRequest();
 
-    document.addEventListener(wsConnectionCustomEventName, () =>
+    const handleGroupTasksRequest = () => groupTasksRequest();
-      groupTasksRequest()
+
+    document.addEventListener(
+      wsConnectionCustomEventName,
+      handleGroupTasksRequest
+    );
+
+    return () =>
+      document.removeEventListener(
+        wsConnectionCustomEventName,
+        handleGroupTasksRequest
       );
   }, [groupTasksContext.paginationPage]);
 

src/Pages/Robotics/Robots/index.js

@@ -519,7 +519,18 @@ export default function Robots() {
   useEffect(() => {
     initRequest();
 
-    document.addEventListener(wsConnectionCustomEventName, () => initRequest());
+    const handleInitRequest = () => initRequest();
+
+    document.addEventListener(
+      wsConnectionCustomEventName,
+      () => handleInitRequest
+    );
+
+    return () =>
+      document.removeEventListener(
+        wsConnectionCustomEventName,
+        () => handleInitRequest
+      );
   }, [robotsPaginationPage]);
 
   const initRequest2 = () => fetchRobots(1, unauthorizedRobotsPaginationPage);
@@ -527,8 +538,14 @@ export default function Robots() {
   useEffect(() => {
     initRequest2();
 
-    document.addEventListener(wsConnectionCustomEventName, () =>
+    const handleInitRequest2 = () => initRequest2();
-      initRequest2()
+
+    document.addEventListener(wsConnectionCustomEventName, handleInitRequest2);
+
+    return () =>
+      document.removeEventListener(
+        wsConnectionCustomEventName,
+        handleInitRequest2
       );
   }, [unauthorizedRobotsPaginationPage]);
 

src/Pages/UserProfile/index.js

@@ -462,8 +462,17 @@ export default function UserProfile({ userSession, setUserSession }) {
 
     userProfileRequest();
 
-    document.addEventListener(wsConnectionCustomEventName, () =>
+    const handleUserProfileRequest = () => userProfileRequest();
-      userProfileRequest()
+
+    document.addEventListener(
+      wsConnectionCustomEventName,
+      handleUserProfileRequest
+    );
+
+    return () =>
+      document.removeEventListener(
+        wsConnectionCustomEventName,
+        handleUserProfileRequest
       );
   }, []);