carttem and funcs

ordering/src/components/Cart/Cart.js

@@ -1,15 +1,33 @@
-import React from "react"
+import React, { useContext } from "react"
 import classes from "./Cart.module.css"
+import CartItem from "./CartItem"
+
 import Modal from "../UI/Modal"
+import CartContext from "../../store/cart-context"
 
 function Cart(props) {
+    const cartCtx = useContext(CartContext)
+
+    const totalAmount = `$${cartCtx.totalAmount.toFixed(2)}`
+    const hasItems = cartCtx.items.length > 0
+
+    const cartItemRemoveHandler = id => {}
+    const cartItemAddHandler = items => {}
+
     const cartItems = (
         <ul className={classes["cart-items"]}>
-            {[{ id: "c1", name: "Sushi", amount: 2, price: 12.99 }].map(
-                (item) => (
-                    <li>{item.name}</li>
-                )
-            )}
+            {cartCtx.items.map((item) => (
+                <CartItem
+                    key={item.id}
+                    name={item.name}
+                    amount={item.amount}
+                    price={item.price}
+                    onRemove={cartItemRemoveHandler.bind(null, item.id)}
+                    onAdd={cartItemAddHandler.bind(null, item)}
+                >
+                    {item.name}
+                </CartItem>
+            ))}
         </ul>
     )
 
@@ -18,7 +36,7 @@ function Cart(props) {
             {cartItems}
             <div className={classes.total}>
                 <span>Total Amount</span>
-                <span>35.62</span>
+                <span>{totalAmount}</span>
             </div>
             <div className={classes.actions}>
                 <button
@@ -27,7 +45,7 @@ function Cart(props) {
                 >
                     Close
                 </button>
-                <button className={classes.button}>Order</button>
+                {hasItems && <button className={classes.button}>Order</button>}
             </div>
         </Modal>
     )

ordering/src/components/Cart/Cart.module.css

@@ -3,7 +3,7 @@
   margin: 0;
   padding: 0;
   max-height: 20rem;
-  overflow: auto;
+  overflow: scroll;
 }
 
 .total {