Merge branch 'main' of https://grond.iut-fbleau.fr/descampsv/2024-DEV-BUT3
This commit is contained in:
commit
e321927283
1
package-lock.json
generated
1
package-lock.json
generated
@ -18,6 +18,7 @@
|
|||||||
"react-router-dom": "^6.21.3"
|
"react-router-dom": "^6.21.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"antd": "^5.15.4",
|
||||||
"@playwright/test": "^1.42.1",
|
"@playwright/test": "^1.42.1",
|
||||||
"@testing-library/react": "^14.1.2",
|
"@testing-library/react": "^14.1.2",
|
||||||
"@types/node": "^20.11.9",
|
"@types/node": "^20.11.9",
|
||||||
|
@ -24,6 +24,7 @@
|
|||||||
"react-router-dom": "^6.21.3"
|
"react-router-dom": "^6.21.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"antd": "^5.15.4",
|
||||||
"@playwright/test": "^1.42.1",
|
"@playwright/test": "^1.42.1",
|
||||||
"@testing-library/react": "^14.1.2",
|
"@testing-library/react": "^14.1.2",
|
||||||
"@types/node": "^20.11.9",
|
"@types/node": "^20.11.9",
|
||||||
|
@ -1,13 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
import { Authenticated } from "./components";
|
|
||||||
|
|
||||||
import { Router } from "./router";
|
|
||||||
|
|
||||||
const App = () => (
|
|
||||||
<Authenticated>
|
|
||||||
<Router />
|
|
||||||
</Authenticated>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default App;
|
|
@ -3,10 +3,12 @@ import React from "react";
|
|||||||
import { Authenticated } from "./components";
|
import { Authenticated } from "./components";
|
||||||
|
|
||||||
import { Router } from "./router";
|
import { Router } from "./router";
|
||||||
|
import Navbar from "./components/nav/Navbar";
|
||||||
|
|
||||||
const App = () => (
|
const App = () => (
|
||||||
<Authenticated>
|
<Authenticated>
|
||||||
<Router />
|
<Router />
|
||||||
|
<Navbar></Navbar>
|
||||||
</Authenticated>
|
</Authenticated>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
10
src/api/room.js
Normal file
10
src/api/room.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
export const getRoom = async () => {
|
||||||
|
try {
|
||||||
|
const response = await axios.get("/room", {});
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
return error.response.data;
|
||||||
|
}
|
||||||
|
};
|
83
src/components/nav/Navbar.jsx
Normal file
83
src/components/nav/Navbar.jsx
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
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 { Home } from "../../pages";
|
||||||
|
import { getRoom } from "../../api/room";
|
||||||
|
import { getAuth, useAuth } from "../../hooks";
|
||||||
|
function getItem(label, key, icon, children, type) {
|
||||||
|
return {
|
||||||
|
key,
|
||||||
|
icon,
|
||||||
|
children,
|
||||||
|
label,
|
||||||
|
type,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Component
|
||||||
|
const Navbar = () => {
|
||||||
|
//Hook calls
|
||||||
|
const [collapsed, setCollapsed] = useState(false);
|
||||||
|
const toggleCollapsed = () => {
|
||||||
|
setCollapsed(!collapsed);
|
||||||
|
};
|
||||||
|
const [rooms, setRooms] = useState([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (user) {
|
||||||
|
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 />);
|
||||||
|
}),
|
||||||
|
]),
|
||||||
|
];
|
||||||
|
|
||||||
|
// 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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default Navbar;
|
@ -5,3 +5,7 @@ import { AuthenticationContext } from "../contexts";
|
|||||||
export function useAuth() {
|
export function useAuth() {
|
||||||
return React.useContext(AuthenticationContext);
|
return React.useContext(AuthenticationContext);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getAuth() {
|
||||||
|
return React.useContext(AuthenticationContext).user;
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user