fix: correction des refresh des protected routes [#36]

Front-End/src/app/[locale]/admin/layout.js

@@ -43,7 +43,12 @@ export default function Layout({
 }) {
   const t = useTranslations('sidebar');
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const { data: session } = useSession();
+  const { selectedEstablishmentId, setSelectedEstablishmentId, profileRole, setProfileRole, establishments, user } = useEstablishment();
 
+
+
+  // Déplacer le reste du code ici...
   const sidebarItems = {
     "admin": { "id": "admin", "name": t('dashboard'), "url": FE_ADMIN_HOME_URL, "icon": LayoutDashboard },
     "subscriptions": { "id": "subscriptions", "name": t('subscriptions'), "url": FE_ADMIN_SUBSCRIPTIONS_URL, "icon": FileText },
@@ -56,8 +61,6 @@ export default function Layout({
 
   const [isLoading, setIsLoading] = useState(false);
   const [isPopupVisible, setIsPopupVisible] = useState(false);
-  const { data: session } = useSession();
-  const { selectedEstablishmentId, setSelectedEstablishmentId, profileRole, setProfileRole, establishments, user } = useEstablishment();
 
   const pathname = usePathname();
   const currentPage = pathname.split('/').pop();
@@ -109,75 +112,74 @@ export default function Layout({
 
   return (
     <ProtectedRoute requiredRight={RIGHTS.ADMIN}>
-      {!isLoading && (
-        <div className="flex min-h-screen bg-gray-50 relative">
-          {/* Sidebar avec hauteur forcée */}
+      <div className="flex min-h-screen bg-gray-50 relative">
+        {/* Retirer la condition !isLoading car on gère déjà le chargement au début */}
+        {/* Sidebar avec hauteur forcée */}
+        <div
+          className={`md:block ${isSidebarOpen ? 'block' : 'hidden'} fixed md:relative inset-y-0 left-0 z-30 h-full`}
+          style={{ height: '100vh' }} // Force la hauteur à 100% de la hauteur de la vue
+        >
+          <Sidebar
+            establishments={establishments}
+            currentPage={currentPage}
+            items={Object.values(sidebarItems)}
+            onCloseMobile={toggleSidebar}
+            onEstablishmentChange={(establishmentId) => {
+              const parsedEstablishmentId = parseInt(establishmentId, 10);
+              setSelectedEstablishmentId(parsedEstablishmentId);
+              const role = session.user.roles.find(role => role.establishment__id === parsedEstablishmentId)?.role_type;
+              setProfileRole(role);
+            }}
+          />
+        </div>
+
+        {/* Overlay pour fermer la sidebar en cliquant à l'extérieur sur mobile */}
+        {isSidebarOpen && (
           <div
-            className={`md:block ${isSidebarOpen ? 'block' : 'hidden'} fixed md:relative inset-y-0 left-0 z-30 h-full`}
-            style={{ height: '100vh' }} // Force la hauteur à 100% de la hauteur de la vue
-          >
-            <Sidebar
-              establishments={establishments}
-              currentPage={currentPage}
-              items={Object.values(sidebarItems)}
-              onCloseMobile={toggleSidebar}
-              onEstablishmentChange={(establishmentId) => {
-                const parsedEstablishmentId = parseInt(establishmentId, 10);
-                setSelectedEstablishmentId(parsedEstablishmentId);
-                const role = session.user.roles.find(role => role.establishment__id === parsedEstablishmentId)?.role_type;
-                setProfileRole(role);
-              }}
-            />
-          </div>
+            className="fixed inset-0 bg-black bg-opacity-50 z-20 md:hidden"
+            onClick={toggleSidebar}
+          />
+        )}
 
-          {/* Overlay pour fermer la sidebar en cliquant à l'extérieur sur mobile */}
-          {isSidebarOpen && (
-            <div
-              className="fixed inset-0 bg-black bg-opacity-50 z-20 md:hidden"
-              onClick={toggleSidebar}
-            />
-          )}
-
-          <div className="flex-1 flex flex-col">
-            {/* Header responsive */}
-            <header className="h-16 bg-white border-b border-gray-200 px-4 md:px-8 py-4 flex items-center justify-between z-10">
-              <div className="flex items-center">
-                <button
-                  className="mr-4 md:hidden text-gray-600 hover:text-gray-900"
-                  onClick={toggleSidebar}
-                  aria-label="Toggle menu"
-                >
-                  {isSidebarOpen ? <X size={24} /> : <Menu size={24} />}
-                </button>
-                <div className="text-lg md:text-xl font-semibold">{headerTitle}</div>
-              </div>
-              <DropdownMenu
-                buttonContent={
-                  <Image
-                    src={getGravatarUrl(user?.email)}
-                    alt="Profile"
-                    className="w-8 h-8 rounded-full cursor-pointer"
-                    width={32}
-                    height={32}
-                  />
-                }
-                items={dropdownItems}
-                buttonClassName=""
-                menuClassName="absolute right-0 mt-2 w-64 bg-white border border-gray-200 rounded shadow-lg"
-              />
-            </header>
-            {/* Main Content */}
-            <div className="flex-1 flex flex-col">
-              {/* Content avec scroll si nécessaire */}
-              <div className="flex-1 overflow-auto p-4 md:p-6">
-                {children}
-              </div>
-              {/* Footer responsive */}
-              <Footer softwareName={softwareName} softwareVersion={softwareVersion} />
+        <div className="flex-1 flex flex-col">
+          {/* Header responsive */}
+          <header className="h-16 bg-white border-b border-gray-200 px-4 md:px-8 py-4 flex items-center justify-between z-10">
+            <div className="flex items-center">
+              <button
+                className="mr-4 md:hidden text-gray-600 hover:text-gray-900"
+                onClick={toggleSidebar}
+                aria-label="Toggle menu"
+              >
+                {isSidebarOpen ? <X size={24} /> : <Menu size={24} />}
+              </button>
+              <div className="text-lg md:text-xl font-semibold">{headerTitle}</div>
             </div>
+            <DropdownMenu
+              buttonContent={
+                <Image
+                  src={getGravatarUrl(user?.email)}
+                  alt="Profile"
+                  className="w-8 h-8 rounded-full cursor-pointer"
+                  width={32}
+                  height={32}
+                />
+              }
+              items={dropdownItems}
+              buttonClassName=""
+              menuClassName="absolute right-0 mt-2 w-64 bg-white border border-gray-200 rounded shadow-lg"
+            />
+          </header>
+          {/* Main Content */}
+          <div className="flex-1 flex flex-col">
+            {/* Content avec scroll si nécessaire */}
+            <div className="flex-1 overflow-auto p-4 md:p-6">
+              {children}
+            </div>
+            {/* Footer responsive */}
+            <Footer softwareName={softwareName} softwareVersion={softwareVersion} />
           </div>
         </div>
-      )}
+      </div>
       <Popup
         visible={isPopupVisible}
         message="Êtes-vous sûr(e) de vouloir vous déconnecter ?"