add to cart

ordering/src/components/Meals/MealItem/MealItem.js

@@ -1,8 +1,19 @@
+import { useContext } from "react"
 import classes from "./MealItem.module.css"
 import MealItemForm from "./MealItemForm"
+import CartContext from "../../../store/cart-context"
 
 function MealItem(props) {
+    const cartContext = useContext(CartContext)
     const price = `$${props.price.toFixed(2)}`
+    const addItemToCartHandler = (amount) => {
+        cartContext.addItem({
+            id: props.id,
+            name: props.name,
+            amount: amount,
+            price: props.price,
+        })
+    }
     return (
         <li className={classes.meal}>
             <div>
@@ -11,7 +22,10 @@ function MealItem(props) {
                 <div className={classes.price}>{price}</div>
             </div>
             <div>
-              <MealItemForm id={props.id}/>
+                <MealItemForm
+                    id={props.id}
+                    onAddToCart={addItemToCartHandler}
+                />
             </div>
         </li>
     )

ordering/src/components/Meals/MealItem/MealItemForm.js

@@ -1,13 +1,35 @@
+import { useRef, useState } from "react"
 import classes from "./MealItemForm.module.css"
 import Input from "../../UI/Input"
 
 function MealItemForm(props) {
+    const [amountIsValid, setAmountIsValid] = useState(true)
+
+    const amountInputRef = useRef()
+
+    const submitHandler = (event) => {
+        event.preventDefault()
+        const enteredAmount = amountInputRef.current.value
+        const enteredAmountNumber = +enteredAmount
+        if (
+            enteredAmount.trim().length === 0 ||
+            enteredAmountNumber < 1 ||
+            enteredAmountNumber > 5
+        ) {
+            setAmountIsValid(false)
+            return
+        }
+
+        props.onAddToCart(enteredAmountNumber)
+    }
+
     return (
-        <form className={classes.form}>
+        <form className={classes.form} onSubmit={submitHandler}>
             <Input
+                ref={amountInputRef}
                 label="Amount"
                 input={{
-                    id: "amount_" + props.id ,
+                    id: "amount_" + props.id,
                     type: "number",
                     min: "1",
                     max: "5",
@@ -16,6 +38,7 @@ function MealItemForm(props) {
                 }}
             />
             <button>+ Add</button>
+            {!amountIsValid && <p>Please enter a valid amount (1-5)</p>}
         </form>
     )
 }

ordering/src/components/UI/Input.js

@@ -1,11 +1,12 @@
+import React from "react"
 import classes from "./Input.module.css"
-function Input(props) {
+const Input = React.forwardRef((props, ref) => {
     return (
         <div className={classes.input}>
             <label htmlFor={props.input.id}>{props.label}</label>
-            <input {...props.input} />
+            <input ref={ref} {...props.input} />
         </div>
     )
-}
+})
 
 export default Input

ordering/src/store/CartProvider.js

@@ -1,12 +1,40 @@
+import { useReducer } from "react"
 import CartContext from "./cart-context"
 
-const CartProvider = (props) => {
+const defaultCartState = {
-    const addItemToCartHandler = (item) => {}
-    const removeItemToCartHandler = (id) => {}
-
-    const cartContext = {
     items: [],
     totalAmount: 0,
+}
+
+const cartReducer = (state, action) => {
+    if (action.type === "ADD") {
+        const updatedItems = state.items.concat(action.item)
+        const updatedTotalAmount =
+            state.totalAmount + action.item.price * action.item.amount
+        return {
+            items: updatedItems,
+            totalAmount: updatedTotalAmount,
+        }
+    }
+    return defaultCartState
+}
+
+const CartProvider = (props) => {
+    const [cartState, dispatchCartAction] = useReducer(
+        cartReducer,
+        defaultCartState
+    )
+
+    const addItemToCartHandler = (item) => {
+        dispatchCartAction({ type: "ADD", item })
+    }
+    const removeItemToCartHandler = (id) => {
+        dispatchCartAction({ type: "REMOVE", id })
+    }
+
+    const cartContext = {
+        items: cartState.items,
+        totalAmount: cartState.totalAmount,
         addItem: addItemToCartHandler,
         removeItem: removeItemToCartHandler,
     }