Ajout react-cookie. (Besoin de reloader pour que la topbar suive le cookie)

This commit is contained in:
MarcEricMartel
2022-11-06 06:21:55 -08:00
parent 82195303eb
commit 10254a6439
8 changed files with 212 additions and 34 deletions

View File

@@ -4,9 +4,16 @@ import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import { Link } from "react-router-dom";
import Dropdown from "react-bootstrap/Dropdown";
import { useCookies } from "react-cookie";
const Topbar = () => {
const user = null;
const [cookies, setCookie] = useCookies(['name']);
var user = cookies.GMGM ?? null;
useEffect(() => {
if (cookies.GMGM !== user)
user = cookies.GMGM;
});
return (
<Navbar expand="sm" className="topbar-container">
<Container>
@@ -31,35 +38,72 @@ const Topbar = () => {
<Link className="nav-link" to="/privacy" >
Vie privée
</Link>
{user !== null && user.hasCookie === false &&
{(user === null || user.LoggedIn === false) &&
<Link className="nav-link" to="/login" >
Connexion
</Link>
}
{user !== null && user.hasCookie === false &&
{(user === null || user.LoggedIn === false) &&
<Link className="nav-link" to="/register">
S'inscrire
</Link>
}
{user !== null && user.hasCookie === true &&
<Link className="nav-link" to="/logout" >
Déconnexion
</Link>
}
{user !== null && user.hasCookie === true && user.role === "Administrateur" &&
{user !== null && user.LoggedIn &&
<Dropdown className="dropdown-gestion-container">
<Dropdown.Toggle className="dropdown-gestion" >
<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" >
Déconnexion
</Link>
</Dropdown.Item>
{user.role === "Administrateur" &&
<Container>
<Dropdown.Divider/>
<Dropdown.ItemText>
Gestion
</Dropdown.Toggle>
<Dropdown.Menu className="dropdown-gestion-menu">
<Dropdown.Item>
</Dropdown.ItemText>
<Dropdown.Item>
<Link className="nav-link" to="/inventaire" >
Inventaire
</Link>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<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>
</Navbar.Collapse>