petits ajustements et début boutton cart

This commit is contained in:
Victor Turgeon
2022-11-06 14:49:53 -05:00
parent 5c789e2cc7
commit ed04dc8293
4 changed files with 160 additions and 133 deletions

View File

@@ -0,0 +1,15 @@
import { Button } from "react-bootstrap";
import { faCartShopping } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const CartButton = () =>{
return(
<Button id="cart-button">
<FontAwesomeIcon icon={faCartShopping}/>
<div id="cart-count">3</div>
</Button>
)
}
export default CartButton;

View File

@@ -9,8 +9,8 @@ const ItemList = ({ items }) => {
{items.length <= 0 && <p>Aucun morceaux à montrer...</p>}
{items.map((item) =>
<Link key={item.id} className='item-link' to={`/morceaux/${item.id}`}>
<Item
productId={item.id}
<Item
productId={item.id}
name={item.title}
price={item.price}
status={item.status}
@@ -19,7 +19,7 @@ const ItemList = ({ items }) => {
</Link>
)}
</div>
</>
)

View File

@@ -6,6 +6,7 @@ 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']);
@@ -15,14 +16,14 @@ const Topbar = () => {
async function reset() {
await setLogin(await cookies.GMGM ?? null);
}
reset();
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?!?
}
@@ -52,73 +53,74 @@ const Topbar = () => {
Vie privée
</Link>
{(user === null || user.LoggedIn === false) &&
<Link className="nav-link" to="/login" >
Connexion
</Link>
<Link className="nav-link" to="/login" >
Connexion
</Link>
}
{(user === null || user.LoggedIn === false) &&
<Link className="nav-link" to="/register">
S'inscrire
</Link>
<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>
<Button className="nav-link" onClick={() => logOut()}>
Déconnexion
</Button>
</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>
<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>
<Button className="nav-link" onClick={() => logOut()}>
Déconnexion
</Button>
</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>