count cart items

ordering/src/App.js

@@ -1,16 +1,27 @@
+import { useState } from "react"
 import Header from "./components/Layout/Header"
 import Meals from "./components/Meals/Meals"
 import Cart from "./components/Cart/Cart"
+import CartProvider from "./store/CartProvider"
 
 function App() {
+    const [cartIsShown, setCartIsShown] = useState(false)
+
+    const showCartHandler = () => {
+        setCartIsShown(true)
+    }
+    const hideCartHandler = () => {
+        setCartIsShown(false)
+    }
+
     return (
-        <>
-            <Cart />
-            <Header />
+        <CartProvider>
+            {cartIsShown && <Cart onClose={hideCartHandler} />}
+            <Header onShowCart={showCartHandler} />
             <main>
                 <Meals />
             </main>
-        </>
+        </CartProvider>
     )
 }
 

ordering/src/components/Cart/Cart.js

@@ -14,15 +14,20 @@ function Cart(props) {
     )
 
     return (
-        <Modal>
+        <Modal onClose={props.onClose}>
             {cartItems}
             <div className={classes.total}>
-              <span>Total Amount</span>
-              <span>35.62</span>
+                <span>Total Amount</span>
+                <span>35.62</span>
             </div>
             <div className={classes.actions}>
-              <button className={classes['button--alt']}>Close</button>
-              <button className={classes.button}>Order</button>
+                <button
+                    onClick={props.onClose}
+                    className={classes["button--alt"]}
+                >
+                    Close
+                </button>
+                <button className={classes.button}>Order</button>
             </div>
         </Modal>
     )

ordering/src/components/Layout/Header.js

@@ -8,7 +8,7 @@ function Header(props) {
         <>
             <header className={classes.header}>
                 <h1>React Meals</h1>
-                <HeaderCartButton/>
+                <HeaderCartButton onClick={props.onShowCart}/>
             </header>
             <div className={classes["main-image"]}>
                 <img src={mealsImage} alt="Table full of delicious food." />

ordering/src/components/Layout/HeaderCartButton.js

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

ordering/src/components/UI/Modal.js

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom"
 import classes from "./Modal.module.css"
 
 const Backdrop = (props) => {
-    return <div className={classes.backdrop} />
+    return <div className={classes.backdrop} onClick={props.onClose} />
 }
 const ModalOverlay = (props) => {
     return (
@@ -18,7 +18,7 @@ const portalElement = document.getElementById("overlays")
 function Modal(props) {
     return (
         <>
-            {ReactDOM.createPortal(<Backdrop />, portalElement)}
+            {ReactDOM.createPortal(<Backdrop onClose={props.onClose}/>, portalElement)}
             {ReactDOM.createPortal(
                 <ModalOverlay>{props.children}</ModalOverlay>,
                 portalElement

ordering/src/store/CartProvider.js

@@ -0,0 +1,21 @@
+import CartContext from "./cart-context"
+
+const CartProvider = (props) => {
+    const addItemToCartHandler = (item) => {}
+    const removeItemToCartHandler = (id) => {}
+
+    const cartContext = {
+        items: [],
+        totalAmount: 0,
+        addItem: addItemToCartHandler,
+        removeItem: removeItemToCartHandler,
+    }
+
+    return (
+        <CartContext.Provider value={cartContext}>
+            {props.children}
+        </CartContext.Provider>
+    )
+}
+
+export default CartProvider

ordering/src/store/cart-context.js

@@ -0,0 +1,10 @@
+import React from "react"
+
+const CartContext = React.createContext({
+    items: [],
+    totalAmount: 0,
+    addItem: (item) => {},
+    removeItem: (id) => {},
+})
+
+export default CartContext