utilize cart context for header cart button

This commit is contained in:
oscar 2023-03-18 13:15:41 +13:00
parent 42813be6a6
commit d7ef59f2a6

View File

@ -1,14 +1,22 @@
import CartIcon from "../Cart/CartIcon"; import CartIcon from "../Cart/CartIcon";
import classes from "./HeaderCartButton.module.css"; import classes from "./HeaderCartButton.module.css";
import CartContext from "../../store/cart-context";
import { useContext } from "react";
const HeaderCartButton = (props) => { const HeaderCartButton = (props) => {
const cartCtx = useContext(CartContext);
const numberOfCartItems = cartCtx.items.reduce((curNumber, item) => {
return curNumber + item.amount;
}, 0);
return ( return (
<button className={classes.button} onClick={props.onShowCart}> <button className={classes.button} onClick={props.onShowCart}>
<span className={classes.icon}> <span className={classes.icon}>
<CartIcon /> <CartIcon />
</span> </span>
<span>Your Cart</span> <span>Your Cart</span>
<span className={classes.badge}>3</span> <span className={classes.badge}>{numberOfCartItems}</span>
</button> </button>
); );
}; };