utilize cart context for header cart button
This commit is contained in:
parent
42813be6a6
commit
d7ef59f2a6
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user