permission context

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, 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]);
+    const { permissions, loading } = usePermissions();
+    
     if (loading) {
         return null;
     }
+
     async function handleLogout() {
         await logout();
         navigate("/");