This commit is contained in:
Victor 2024-04-04 10:33:20 +02:00
commit e321927283
7 changed files with 101 additions and 13 deletions

1
package-lock.json generated
View File

@ -18,6 +18,7 @@
"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",

View File

@ -24,6 +24,7 @@
"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",

View File

@ -1,13 +0,0 @@
import React from "react";
import { Authenticated } from "./components";
import { Router } from "./router";
const App = () => (
<Authenticated>
<Router />
</Authenticated>
);
export default App;

View File

@ -3,10 +3,12 @@ import React from "react";
import { Authenticated } from "./components";
import { Router } from "./router";
import Navbar from "./components/nav/Navbar";
const App = () => (
<Authenticated>
<Router />
<Navbar></Navbar>
</Authenticated>
);

10
src/api/room.js Normal file
View 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;
}
};

View 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;

View File

@ -5,3 +5,7 @@ import { AuthenticationContext } from "../contexts";
export function useAuth() {
return React.useContext(AuthenticationContext);
}
export function getAuth() {
return React.useContext(AuthenticationContext).user;
}