From ce7158fc15e510a4c99f7878be4b8e78cba6efb8 Mon Sep 17 00:00:00 2001
From: Tyrel Souza <tyrel@tyrelsouza.com>
Date: Mon, 26 Sep 2022 13:26:51 -0400
Subject: [PATCH] carttem and funcs

---
 ordering/src/components/Cart/Cart.js         | 34 +++++++++++++++-----
 ordering/src/components/Cart/Cart.module.css |  2 +-
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/ordering/src/components/Cart/Cart.js b/ordering/src/components/Cart/Cart.js
index 6eab667..d4f17d2 100644
--- a/ordering/src/components/Cart/Cart.js
+++ b/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>
     )
diff --git a/ordering/src/components/Cart/Cart.module.css b/ordering/src/components/Cart/Cart.module.css
index f6ffe47..b9687f8 100644
--- a/ordering/src/components/Cart/Cart.module.css
+++ b/ordering/src/components/Cart/Cart.module.css
@@ -3,7 +3,7 @@
   margin: 0;
   padding: 0;
   max-height: 20rem;
-  overflow: auto;
+  overflow: scroll;
 }
 
 .total {