permission context

frontend/src/App.tsx

@@ -3,13 +3,17 @@ import { Route, Routes } from "react-router-dom";
 import { LoginPage } from "./pages/LoginPage";
 import { ForgotPasswordPage } from "./pages/ForgotPasswordPage";
 import { DashboardPage } from './pages/Dashboard';
+import { PermissionProvider } from './contexts/PermissionProvider';
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<LoginPage />} />
       <Route path="/forgot-password" element={<ForgotPasswordPage />} />
-      <Route path="/dashboard" element={<DashboardPage />} />
+      <Route path="/dashboard" element={
+        <PermissionProvider> 
+          <DashboardPage /> 
+        </PermissionProvider>} />
     </Routes>
   );
 }

frontend/src/contexts/PermissionContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+
+export type PermissionsState = {
+    permissions: Set<string>;
+    loading: boolean;
+};
+
+export const PermissionContext = createContext<PermissionsState | null>(null);

frontend/src/contexts/PermissionProvider.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useState, type ReactNode } from "react";
+import { useNavigate } from "react-router-dom";
+import { loadPermissions } from "../utils/permissions";
+import { PermissionContext } from "./PermissionContext";
+
+export function PermissionProvider({ children }: { children: ReactNode }) {
+    const navigate = useNavigate();
+    const [loading, setLoading] = useState(true);
+    const [permissions, setPermissions] = useState<Set<string>>(new Set());
+
+    useEffect(function () {
+        async function load() {
+            try {
+                const response = await loadPermissions();
+                setPermissions(response);
+                setLoading(false);
+            } catch {
+                navigate("/");
+            }
+        }
+        load();
+    }, [navigate]);
+
+    return (
+        <PermissionContext value={{ permissions, loading }}>
+            {children}
+        </PermissionContext>
+    );
+}
+
+

frontend/src/hooks/usePermissions.ts

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { PermissionContext } from "../contexts/PermissionContext";
+
+export function usePermissions() {
+    const ctx = useContext(PermissionContext);
+    if (!ctx) throw new Error("usePermissions must be used inside PermissionProvider");
+    return ctx;
+}

frontend/src/layouts/Main/Dashboard.module.css

@@ -1,7 +1,7 @@
 
-* {
+/* * {
   outline: 1px solid red;
-}
+} */
 .wrapper {
     display: grid;
     grid-template-columns: 20% 1fr;

frontend/src/layouts/Main/Dashboard.tsx

@@ -1,42 +1,18 @@
 import type { ReactNode } from "react";
 import styles from "./Dashboard.module.css"
-import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { fetchUser } from "../../api/UserAPI/User";
 import { logout } from "../../api/token";
+import { usePermissions } from "../../hooks/usePermissions";
 
 
 export function MainLayout({sidebar, header, content, right_sidebar }: { sidebar: ReactNode;header: ReactNode; content: ReactNode; right_sidebar: ReactNode }) {
     const navigate = useNavigate();
-    const [loading, setLoading] = useState(true);
+    const { permissions, loading } = usePermissions();
-    const [permissions, setPermissions] = useState<Set<string>>(new Set());
     
-    useEffect(function () {
-        async function load() {
-            try {
-                const user = await fetchUser();
-
-                const permissions = new Set<string>();
-
-                for (const p of user.direct_permissions) {
-                    permissions.add(p.permission);
-                }
-                for (const g of user.group) {
-                    for (const p of g.permissions) {
-                        permissions.add(p.permission);
-                    }
-                }
-                setPermissions(permissions);
-                setLoading(false);
-            } catch {
-                navigate("/");
-            }
-        }
-        load();
-    }, [navigate]);
     if (loading) {
         return null;
     }
+
     async function handleLogout() {
         await logout();
         navigate("/");

frontend/src/utils/permissions.ts

@@ -0,0 +1,16 @@
+import { fetchUser } from "../api/UserAPI/User";
+
+export async function loadPermissions(): Promise<Set<string>> {
+    const user = await fetchUser();
+
+    const permissions = new Set<string>();
+    for (const p of user.direct_permissions) {
+        permissions.add(p.permission);
+    }
+    for (const g of user.group) {
+        for (const p of g.permissions) {
+            permissions.add(p.permission);
+        }
+    }
+    return permissions;
+}