routing fix

ui/src/components/AppSwitchRoutes.tsx

@@ -1,87 +1,27 @@
-import React, {useCallback, useEffect, useState} from "react";
+import React, { useState} from "react";
-import {Route, Routes, useLocation, useNavigate, useParams, useSearchParams} from "react-router-dom";
+import {Route, Routes} from "react-router-dom";
 import {RouterRoutes} from "../helpers/routes";
-import {useRecoilState} from "recoil";
-import entPageAtom, {Page} from "../recoil/entPage";
-import {toast} from "react-toastify";
 import AuthPageBase from "./Pages/AuthPage/AuthPageBase";
 import InstallPage from "./Pages/AuthPage/InstallPage";
 import LoginPage from "./Pages/AuthPage/LoginPage";
-import LoadingOverlay from "./LoadingOverlay";
 import SystemViewer from "./Pages/SystemViewer/SystemViewer";
-import Api from "../helpers/api";
+
 import {TrafficPage} from "./Pages/TrafficPage/TrafficPage";
 import SettingsPage from "./Pages/SettingsPage/SettingsPage";
+import { AuthenticatedRoute } from "../helpers/AuthenticatedRoute";
 
-const api = Api.getInstance();
 
 const AppSwitchRoutes = () => {
 
-    const navigate = useNavigate();
-
-    const [isLoading, setIsLoading] = useState(true);
-    const [entPage, setEntPage] = useRecoilState(entPageAtom);
     const [isFirstLogin, setIsFirstLogin] = useState(false);
-    let {inviteToken} = useParams()
-    const location = useLocation();
-
     
 
-    const determinePage =  useCallback(async () => {
-        try {
-            const isInstallNeeded = await api.isInstallNeeded();
-            if (isInstallNeeded) {
-                setEntPage(Page.Setup);
-            } else {
-                const isAuthNeeded = await api.isAuthenticationNeeded();
-                if(isAuthNeeded && inviteToken) {
-                    setEntPage(Page.Setup)
-                }
-                else if(isAuthNeeded)
-                    setEntPage(Page.Login);
-            }
-        } catch (e) {
-            toast.error("Error occured while checking Mizu API status, see console for mode details");
-            console.error(e);
-        } finally {
-            setIsLoading(false);
-        }
-    },[setEntPage]);
 
-    useEffect(() => {
-        determinePage();
-    }, [determinePage]);
-
-    useEffect(() => {
-        if(!location.pathname || location.pathname !== '/') {
-            return;
-        }
-        
-        switch (entPage) {
-            case Page.Traffic:
-                navigate("/");
-                break;
-            case Page.Setup:
-                navigate(RouterRoutes.SETUP);
-                break;
-            case Page.Login:
-                navigate(RouterRoutes.LOGIN);
-                break;
-            default:
-                navigate(RouterRoutes.LOGIN);
-        }
-       // eslint-disable-next-line
-    },[entPage, location])
-
-
-    if (isLoading) {
-        return <LoadingOverlay/>;
-    }
 
     return <Routes>
         <Route path={"/"} element={<SystemViewer isFirstLogin={isFirstLogin} setIsFirstLogin={setIsFirstLogin}/>}>
-            <Route path={RouterRoutes.SETTINGS} element={<SettingsPage/>} /> {/*todo: set settings component*/}
+            <Route path={RouterRoutes.SETTINGS} element={<AuthenticatedRoute><SettingsPage/></AuthenticatedRoute>} /> {/*todo: set settings component*/}
-            <Route path={"/"} element={<TrafficPage/>}/>
+            <Route path={"/"} element={<AuthenticatedRoute><TrafficPage/></AuthenticatedRoute>}/>
             
         </Route>
         <Route path={RouterRoutes.SETUP+ "/:inviteToken"} element={<AuthPageBase><InstallPage onFirstLogin={() => setIsFirstLogin(true)}/></AuthPageBase>}/>

ui/src/components/Header/EntHeader.tsx

@@ -54,12 +54,12 @@ export const EntHeader: React.FC<EntHeaderProps> = ({isFirstLogin, setIsFirstLog
 
 const ProfileButton = () => {
 
-    const setEntPage = useSetRecoilState(entPageAtom);
+    const navigate = useNavigate();
 
     const logout = async (popupState) => {
         try {
             await api.logout();
-            setEntPage(Page.Login);
+            navigate(RouterRoutes.LOGIN);
         } catch (e) {
             toast.error("Something went wrong, please check the console");
             console.error(e);

ui/src/components/Pages/AuthPage/InstallPage.tsx

@@ -57,7 +57,6 @@ export const InstallPage: React.FC<InstallPageProps> = ({onFirstLogin}) => {
             setEntPage(Page.Traffic);
             if (!await api.isAuthenticationNeeded()) {
                 navigate('/');
-                setEntPage(Page.Traffic);
                 onFirstLogin();
             }
         } catch (e) {

ui/src/components/Pages/AuthPage/LoginPage.tsx

@@ -8,6 +8,7 @@ import entPageAtom, {Page} from "../../../recoil/entPage";
 import {useSetRecoilState} from "recoil";
 import useKeyPress from "../../../hooks/useKeyPress"
 import shortcutsKeyboard from "../../../configs/shortcutsKeyboard"
+import { useNavigate } from "react-router-dom";
 
 
 const api = Api.getInstance();
@@ -19,6 +20,8 @@ const LoginPage: React.FC = () => {
     const [username, setUsername] = useState("");
     const [password, setPassword] = useState("");
     const formRef = useRef(null);
+    const navigate = useNavigate();
+
 
     const setEntPage = useSetRecoilState(entPageAtom);
 
@@ -29,6 +32,7 @@ const LoginPage: React.FC = () => {
             await api.login(username, password);
             if (!await api.isAuthenticationNeeded()) {
                 setEntPage(Page.Traffic);
+                navigate("/");
             } else {
                 toast.error("Invalid credentials");
             }

ui/src/helpers/AuthenticatedRoute.tsx

@@ -0,0 +1,40 @@
+import React, { ReactNode, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import LoadingOverlay from "../components/LoadingOverlay";
+import Api from "./api";
+import { RouterRoutes } from "./routes";
+
+const api = Api.getInstance();
+
+export const AuthenticatedRoute: React.FC  = ({children}) => {
+
+    const navigate = useNavigate();
+    const [isLoading, setIsLoading] = useState(false);
+
+   useEffect(() => {
+    (async () => {
+        setIsLoading(true);
+        try {
+            const isInstallNeeded = await api.isInstallNeeded();
+            if (isInstallNeeded) {
+                navigate(RouterRoutes.SETUP);
+            } else {
+                const isAuthNeeded = await api.isAuthenticationNeeded();
+                if(isAuthNeeded) {
+                    navigate(RouterRoutes.LOGIN);
+                }
+            }
+        } catch (e) {
+            console.error(e);
+        } finally {
+                setIsLoading(false);
+        }
+    })();
+   }, [])
+
+    if (isLoading) {
+        return <LoadingOverlay/>;
+    }
+
+    return <>{children}</>;
+}

ui/src/helpers/api.js

@@ -219,7 +219,7 @@ export default class Api {
 
     isAuthenticationNeeded = async () => {
         try {
-            await this.client.get("/status/tap");
+            await this.client.get("/user/whoAmI");
             return false;
         } catch (e) {
             if (e.response.status === 401) {