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 (
+        <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>
+            <div className="content">
-                <Route path="/" element={<MainPage/>}/>
+                <Outlet />
-                <Route path="/surveys/results/:scoreVariableId/" element={<SurveyResultPage/>}/>
+            </div>
-                <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>
     );
 }
+
+

src/pages/LoginPage.tsx

@@ -0,0 +1,3 @@
+export function LoginPage() {
+    return null;
+}

src/types/users.ts

@@ -0,0 +1,22 @@
+import {UniqueItem} from "./common.ts";
+
+
+export interface ContactData{
+    first_name: string;
+    last_name?: string;
+    middle_name?: string;
+    phone?: string;
+    email?:string;
+}
+
+interface Role extends UniqueItem{
+    title: string;
+}
+
+export interface Account extends UniqueItem, ContactData{
+    login: string;
+    role?: Role;
+    is_staff: boolean;
+    is_active: boolean;
+
+}

src/utils/users/UseUser.ts

@@ -0,0 +1,13 @@
+
+import {UserContext} from "./UserContext.ts";
+import {useContext} from "react";
+
+
+
+export function useUser() {
+    const context = useContext(UserContext);
+    if (!context) {
+        throw new Error('useUser must be used within a UserProvider');
+    }
+    return context;
+}

src/utils/users/UserContext.ts

@@ -0,0 +1,10 @@
+import {Account} from "../../types/users.ts";
+import {createContext} from "react";
+
+export type UserContextType = {
+    user: Account | undefined;
+    login: (userData: Account) => void;
+    logout: () => void;
+};
+
+export const UserContext = createContext<UserContextType | undefined>(undefined);

src/utils/users/UserProvider.tsx

@@ -0,0 +1,35 @@
+import React, {ReactNode, useEffect, useState} from 'react';
+import {Account} from '../../types/users.ts';
+import {UserContext} from "./UserContext.ts";
+
+
+export function UserProvider({ children }: { children: ReactNode }) {
+    const [user, setUser] = useState<Account | undefined>(() => {
+        const storedUser = localStorage.getItem('user');
+        return storedUser ? JSON.parse(storedUser) : undefined;
+    });
+
+    useEffect(() => {
+        if (user) {
+            localStorage.setItem('user', JSON.stringify(user));
+            document.cookie = `user=${encodeURIComponent(JSON.stringify(user))}; path=/;`;
+        } else {
+            localStorage.removeItem('user');
+            document.cookie = 'user=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC;';
+        }
+    }, [user]);
+
+    const login = (userData: Account) => {
+        setUser(userData);
+    };
+
+    const logout = () => {
+        setUser(undefined);
+    };
+
+    return (
+        <UserContext.Provider value={{ user, login, logout }}>
+            {children}
+        </UserContext.Provider>
+    );
+}