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(() => {
-    myFetch("/lmsc", "GET").then((data) =>
+    const lmscRequest = () =>
-      consolesContext.setConnectedLogManagerServers(data)
+      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(() => {
-    myFetch("/adminarea/roles", "GET").then((data) => {
+    const rolesRequest = () =>
-      adminAreaRolesContext.setRoles(data.Roles);
+      myFetch("/adminarea/roles", "GET").then((data) => {
-      adminAreaRolesContext.setRolesPermissions(data.RolesPermissions);
+        adminAreaRolesContext.setRoles(data.Roles);
-      adminAreaRolesContext.setUsers(data.Users);
+        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(() => {
-    myFetch("/users", "GET").then((data) => {
+    const usersRequest = () =>
-      usersContext.setRoleId(data.RoleId);
+      myFetch("/users", "GET").then((data) => {
-      usersContext.setUsers(data.Users);
+        usersContext.setRoleId(data.RoleId);
-      usersContext.setRoles(data.Roles);
+        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(() => {
-    myFetch("/lmsc", "GET").then((data) => {
+    const lmscRequest = () =>
-      consolesContext.setConnectedLogManagerServers(data);
+      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(() => {

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,22 +509,40 @@ export default function Robots() {
     });
   };
 
-  useEffect(() => fetchRobots(0, robotsPaginationPage), [robotsPaginationPage]);
+  const initRequest = () => fetchRobots(0, robotsPaginationPage);
-
-  useEffect(
-    () => fetchRobots(1, unauthorizedRobotsPaginationPage),
-    [unauthorizedRobotsPaginationPage]
-  );
 
   useEffect(() => {
-    myFetch(
+    initRequest();
-      "/permitjoin",
+
-      "GET",
+    document.addEventListener(wsConnectionCustomEventName, () => initRequest());
-      null,
+  }, [robotsPaginationPage]);
-      {},
+
-      myFetchContentType.JSON,
+  const initRequest2 = () => fetchRobots(1, unauthorizedRobotsPaginationPage);
-      Constants.ROBOTICS_API_ADDRESS
+
-    ).then((data) => setPermitJoinEnabled(data.Enabled));
+  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`

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) => {
+    const userProfileRequest = () =>
-      userProfileContext.setEmail(data.Email);
+      myFetch("/user/profile", "GET").then((data) => {
-      userProfileContext.setSessions(data.Sessions);
+        userProfileContext.setEmail(data.Email);
-      userProfileContext.setApiKeys(data.ApiKeys);
+        userProfileContext.setSessions(data.Sessions);
+        userProfileContext.setApiKeys(data.ApiKeys);
 
-      setEmail(data.Email);
+        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
  */