From f045c1b32866f43e8505b832a260259dbccf335c Mon Sep 17 00:00:00 2001 From: alex Date: Wed, 1 Nov 2023 22:57:18 +0100 Subject: [PATCH] fixed event is registered multiple times --- src/Components/SideMenu/index.js | 19 ++++--- src/Contexts/WebSocketContext.js | 8 ++- src/Pages/AdminArea/Manage/index.js | 10 +++- src/Pages/AdminArea/Roles/index.js | 12 +++-- src/Pages/AllUsers/index.js | 12 +++-- src/Pages/Consoles/index.js | 14 ++++- .../Overview/GroupTasksViewModal.js | 53 ++++++++++++------- src/Pages/GroupTasks/Overview/index.js | 13 ++++- src/Pages/Robotics/Robots/index.js | 25 +++++++-- src/Pages/UserProfile/index.js | 13 ++++- 10 files changed, 136 insertions(+), 43 deletions(-) diff --git a/src/Components/SideMenu/index.js b/src/Components/SideMenu/index.js index 82dcba1..93ba48a 100644 --- a/src/Components/SideMenu/index.js +++ b/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 ( diff --git a/src/Contexts/WebSocketContext.js b/src/Contexts/WebSocketContext.js index a695691..19cdd5b 100644 --- a/src/Contexts/WebSocketContext.js +++ b/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; diff --git a/src/Pages/AdminArea/Manage/index.js b/src/Pages/AdminArea/Manage/index.js index 8f557e4..62291ec 100644 --- a/src/Pages/AdminArea/Manage/index.js +++ b/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 ( diff --git a/src/Pages/AdminArea/Roles/index.js b/src/Pages/AdminArea/Roles/index.js index c86d65a..dbc0d99 100644 --- a/src/Pages/AdminArea/Roles/index.js +++ b/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 ( diff --git a/src/Pages/AllUsers/index.js b/src/Pages/AllUsers/index.js index c42e7aa..beb50c6 100644 --- a/src/Pages/AllUsers/index.js +++ b/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 ( diff --git a/src/Pages/Consoles/index.js b/src/Pages/Consoles/index.js index 2934c9e..ce9f31c 100644 --- a/src/Pages/Consoles/index.js +++ b/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(() => { diff --git a/src/Pages/GroupTasks/Overview/GroupTasksViewModal.js b/src/Pages/GroupTasks/Overview/GroupTasksViewModal.js index 655a089..8e46905 100644 --- a/src/Pages/GroupTasks/Overview/GroupTasksViewModal.js +++ b/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 <>; diff --git a/src/Pages/GroupTasks/Overview/index.js b/src/Pages/GroupTasks/Overview/index.js index a66ecc8..a1380e6 100644 --- a/src/Pages/GroupTasks/Overview/index.js +++ b/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( diff --git a/src/Pages/Robotics/Robots/index.js b/src/Pages/Robotics/Robots/index.js index 3c13654..be71db0 100644 --- a/src/Pages/Robotics/Robots/index.js +++ b/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(() => { diff --git a/src/Pages/UserProfile/index.js b/src/Pages/UserProfile/index.js index 5bb6f14..95951f9 100644 --- a/src/Pages/UserProfile/index.js +++ b/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(