UserContext

src/App.tsx

@@ -1,28 +1,84 @@
 // App.tsx
-import {BrowserRouter as Router, Routes, Route, Navigate, Link} from 'react-router-dom';
+import {BrowserRouter as Router, Routes, Route, Link, Navigate, Outlet, useNavigate} from 'react-router-dom';
 import {MainPage} from "./pages/MainPage.tsx";
 import {SurveyPage} from "./pages/SurveyPage.tsx";
 import {DashboardPage} from "./pages/DashboardPage.tsx";
 import { SurveyResultPage } from './pages/SurveyResultPage.tsx';
 import { ProfessionPage } from './pages/ProfessionPage.tsx';
-
+import React, {useEffect} from "react";
+import {LoginPage} from "./pages/LoginPage.tsx";
+import {UserProvider} from "./utils/users/UserProvider.tsx";
+import {useUser} from "./utils/users/UseUser.ts";
 
 
 export default function App() {
     return (
-        <Router>
+        <UserProvider>
+            <Router>
+                <Routes>
+
+                    <Route path="/login/" element={<LoginPage />} />
+
+
+                    <Route path="/dashboard/*" element={<DashboardLayout />}>
+                        <Route index element={<DashboardPage />} />
+                    </Route>
+
+
+                    <Route path="/" element={<MainLayout />}>
+                        <Route index element={<MainPage />} />
+                        <Route path="/surveys/results/:scoreVariableId/" element={<SurveyResultPage />} />
+                        <Route path="/surveys/professions/:professionId/" element={<ProfessionPage />} />
+                        <Route path="/surveys/:surveyId/" element={<SurveyPage />} />
+                    </Route>
+
+                    <Route path="*" element={<Navigate to="/" />} />
+                </Routes>
+            </Router>
+        </UserProvider>
+    );
+}
+
+
+export function DashboardLayout() {
+    const { user } = useUser();
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (!user) {
+            navigate("/login/")
+        }
+    }, [navigate, user]);
+    
+    if (!user){
+        return null;
+    }
+
+    return (
+        <>
+            <div className="header">
+                <h1 className="logo">Pro-Fi</h1>
+            </div>
+            <div className="content">
+                <Outlet />
+            </div>
+        </>
+    );
+}
+
+
+function MainLayout() {
+    return (
+        <>
             <div className="header">
                 <Link to="/dashboard" className="menu-button">☰</Link>
                 <h1 className="logo">Pro-Fi Test</h1>
             </div>
-            <Routes>
-                <Route path="/" element={<MainPage/>}/>
-                <Route path="/surveys/results/:scoreVariableId/" element={<SurveyResultPage/>}/>
-                <Route path="/surveys/professions/:professionId/" element={<ProfessionPage/>}/>
-                <Route path="/surveys/:surveyId/" element={<SurveyPage/>}/>
-                <Route path="/dashboard/" element={<DashboardPage/>}/>
-                {/* <Route path="*" element={<Navigate to="/"/>}/> */}
-            </Routes>
-        </Router>
+            <div className="content">
+                <Outlet />
+            </div>
+        </>
     );
-}
+}
+
+