layout + navbar

.vs/2024-DEV-BUT3/v17/DocumentLayout.json

@@ -0,0 +1,23 @@
+{
+  "Version": 1,
+  "WorkspaceRootPath": "C:\\Users\\Admin\\source\\repos\\2024-DEV-BUT3\\",
+  "Documents": [],
+  "DocumentGroupContainers": [
+    {
+      "Orientation": 0,
+      "VerticalTabListWidth": 256,
+      "DocumentGroups": [
+        {
+          "DockedWidth": 200,
+          "SelectedChildIndex": -1,
+          "Children": [
+            {
+              "$type": "Bookmark",
+              "Name": "ST:1:0:{d212f56b-c48a-434c-a121-1c5d80b59b9f}"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

.vs/ProjectSettings.json

@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}

.vs/VSWorkspaceState.json

@@ -0,0 +1,7 @@
+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "SelectedNode": "\\C:\\Users\\Admin\\Source\\Repos\\2024-DEV-BUT3",
+  "PreviewInSolutionExplorer": false
+}

package.json

@@ -15,7 +15,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "antd": "^5.15.4",
+    "@ant-design/icons": "^5.3.7",
     "axios": "^1.6.7",
     "bootstrap": "^5.3.3",
     "react": "^18.2.0",
@@ -24,13 +24,13 @@
     "react-router-dom": "^6.21.3"
   },
   "devDependencies": {
-    "antd": "^5.15.4",
     "@playwright/test": "^1.42.1",
     "@testing-library/react": "^14.1.2",
     "@types/node": "^20.11.9",
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "antd": "^5.17.0",
     "eslint": "^8.55.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",

src/App.jsx

@@ -4,11 +4,17 @@ import { Authenticated } from "./components";
 
 import { Router } from "./router";
 import Navbar from "./components/nav/Navbar";
+import AppLayout from "./components/app-layout";
+import { PageTitleProvider } from "./hooks/page-title-context";
 
 const App = () => (
     <Authenticated>
-    <Router />
-    {/* <Navbar></Navbar> */}
+        <PageTitleProvider>
+            <AppLayout>
+            
+            </AppLayout>
+        </PageTitleProvider>
+        
       </Authenticated>
 );
 

src/api/room.js

@@ -1,10 +1,14 @@
 import axios from "axios";
 
+
+
 export const getRoom = async () => {
     try {
         const response = await axios.get("/room", {});
+        console.log(response.data)
         return response.data;
     } catch (error) {
+        console.log("ERROR", error.response.data)
         return error.response.data;
     }
 };

src/components/app-layout.jsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Layout, Menu, theme, Button } from 'antd';
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import { Router } from '../router';
+import { usePageTitle } from '../hooks/page-title-context';
+import Navbar from './nav/Navbar';
+const { Header, Content, Footer, Sider } = Layout;
+
+
+
+
+
+
+
+
+const AppLayout = ({ navbar, footer }) => {
+    const [collapsed, setCollapsed] = useState(false);
+    const { pageTitle } = usePageTitle();
+    const {
+        token: { colorBgContainer, borderRadiusLG },
+    } = theme.useToken();
+
+    return (
+        <Layout >
+            <Sider breakpoint="lg" collapsible collapsed={collapsed}>
+                <div className="demo-logo-vertical" />
+                <Navbar/>
+            </Sider>
+            <Layout>
+                <Header style={{ padding: 0, background: colorBgContainer }}>
+                    <Button type="text" icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} onClick={() => setCollapsed(!collapsed)} style={{fontSize: '16px', width: 64, height: 64}}/>
+                    {pageTitle}
+                </Header>
+
+                <Content style={{margin: '24px 16px 0'}}>
+                    <div style={{padding: 24, minHeight: 360, background: colorBgContainer, borderRadius: borderRadiusLG}}>
+                        <Router />
+                    </div>
+                </Content>
+                <Footer style={{ textAlign: 'center' }}>
+                    {footer}
+                    <br />
+                    Ant Design ©{new Date().getFullYear()} Created by Ant UED
+                </Footer>
+            </Layout>
+        </Layout>
+    );
+};
+export default AppLayout;

src/components/nav/Navbar.jsx

@@ -1,23 +1,11 @@
-import React, { useState } from "react";
-import { Authenticated } from "..";
-import { Router } from "../../router";
-
-import {
-  AppstoreOutlined,
-  ContainerOutlined,
-  DesktopOutlined,
-  MailOutlined,
-  MenuFoldOutlined,
-  MenuUnfoldOutlined,
-  PieChartOutlined,
-} from "@ant-design/icons";
-import { Button, Menu } from "antd";
+import React, { useState, useEffect } from "react";
+import { HomeOutlined } from '@ant-design/icons-svg';
+import { Menu } from "antd";
 import { Home } from "../../pages";
 import { getRoom } from "../../api/room";
-import { getAuth, useAuth } from "../../hooks";
-function getItem(label, key, icon, children, type) {
+function getItem(label, key, type, icon, children) {
   return {
-    key,
+      key: String(key),
       icon,
       children,
       label,
@@ -28,56 +16,40 @@ function getItem(label, key, icon, children, type) {
 // Component
 const Navbar = () => {
   //Hook calls
-  const [collapsed, setCollapsed] = useState(false);
-  const toggleCollapsed = () => {
-    setCollapsed(!collapsed);
-  };
     const [rooms, setRooms] = useState([]);
 
   useEffect(() => {
-    if (user) {
+      if (true) {
         getRoom().then((result) => {
         setRooms(result);
       });
     }
   }, []);
 
+    const roomItems = rooms.map((room, index) => (
+        getItem(room.name, `sub${index}`, <Home />)
+    ));
+
     const items = [
         getItem("Menu principal", "1", <Home />),
         getItem("Vue d'ensemble", "2", <Home />),
-    getItem("Chambres", "3", <Home />, [
-      rooms.forEach((room, i = 0) => {
-        i++;
-        getItem(room.name, `sub${i}`, <Home />);
-      }),
-    ]),
+        {
+            key: "3",
+            label: "Chambres",
+            icon: "",
+            children: roomItems, // Utilisation des éléments de menu des chambres
+        },
     ];
 
-  // Rendering
+    // Rendu du composant Navbar
     return (
-    <div
-      style={{
-        width: 256,
-      }}
-    >
-      <Button
-        type="primary"
-        onClick={toggleCollapsed}
-        style={{
-          marginBottom: 16,
-        }}
-      >
-        {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
-      </Button>
         <Menu
             defaultSelectedKeys={["1"]}
             defaultOpenKeys={["sub1"]}
-        mode="inline"
             theme="dark"
-        inlineCollapsed={collapsed}
+            mode="inline"
             items={items}
         />
-    </div>
     );
 };
 export default Navbar;

src/hooks/index.js

@@ -1,2 +1,3 @@
 export * from "./use-auth";
 export * from "./use-query";
+export * from "./page-title-context";

src/hooks/page-title-context.jsx

@@ -0,0 +1,23 @@
+import { createContext, useContext, useState } from 'react';
+
+const PageTitleContext = createContext();
+
+// Composant de fournisseur de titre de page
+export const PageTitleProvider = ({ children }) => {
+    const [pageTitle, setPageTitle] = useState("");
+
+    return (
+        <PageTitleContext.Provider value={{ pageTitle, setPageTitle }}>
+            {children}
+        </PageTitleContext.Provider>
+    );
+};
+
+// Hook pour récupérer le titre de la page
+export const usePageTitle = () => {
+    const context = useContext(PageTitleContext);
+    if (!context) {
+        throw new Error('usePageTitle must be used within a PageTitleProvider');
+    }
+    return context;
+};

src/hooks/use-auth.js

@@ -6,6 +6,6 @@ export function useAuth() {
   return React.useContext(AuthenticationContext);
 }
 
-export function getAuth() {
-  return React.useContext(AuthenticationContext).user;
-}
+//export function getAuth() {
+//  return React.useContext(AuthenticationContext).user;
+//}

src/pages/test.jsx

@@ -1,14 +1,19 @@
-import React from "react";
+import React, { useEffect } from 'react';
 
 import { useAuth } from "../hooks";
 import { ItemPage } from "../components/item/ItemPage";
+import { usePageTitle } from '../hooks/page-title-context';
 
 export const Test = () => {
   const { user } = useAuth();
+    const { setPageTitle } = usePageTitle();
 
+    // Mettre à jour le titre de la page dans le contexte
+    useEffect(() => {
+        setPageTitle("Vive la macronie à bat montjoie saint dennis");
+    }, [setPageTitle]);
   return (
     <div>
-      <h1>Vive la macronie à bat montjoie saint dennis</h1>
       <ItemPage></ItemPage>
     </div>
   );