resend request on lost ws connection

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(

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(() => {
+    const lmscRequest = () =>
       myFetch("/lmsc", "GET").then((data) =>
         consolesContext.setConnectedLogManagerServers(data)
       );
+
+    lmscRequest();
+
+    document.addEventListener(wsConnectionCustomEventName, () => lmscRequest());
   }, []);
 
   return (

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(() => {
+    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 (

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(() => {
+    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 (

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(() => {
+    const lmscRequest = () =>
       myFetch("/lmsc", "GET").then((data) => {
         consolesContext.setConnectedLogManagerServers(data);
 
         setSelectedLogServer(data.length > 0 ? data[0].Address : "");
       });
+
+    lmscRequest();
+
+    document.addEventListener(wsConnectionCustomEventName, () => lmscRequest());
   }, []);
 
   useEffect(() => {

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(
+  useEffect(() => {
-    () => fetchGroupTasks(groupTasksContext.paginationPage),
+    const groupTasksRequest = () =>
-    [groupTasksContext.paginationPage]
+      fetchGroupTasks(groupTasksContext.paginationPage);
+
+    groupTasksRequest();
+
+    document.addEventListener(wsConnectionCustomEventName, () =>
+      groupTasksRequest()
     );
+  }, [groupTasksContext.paginationPage]);
 
   useEffect(
     () => groupTasksContext.setSelectInputs({}),

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,14 +509,26 @@ export default function Robots() {
     });
   };
 
-  useEffect(() => fetchRobots(0, robotsPaginationPage), [robotsPaginationPage]);
+  const initRequest = () => fetchRobots(0, robotsPaginationPage);
-
-  useEffect(
-    () => fetchRobots(1, unauthorizedRobotsPaginationPage),
-    [unauthorizedRobotsPaginationPage]
-  );
 
   useEffect(() => {
+    initRequest();
+
+    document.addEventListener(wsConnectionCustomEventName, () => initRequest());
+  }, [robotsPaginationPage]);
+
+  const initRequest2 = () => fetchRobots(1, unauthorizedRobotsPaginationPage);
+
+  useEffect(() => {
+    initRequest2();
+
+    document.addEventListener(wsConnectionCustomEventName, () =>
+      initRequest2()
+    );
+  }, [unauthorizedRobotsPaginationPage]);
+
+  useEffect(() => {
+    const permitJoinRequest = () =>
       myFetch(
         "/permitjoin",
         "GET",
@@ -525,6 +538,12 @@ export default function Robots() {
         Constants.ROBOTICS_API_ADDRESS
       ).then((data) => setPermitJoinEnabled(data.Enabled));
 
+    permitJoinRequest();
+
+    document.addEventListener(wsConnectionCustomEventName, () =>
+      permitJoinRequest()
+    );
+
     sseEventSource.current = new EventSource(
       `${Constants.ROBOTICS_API_ADDRESS}/sse`
     );

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,6 +272,7 @@ export default function UserProfile() {
   };
 
   useEffect(() => {
+    const userProfileRequest = () =>
       myFetch("/user/profile", "GET").then((data) => {
         userProfileContext.setEmail(data.Email);
         userProfileContext.setSessions(data.Sessions);
@@ -278,6 +280,12 @@ export default function UserProfile() {
 
         setEmail(data.Email);
       });
+
+    userProfileRequest();
+
+    document.addEventListener(wsConnectionCustomEventName, () =>
+      userProfileRequest()
+    );
   }, []);
 
   useEffect(

src/utils.js

@@ -261,6 +261,8 @@ export function setUserSessionToLocalStorage(session) {
 // not receive any messages
 export const BrowserTabSession = GetUuid();
 
+export const wsConnectionCustomEventName = "wsConnection";
+
 /**
  * websocket
  */