layout + navbar
This commit is contained in:
parent
66cc9c6801
commit
135ab48886
1021
.vs/2024-DEV-BUT3/config/applicationhost.config
Normal file
1021
.vs/2024-DEV-BUT3/config/applicationhost.config
Normal file
File diff suppressed because it is too large
Load Diff
BIN
.vs/2024-DEV-BUT3/v17/.wsuo
Normal file
BIN
.vs/2024-DEV-BUT3/v17/.wsuo
Normal file
Binary file not shown.
23
.vs/2024-DEV-BUT3/v17/DocumentLayout.json
Normal file
23
.vs/2024-DEV-BUT3/v17/DocumentLayout.json
Normal file
@ -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}"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
3
.vs/ProjectSettings.json
Normal file
3
.vs/ProjectSettings.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"CurrentProjectSetting": null
|
||||
}
|
7
.vs/VSWorkspaceState.json
Normal file
7
.vs/VSWorkspaceState.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"ExpandedNodes": [
|
||||
""
|
||||
],
|
||||
"SelectedNode": "\\C:\\Users\\Admin\\Source\\Repos\\2024-DEV-BUT3",
|
||||
"PreviewInSolutionExplorer": false
|
||||
}
|
BIN
.vs/slnx.sqlite
Normal file
BIN
.vs/slnx.sqlite
Normal file
Binary file not shown.
264
package-lock.json
generated
264
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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",
|
||||
|
14
src/App.jsx
14
src/App.jsx
@ -4,12 +4,18 @@ 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> */}
|
||||
</Authenticated>
|
||||
<Authenticated>
|
||||
<PageTitleProvider>
|
||||
<AppLayout>
|
||||
|
||||
</AppLayout>
|
||||
</PageTitleProvider>
|
||||
|
||||
</Authenticated>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
@ -1,10 +1,14 @@
|
||||
import axios from "axios";
|
||||
|
||||
|
||||
|
||||
export const getRoom = async () => {
|
||||
try {
|
||||
const response = await axios.get("/room", {});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
return error.response.data;
|
||||
}
|
||||
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;
|
||||
}
|
||||
};
|
||||
|
49
src/components/app-layout.jsx
Normal file
49
src/components/app-layout.jsx
Normal file
@ -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;
|
@ -1,83 +1,55 @@
|
||||
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,
|
||||
icon,
|
||||
children,
|
||||
label,
|
||||
type,
|
||||
key: String(key),
|
||||
icon,
|
||||
children,
|
||||
label,
|
||||
type,
|
||||
};
|
||||
}
|
||||
|
||||
// Component
|
||||
const Navbar = () => {
|
||||
//Hook calls
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const toggleCollapsed = () => {
|
||||
setCollapsed(!collapsed);
|
||||
};
|
||||
const [rooms, setRooms] = useState([]);
|
||||
const [rooms, setRooms] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
getRoom().then((result) => {
|
||||
if (true) {
|
||||
getRoom().then((result) => {
|
||||
setRooms(result);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
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 />);
|
||||
}),
|
||||
]),
|
||||
];
|
||||
const roomItems = rooms.map((room, index) => (
|
||||
getItem(room.name, `sub${index}`, <Home />)
|
||||
));
|
||||
|
||||
// Rendering
|
||||
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}
|
||||
items={items}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
const items = [
|
||||
getItem("Menu principal", "1", <Home />),
|
||||
getItem("Vue d'ensemble", "2", <Home />),
|
||||
{
|
||||
key: "3",
|
||||
label: "Chambres",
|
||||
icon: "",
|
||||
children: roomItems, // Utilisation des éléments de menu des chambres
|
||||
},
|
||||
];
|
||||
|
||||
// Rendu du composant Navbar
|
||||
return (
|
||||
<Menu
|
||||
defaultSelectedKeys={["1"]}
|
||||
defaultOpenKeys={["sub1"]}
|
||||
theme="dark"
|
||||
mode="inline"
|
||||
items={items}
|
||||
/>
|
||||
);
|
||||
};
|
||||
export default Navbar;
|
||||
|
@ -1,2 +1,3 @@
|
||||
export * from "./use-auth";
|
||||
export * from "./use-query";
|
||||
export * from "./page-title-context";
|
||||
|
23
src/hooks/page-title-context.jsx
Normal file
23
src/hooks/page-title-context.jsx
Normal file
@ -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;
|
||||
};
|
@ -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;
|
||||
//}
|
||||
|
@ -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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user