memartel/GGMM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

21
GrossesMitaines/grosses-mitaines-ui/src/components/App.js
View File

@@ -13,29 +13,27 @@ import Register from "../pages/Register";
import Formulaire from "../pages/Formulaire";
import { useState, useEffect } from "react";
import React from 'react';
const UserContext = React.createContext();
import { useCookies } from 'react-cookie';
const App = () => {
const [user, setUser] = useState(null);
const [cookies, setCookie] = useCookies(['name']);
useEffect(() => {
async function FetchUser() {
const response = await fetch(`https://localhost:7292/api/WhoAmI`, { credentials: 'include'});
const response = await fetch(`https://localhost:7292/api/WhoAmI`, { credentials: 'include' });
if (response.status === 200) {
setUser(await response.json());
var user = await response.json();
setCookie('GMGM', {...user, LoggedIn:true}, { path: '/', sameSite:'strict' })
}
else setUser({hasCookie: false})
console.log(user)
else setCookie('GMGM', {LoggedIn:false}, { path: '/', sameSite:'strict' })
}
if (user === null) {
if (cookies.GMGM === null) {
FetchUser();
}
});
return (
<BrowserRouter>
<UserContext.Provider value={user}>
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
@@ -51,8 +49,7 @@ const App = () => {
<Route path="formulaire" element={<Formulaire/>}/>
</Route>
</Routes>
</UserContext.Provider>
</BrowserRouter>
</BrowserRouter>
);
};

76
GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
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>