134 lines
6.5 KiB
JavaScript
134 lines
6.5 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import Container from 'react-bootstrap/Container';
|
|
import Nav from 'react-bootstrap/Nav';
|
|
import Navbar from 'react-bootstrap/Navbar';
|
|
import Button from 'react-bootstrap/Button';
|
|
import { Link } from "react-router-dom";
|
|
import Dropdown from "react-bootstrap/Dropdown";
|
|
import { useCookies } from "react-cookie";
|
|
import CartButton from "./CartButton";
|
|
|
|
const Topbar = () => {
|
|
const [cookies, setCookie, removeCookie] = useCookies(['name']);
|
|
const [user, setLogin] = useState(null);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
async function reset() {
|
|
await setLogin(await cookies.GMGM ?? null);
|
|
}
|
|
reset();
|
|
});
|
|
|
|
async function logOut() {
|
|
const response = fetch(`https://localhost:7292/api/Logout`, {
|
|
method: 'POST',
|
|
credentials: 'include'
|
|
})
|
|
await removeCookie("GMGM");
|
|
await setLogin(null); // Y U NO WORK?!?
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Navbar expand="sm" className="topbar-container">
|
|
<Container>
|
|
<Link className="navbar-brand" to="/">
|
|
<img src="/images/LesGrossesMitaines.png" alt="" height="45" />
|
|
</Link>
|
|
<Navbar.Toggle aria-controls="basic-navbar-nav" />
|
|
<Navbar.Collapse id="basic-navbar-nav">
|
|
<Nav className="me-auto">
|
|
<Link className="nav-link" to="/" >
|
|
Maison
|
|
</Link>
|
|
<Link className="nav-link" to="/morceaux" >
|
|
Morceaux
|
|
</Link>
|
|
<Link className="nav-link" to="/aboutUs" >
|
|
À propos de nous
|
|
</Link>
|
|
<Link className="nav-link" to="/contactUs" >
|
|
Contactez-nous
|
|
</Link>
|
|
<Link className="nav-link" to="/privacy" >
|
|
Vie privée
|
|
</Link>
|
|
{(user === null || user.LoggedIn === false) &&
|
|
<Link className="nav-link" to="/login" >
|
|
<b>Connexion</b>
|
|
</Link>
|
|
}
|
|
{(user === null || user.LoggedIn === false) &&
|
|
<Link className="nav-link" to="/register">
|
|
S'inscrire
|
|
</Link>
|
|
}
|
|
{user !== null && user.LoggedIn &&
|
|
<Dropdown className="dropdown-gestion-container">
|
|
<Dropdown.Toggle className="dropdown-gestion" >
|
|
Bonjour, {user.firstName} {user.lastName}!
|
|
</Dropdown.Toggle>
|
|
<Dropdown.Menu className="dropdown-gestion-menu">
|
|
<Dropdown.Item>
|
|
<Link className="nav-link" to="/myaccount" >
|
|
Mon Compte
|
|
</Link>
|
|
</Dropdown.Item>
|
|
<Dropdown.Item>
|
|
<Link className="nav-link" to="/myaddresses" >
|
|
Mes Addresses
|
|
</Link>
|
|
</Dropdown.Item>
|
|
<Dropdown.Item>
|
|
<Link className="nav-link" to="/myinvoices" >
|
|
Mes Commandes
|
|
</Link>
|
|
</Dropdown.Item>
|
|
<Dropdown.Item>
|
|
<Link className="nav-link" to="/logout">
|
|
<b>Déconnexion</b>
|
|
</Link>
|
|
</Dropdown.Item>
|
|
{user.role === "Administrateur" &&
|
|
<Container>
|
|
<Dropdown.Divider />
|
|
<Dropdown.ItemText>
|
|
Gestion
|
|
</Dropdown.ItemText>
|
|
<Dropdown.Item>
|
|
<Link className="nav-link" to="/inventaire" >
|
|
Inventaire
|
|
</Link>
|
|
</Dropdown.Item>
|
|
<Dropdown.Item>
|
|
<Link className="nav-link" to="/invoices" >
|
|
Commandes
|
|
</Link>
|
|
</Dropdown.Item>
|
|
<Dropdown.Item>
|
|
<Link className="nav-link" to="/clients" >
|
|
Clients
|
|
</Link>
|
|
</Dropdown.Item>
|
|
<Dropdown.Item>
|
|
<Link className="nav-link" to="/addresses" >
|
|
Adresses
|
|
</Link>
|
|
</Dropdown.Item>
|
|
</Container>
|
|
}
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
}
|
|
</Nav>
|
|
<CartButton/>
|
|
</Navbar.Collapse>
|
|
</Container>
|
|
</Navbar>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Topbar; |