diff --git a/src/Contexts/WebSocketContext.js b/src/Contexts/WebSocketContext.js index b60b576..73edf36 100644 --- a/src/Contexts/WebSocketContext.js +++ b/src/Contexts/WebSocketContext.js @@ -1,5 +1,10 @@ import { createContext, useContext, useEffect, useRef } from "react"; -import { BrowserTabSession, Constants, myFetch } from "../utils"; +import { + BrowserTabSession, + Constants, + myFetch, + wsConnectionCustomEventName, +} from "../utils"; import { useSideBarContext } from "./SideBarContext"; import { useAppContext } from "./AppContext"; import { handleWebSocketMessage } from "../Handlers/WebSocketMessageHandler"; @@ -15,6 +20,8 @@ const WebSocketContext = createContext(null); export const useWebSocketContext = () => useContext(WebSocketContext); +let wsConnectionEvent = null; + export default function WebSocketProvider({ children, userSession, @@ -35,6 +42,12 @@ export default function WebSocketProvider({ const usersContext = useUsersContext(); const consolesContext = useConsolesContext(); + if (wsConnectionEvent === null) { + wsConnectionEvent = new CustomEvent(wsConnectionCustomEventName, { + detail: "wsReconnect", + }); + } + const connect = () => { ws.current = new WebSocket( `${Constants.WS_ADDRESS}?auth=${userSession}&bts=${BrowserTabSession}` @@ -45,6 +58,9 @@ export default function WebSocketProvider({ sideBarContext.setConnectionBadgeStatus("success"); setIsWebSocketReady(true); + console.log("dispatchEvent"); + document.dispatchEvent(wsConnectionEvent); + myFetch("/user/", "GET").then((data) => { appContext.userId.current = data.UserId; appContext.setUserPermissions( diff --git a/src/Pages/AdminArea/Manage/index.js b/src/Pages/AdminArea/Manage/index.js index 8ce8422..5cb7c44 100644 --- a/src/Pages/AdminArea/Manage/index.js +++ b/src/Pages/AdminArea/Manage/index.js @@ -8,6 +8,7 @@ import { FormatDatetime, hasPermission, myFetch, + wsConnectionCustomEventName, } from "../../../utils"; import { useAppContext } from "../../../Contexts/AppContext"; import { useConsolesContext } from "../../../Contexts/ConsolesContext"; @@ -136,9 +137,14 @@ function LogManagerServersTable({ t, webSocketContext, appContext }) { }; useEffect(() => { - myFetch("/lmsc", "GET").then((data) => - consolesContext.setConnectedLogManagerServers(data) - ); + const lmscRequest = () => + myFetch("/lmsc", "GET").then((data) => + consolesContext.setConnectedLogManagerServers(data) + ); + + lmscRequest(); + + document.addEventListener(wsConnectionCustomEventName, () => lmscRequest()); }, []); return ( diff --git a/src/Pages/AdminArea/Roles/index.js b/src/Pages/AdminArea/Roles/index.js index 8028fa3..c86d65a 100644 --- a/src/Pages/AdminArea/Roles/index.js +++ b/src/Pages/AdminArea/Roles/index.js @@ -12,7 +12,12 @@ import { Typography, notification, } from "antd"; -import { Constants, hasPermission, myFetch } from "../../../utils"; +import { + Constants, + hasPermission, + myFetch, + wsConnectionCustomEventName, +} from "../../../utils"; import { ArrowDownOutlined, ArrowUpOutlined, @@ -118,11 +123,18 @@ export default function AdminAreaRoles() { ); useEffect(() => { - myFetch("/adminarea/roles", "GET").then((data) => { - adminAreaRolesContext.setRoles(data.Roles); - adminAreaRolesContext.setRolesPermissions(data.RolesPermissions); - adminAreaRolesContext.setUsers(data.Users); - }); + const rolesRequest = () => + myFetch("/adminarea/roles", "GET").then((data) => { + adminAreaRolesContext.setRoles(data.Roles); + adminAreaRolesContext.setRolesPermissions(data.RolesPermissions); + adminAreaRolesContext.setUsers(data.Users); + }); + + rolesRequest(); + + document.addEventListener(wsConnectionCustomEventName, () => + rolesRequest() + ); }, []); return ( diff --git a/src/Pages/AllUsers/index.js b/src/Pages/AllUsers/index.js index 5a1d0a2..c42e7aa 100644 --- a/src/Pages/AllUsers/index.js +++ b/src/Pages/AllUsers/index.js @@ -15,6 +15,7 @@ import { hasOnePermission, hasPermission, myFetch, + wsConnectionCustomEventName, } from "../../utils"; import { useEffect, useState } from "react"; import { Link } from "react-router-dom"; @@ -331,11 +332,18 @@ export default function AllUsers() { }; useEffect(() => { - myFetch("/users", "GET").then((data) => { - usersContext.setRoleId(data.RoleId); - usersContext.setUsers(data.Users); - usersContext.setRoles(data.Roles); - }); + const usersRequest = () => + myFetch("/users", "GET").then((data) => { + usersContext.setRoleId(data.RoleId); + usersContext.setUsers(data.Users); + usersContext.setRoles(data.Roles); + }); + + usersRequest(); + + document.addEventListener(wsConnectionCustomEventName, () => + usersRequest() + ); }, []); return ( diff --git a/src/Pages/Consoles/index.js b/src/Pages/Consoles/index.js index 3f33206..2934c9e 100644 --- a/src/Pages/Consoles/index.js +++ b/src/Pages/Consoles/index.js @@ -1,7 +1,7 @@ import { Col, Result, Row, Select, Space } from "antd"; import LogCard from "../../Components/LogCard"; import { useEffect, useState } from "react"; -import { AppStyle, myFetch } from "../../utils"; +import { AppStyle, myFetch, wsConnectionCustomEventName } from "../../utils"; import { useConsolesContext } from "../../Contexts/ConsolesContext"; import { useTranslation } from "react-i18next"; @@ -15,11 +15,16 @@ export default function Consoles() { const [result, setResult] = useState(); useEffect(() => { - myFetch("/lmsc", "GET").then((data) => { - consolesContext.setConnectedLogManagerServers(data); + const lmscRequest = () => + myFetch("/lmsc", "GET").then((data) => { + consolesContext.setConnectedLogManagerServers(data); - setSelectedLogServer(data.length > 0 ? data[0].Address : ""); - }); + setSelectedLogServer(data.length > 0 ? data[0].Address : ""); + }); + + lmscRequest(); + + document.addEventListener(wsConnectionCustomEventName, () => lmscRequest()); }, []); useEffect(() => { diff --git a/src/Pages/GroupTasks/Overview/index.js b/src/Pages/GroupTasks/Overview/index.js index 5fd2b8e..a44b834 100644 --- a/src/Pages/GroupTasks/Overview/index.js +++ b/src/Pages/GroupTasks/Overview/index.js @@ -3,7 +3,12 @@ import { useEffect, useState } from "react"; import GroupTasksViewModal from "./GroupTasksViewModal"; import GroupTypeSelectionModal from "./GroupTypeSelectionModal"; import GroupTaskTableList from "./GroupTasksTableList"; -import { Constants, hasPermission, myFetch } from "../../../utils"; +import { + Constants, + hasPermission, + myFetch, + wsConnectionCustomEventName, +} from "../../../utils"; import { useTranslation } from "react-i18next"; import { ReloadOutlined } from "@ant-design/icons"; import { useGroupTasksContext } from "../../../Contexts/GroupTasksContext"; @@ -75,10 +80,16 @@ export default function GroupTasks({ isGroupTasksViewModalOpen }) { } }, [paramCategory]); - useEffect( - () => fetchGroupTasks(groupTasksContext.paginationPage), - [groupTasksContext.paginationPage] - ); + useEffect(() => { + const groupTasksRequest = () => + fetchGroupTasks(groupTasksContext.paginationPage); + + groupTasksRequest(); + + document.addEventListener(wsConnectionCustomEventName, () => + groupTasksRequest() + ); + }, [groupTasksContext.paginationPage]); useEffect( () => groupTasksContext.setSelectInputs({}), diff --git a/src/Pages/Robotics/Robots/index.js b/src/Pages/Robotics/Robots/index.js index 2725967..8a7aad4 100644 --- a/src/Pages/Robotics/Robots/index.js +++ b/src/Pages/Robotics/Robots/index.js @@ -19,6 +19,7 @@ import { hasPermission, myFetch, myFetchContentType, + wsConnectionCustomEventName, } from "../../../utils"; import MyPagination from "../../../Components/MyPagination"; import { Link } from "react-router-dom"; @@ -508,22 +509,40 @@ export default function Robots() { }); }; - useEffect(() => fetchRobots(0, robotsPaginationPage), [robotsPaginationPage]); - - useEffect( - () => fetchRobots(1, unauthorizedRobotsPaginationPage), - [unauthorizedRobotsPaginationPage] - ); + const initRequest = () => fetchRobots(0, robotsPaginationPage); useEffect(() => { - myFetch( - "/permitjoin", - "GET", - null, - {}, - myFetchContentType.JSON, - Constants.ROBOTICS_API_ADDRESS - ).then((data) => setPermitJoinEnabled(data.Enabled)); + initRequest(); + + document.addEventListener(wsConnectionCustomEventName, () => initRequest()); + }, [robotsPaginationPage]); + + const initRequest2 = () => fetchRobots(1, unauthorizedRobotsPaginationPage); + + useEffect(() => { + initRequest2(); + + document.addEventListener(wsConnectionCustomEventName, () => + initRequest2() + ); + }, [unauthorizedRobotsPaginationPage]); + + useEffect(() => { + const permitJoinRequest = () => + myFetch( + "/permitjoin", + "GET", + null, + {}, + myFetchContentType.JSON, + Constants.ROBOTICS_API_ADDRESS + ).then((data) => setPermitJoinEnabled(data.Enabled)); + + permitJoinRequest(); + + document.addEventListener(wsConnectionCustomEventName, () => + permitJoinRequest() + ); sseEventSource.current = new EventSource( `${Constants.ROBOTICS_API_ADDRESS}/sse` diff --git a/src/Pages/UserProfile/index.js b/src/Pages/UserProfile/index.js index acc71db..779bd6f 100644 --- a/src/Pages/UserProfile/index.js +++ b/src/Pages/UserProfile/index.js @@ -24,6 +24,7 @@ import { hasPermission, isEmailValid, myFetch, + wsConnectionCustomEventName, } from "../../utils"; import { Link } from "react-router-dom"; import { useTranslation } from "react-i18next"; @@ -271,13 +272,20 @@ export default function UserProfile() { }; useEffect(() => { - myFetch("/user/profile", "GET").then((data) => { - userProfileContext.setEmail(data.Email); - userProfileContext.setSessions(data.Sessions); - userProfileContext.setApiKeys(data.ApiKeys); + const userProfileRequest = () => + myFetch("/user/profile", "GET").then((data) => { + userProfileContext.setEmail(data.Email); + userProfileContext.setSessions(data.Sessions); + userProfileContext.setApiKeys(data.ApiKeys); - setEmail(data.Email); - }); + setEmail(data.Email); + }); + + userProfileRequest(); + + document.addEventListener(wsConnectionCustomEventName, () => + userProfileRequest() + ); }, []); useEffect( diff --git a/src/utils.js b/src/utils.js index 8939b20..98e5270 100644 --- a/src/utils.js +++ b/src/utils.js @@ -261,6 +261,8 @@ export function setUserSessionToLocalStorage(session) { // not receive any messages export const BrowserTabSession = GetUuid(); +export const wsConnectionCustomEventName = "wsConnection"; + /** * websocket */