85 lines
2.4 KiB
TypeScript
85 lines
2.4 KiB
TypeScript
// App.tsx
|
|
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 (
|
|
<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>
|
|
<div className="content">
|
|
<Outlet />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
|