Use the NavigateFunction

Author: larsll

website/src/app.tsx

@@ -36,8 +36,8 @@ export default function App() {
   return (
     <div style={{ height: "100%" }}>
       <AuthProvider>
-        <ContextProvider>
-          <Router>
+        <Router>
+          <ContextProvider>
             <GlobalHeader />
             <div style={{ height: "56px", backgroundColor: "#000716" }}>&nbsp;</div>
             <div>
@@ -208,8 +208,8 @@ export default function App() {
                 )}
               </Routes>
             </div>
-          </Router>
-        </ContextProvider>
+          </ContextProvider>
+        </Router>
       </AuthProvider>
     </div>
   );

website/src/common/helpers/api-helper.ts

@@ -1,10 +1,12 @@
 import axios, { AxiosResponse } from "axios";
+import { NavigateFunction } from "react-router-dom";
 
 export abstract class ApiHelper {
-  static async get<T>(path: string): Promise<T | null> {
+  // Add an optional navigate parameter
+  static async get<T>(path: string, navigate?: NavigateFunction): Promise<T | null> {
     try {
       const response: AxiosResponse<T> = await axios.get("/api/" + path, {
-        timeout: 10000 // 10 seconds timeout
+        timeout: 10000, // 10 seconds timeout
       });
       return response.data;
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -13,14 +15,18 @@ export abstract class ApiHelper {
         console.log("Unauthorized");
         // Only redirect if we're not already on the login page
         if (!window.location.pathname.includes("/login")) {
-          window.location.href = "/#/login";
+          if (navigate) {
+            navigate("/login");
+          } else {
+            window.location.href = "/#/login";
+          }
         }
         return null;
       }
       if (
         (error.response?.status >= 500 && error.response?.status < 600) ||
         error.code === "ERR_CONNECTION_REFUSED" ||
-        error.code === "ERR_CONNECTION_TIMED_OUT"  ||
+        error.code === "ERR_CONNECTION_TIMED_OUT" ||
         error.code === "ERR_CONNECTION_RESET" ||
         error.code === "ECONNABORTED" ||
         error.code === "ERR_NETWORK" ||
@@ -31,21 +37,29 @@ export abstract class ApiHelper {
         console.log("Unable to connect to server", {
           code: error.code,
           message: error.message,
-          status: error.request?.status
+          status: error.request?.status,
         });
-        // Force redirect using document.location for more reliable navigation
-        document.location.href = "/#/system-unavailable";
+        // Use navigate when available, fallback to window.location
+        if (navigate) {
+          navigate("/system-unavailable");
+        } else {
+          window.location.href = "/#/system-unavailable";
+        }
         return null;
       }
       console.error("Error getting api " + path + ":", error);
       return null;
     }
   }
 
-  static async post<T>(path: string, data: unknown): Promise<T | null> {
+  static async post<T>(
+    path: string,
+    data: unknown,
+    navigate?: NavigateFunction
+  ): Promise<T | null> {
     try {
       const response: AxiosResponse<T> = await axios.post("/api/" + path, data, {
-        timeout: 10000 // 10 seconds timeout
+        timeout: 10000, // 10 seconds timeout
       });
       return response.data;
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -54,14 +68,18 @@ export abstract class ApiHelper {
         console.log("Unauthorized");
         // Only redirect if we're not already on the login page
         if (!window.location.pathname.includes("/login")) {
-          window.location.href = "/#/login";
+          if (navigate) {
+            navigate("/login");
+          } else {
+            window.location.href = "/#/login";
+          }
         }
         return null;
       }
       if (
         (error.response?.status >= 500 && error.response?.status < 600) ||
         error.code === "ERR_CONNECTION_REFUSED" ||
-        error.code === "ERR_CONNECTION_TIMED_OUT"  ||
+        error.code === "ERR_CONNECTION_TIMED_OUT" ||
         error.code === "ERR_CONNECTION_RESET" ||
         error.code === "ECONNABORTED" ||
         error.code === "ERR_NETWORK" ||
@@ -72,10 +90,14 @@ export abstract class ApiHelper {
         console.log("Unable to connect to server", {
           code: error.code,
           message: error.message,
-          status: error.request?.status
+          status: error.request?.status,
         });
-        // Force redirect using document.location for more reliable navigation
-        document.location.href = "/#/system-unavailable";
+        // Use navigate when available, fallback to window.location
+        if (navigate) {
+          navigate("/system-unavailable");
+        } else {
+          window.location.href = "/#/system-unavailable";
+        }
         return null;
       }
       console.error("Error posting to api " + path + ":", error);

website/src/common/hooks/use-battery.ts

@@ -1,4 +1,5 @@
 import { createContext, useContext, useEffect, useState } from "react";
+import { useNavigate } from 'react-router-dom';
 import { useAuth } from "./use-authentication";
 import { FlashbarProps } from "@cloudscape-design/components";
 import { ApiHelper } from "../helpers/api-helper";
@@ -43,6 +44,7 @@ export const useBatteryProvider = () => {
   const [hasInitialReading, setHasInitialReading] = useState(false);
   const [pageLoadTime] = useState<number>(Date.now());
   const { isAuthenticated } = useAuth();
+  const navigate = useNavigate();
 
   // Battery notifications state
   const [batteryFlashbarItems, setBatteryFlashbarItems] = useState<
@@ -146,7 +148,7 @@ export const useBatteryProvider = () => {
 
     const getBatteryStatus = async () => {
       try {
-        const response = await ApiHelper.get<BatteryResponse>("get_battery_level");
+        const response = await ApiHelper.get<BatteryResponse>("get_battery_level", navigate);
         return response;
       } catch (error) {
         console.error("Error fetching battery status:", error);
@@ -165,7 +167,7 @@ export const useBatteryProvider = () => {
       isSubscribed = false;
       clearInterval(batteryInterval);
     };
-  }, [isAuthenticated]); // Add isAuthenticated as a dependency
+  }, [isAuthenticated, navigate]); // Add isAuthenticated as a dependency
 
   const batteryContextValue: BatteryState = {
     batteryLevel,