fixed event is registered multiple times

src/Components/SideMenu/index.js

@@ -288,18 +288,19 @@ export function SideMenuContent({
 
     subscribeTopicMessage();
 
-    document.addEventListener(wsConnectionCustomEventName, () =>
-      subscribeTopicMessage()
+    const handleSubscribeTopicMessage = () => 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;
-    }
-
-    if (
+      //return;
+    } else 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);
 
-      document.dispatchEvent(wsConnectionEvent);
+      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,9 +132,15 @@ export default function AdminAreaRoles() {
 
     rolesRequest();
 
-    document.addEventListener(wsConnectionCustomEventName, () =>
-      rolesRequest()
-    );
+    const handleRolesRequest = () => rolesRequest();
+
+    document.addEventListener(wsConnectionCustomEventName, handleRolesRequest);
+
+    return () =>
+      document.removeEventListener(
+        wsConnectionCustomEventName,
+        handleRolesRequest
+      );
   }, []);
 
   return (

src/Pages/AllUsers/index.js

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

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,27 +64,43 @@ export default function GroupTasksViewModal({ isOpen }) {
   useEffect(() => {
     if (!isOpen) return;
 
-    myFetch(
-      `/grouptasks/${paramCategory}/steps/${paramGroupTaskId}`,
-      "GET"
-    ).then((data) => {
-      currentGroupTask.current = data.GroupTask;
-      groupTasksContext.setGroupTasksSteps(data.GroupTaskSteps);
+    const stepsRequest = () =>
+      myFetch(
+        `/grouptasks/${paramCategory}/steps/${paramGroupTaskId}`,
+        "GET"
+      ).then((data) => {
+        currentGroupTask.current = data.GroupTask;
+        groupTasksContext.setGroupTasksSteps(data.GroupTaskSteps);
 
-      // set the select inputs
+        // set the select inputs
 
-      if (
-        data.GroupTaskSteps[data.GroupTaskSteps.length - 1].Inputs !== "" &&
-        data.GroupTaskSteps[data.GroupTaskSteps.length - 1].Status ===
-          Constants.GROUP_TASKS_STATUS.INPUT_REQUIRED
-      ) {
-        const inputs = JSON.parse(
-          data.GroupTaskSteps[data.GroupTaskSteps.length - 1].Inputs
-        );
+        if (
+          data.GroupTaskSteps[data.GroupTaskSteps.length - 1].Inputs !== "" &&
+          data.GroupTaskSteps[data.GroupTaskSteps.length - 1].Status ===
+            Constants.GROUP_TASKS_STATUS.INPUT_REQUIRED
+        ) {
+          const inputs = JSON.parse(
+            data.GroupTaskSteps[data.GroupTaskSteps.length - 1].Inputs
+          );
 
-        groupTasksContext.setSelectInputs(inputs);
-      }
-    });
+          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,9 +95,18 @@ export default function GroupTasks({ isGroupTasksViewModalOpen }) {
 
     groupTasksRequest();
 
-    document.addEventListener(wsConnectionCustomEventName, () =>
-      groupTasksRequest()
+    const handleGroupTasksRequest = () => groupTasksRequest();
+
+    document.addEventListener(
+      wsConnectionCustomEventName,
+      handleGroupTasksRequest
     );
+
+    return () =>
+      document.removeEventListener(
+        wsConnectionCustomEventName,
+        handleGroupTasksRequest
+      );
   }, [groupTasksContext.paginationPage]);
 
   useEffect(

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,9 +538,15 @@ export default function Robots() {
   useEffect(() => {
     initRequest2();
 
-    document.addEventListener(wsConnectionCustomEventName, () =>
-      initRequest2()
-    );
+    const handleInitRequest2 = () => initRequest2();
+
+    document.addEventListener(wsConnectionCustomEventName, handleInitRequest2);
+
+    return () =>
+      document.removeEventListener(
+        wsConnectionCustomEventName,
+        handleInitRequest2
+      );
   }, [unauthorizedRobotsPaginationPage]);
 
   useEffect(() => {

src/Pages/UserProfile/index.js

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