final changes done. ready to go

src/App.js

@@ -1,21 +1,24 @@
-import "./App.css";
-import Header from "./components/Layout/Header";
 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 (
     <CartProvider>
-      {cartIsShown && <Cart onHideCart={hideCartHandler} />}
+      {cartIsShown && <Cart onClose={hideCartHandler} />}
       <Header onShowCart={showCartHandler} />
       <main>
         <Meals />

src/components/Cart/Cart.jsx

@@ -1,15 +1,23 @@
-import React from "react";
 import { useContext } from "react";
-import CartContext from "../../store/cart-context";
+
 import Modal from "../UI/Modal";
-import classes from "./Cart.module.css";
 import CartItem from "./CartItem";
+import classes from "./Cart.module.css";
+import CartContext from "../../store/cart-context";
+
 const Cart = (props) => {
   const cartCtx = useContext(CartContext);
+
   const totalAmount = `$${cartCtx.totalAmount.toFixed(2)}`;
   const hasItems = cartCtx.items.length > 0;
-  const cartItemRemoveHandler = (id) => {};
-  const cartItemAddHandler = (item) => {};
+
+  const cartItemRemoveHandler = (id) => {
+    cartCtx.removeItem(id);
+  };
+
+  const cartItemAddHandler = (item) => {
+    cartCtx.addItem({ ...item, amount: 1 });
+  };
 
   const cartItems = (
     <ul className={classes["cart-items"]}>
@@ -27,14 +35,14 @@ const Cart = (props) => {
   );
 
   return (
-    <Modal onHideCart={props.onHideCart}>
+    <Modal onClose={props.onClose}>
       {cartItems}
       <div className={classes.total}>
         <span>Total Amount</span>
         <span>{totalAmount}</span>
       </div>
       <div className={classes.actions}>
-        <button className={classes["button--alt"]} onClick={props.onHideCart}>
+        <button className={classes["button--alt"]} onClick={props.onClose}>
           Close
         </button>
         {hasItems && <button className={classes.button}>Order</button>}

src/components/Cart/CartItem.jsx

@@ -1,10 +1,10 @@
-import classes from './CartItem.module.css';
+import classes from "./CartItem.module.css";
 
 const CartItem = (props) => {
   const price = `$${props.price.toFixed(2)}`;
 
   return (
-    <li className={classes['cart-item']}>
+    <li className={classes["cart-item"]}>
       <div>
         <h2>{props.name}</h2>
         <div className={classes.summary}>

src/components/Layout/Header.jsx

@@ -1,20 +1,21 @@
-import React, { Fragment } from "react";
-import Banner from "../../assets/top-view-green-leaf-dolma-with-seasonings-dark-surface.jpg";
-import classes from "./Header.module.css";
+import { Fragment } from "react";
+
 import HeaderCartButton from "./HeaderCartButton";
+import mealsImage from "../../assets/top-view-green-leaf-dolma-with-seasonings-dark-surface.jpg";
+import classes from "./Header.module.css";
 
 const Header = (props) => {
   return (
     <Fragment>
       <header className={classes.header}>
-        <h1>Bison</h1>
+        <h1>ReactMeals</h1>
         <HeaderCartButton onClick={props.onShowCart} />
-
       </header>
       <div className={classes["main-image"]}>
-        <img src={Banner} alt="cover img" />
+        <img src={mealsImage} alt="A table full of delicious food!" />
       </div>
     </Fragment>
   );
 };
+
 export default Header;

src/components/Layout/HeaderCartButton.jsx

@@ -1,24 +1,44 @@
-import { useContext } from "react";
+import { useContext, useEffect, useState } from "react";
 
 import CartIcon from "../Cart/CartIcon";
 import CartContext from "../../store/cart-context";
 import classes from "./HeaderCartButton.module.css";
 
 const HeaderCartButton = (props) => {
+  const [btnIsHighlighted, setBtnIsHighlighted] = useState(false);
   const cartCtx = useContext(CartContext);
 
-  const numberOfCartItems = cartCtx.items.reduce((curNumber, item) => {
-
+  const { items } = cartCtx;
+
+  const numberOfCartItems = items.reduce((curNumber, item) => {
     return curNumber + item.amount;
-
   }, 0);
 
+  const btnClasses = `${classes.button} ${
+    btnIsHighlighted ? classes.bump : ""
+  }`;
+
+  useEffect(() => {
+    if (items.length === 0) {
+      return;
+    }
+    setBtnIsHighlighted(true);
+
+    const timer = setTimeout(() => {
+      setBtnIsHighlighted(false);
+    }, 300);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [items]);
+
   return (
-    <button className={classes.button} onClick={props.onClick}>
+    <button className={btnClasses} onClick={props.onClick}>
       <span className={classes.icon}>
         <CartIcon />
       </span>
-      <span>Your Order</span>
+      <span>Your Cart</span>
       <span className={classes.badge}>{numberOfCartItems}</span>
     </button>
   );

src/components/Meals/MealItem/MealItemForm.jsx

@@ -45,4 +45,4 @@ const MealItemForm = (props) => {
   );
 };
 
-export default MealItemForm;
+export default MealItemForm;

src/components/Meals/Meals.jsx

@@ -1,6 +1,7 @@
-import React, { Fragment } from "react";
-import AvailableMeals from "./AvailableMeals";
+import { Fragment } from "react";
+
 import MealsSummary from "./MealsSummary";
+import AvailableMeals from "./AvailableMeals";
 
 const Meals = () => {
   return (

src/components/UI/Modal.jsx

@@ -1,24 +1,31 @@
-import React, { Fragment } from "react";
+import { Fragment } from "react";
+import ReactDOM from "react-dom";
+
 import classes from "./Modal.module.css";
-import  ReactDOM  from "react-dom";
 
 const Backdrop = (props) => {
-  return <div className={classes.backdrop} onClick={props.onHideCart} >Modal</div>;
+  return <div className={classes.backdrop} onClick={props.onClose} />;
 };
-const ModalOverlays = (props) => {
+
+const ModalOverlay = (props) => {
   return (
     <div className={classes.modal}>
-      <div className={classes.content}>{props.children} </div>
+      <div className={classes.content}>{props.children}</div>
     </div>
   );
 };
+
 const portalElement = document.getElementById("overlays");
+
 const Modal = (props) => {
   return (
     <Fragment>
-      {ReactDOM.createPortal(<Backdrop onHideCart={props.onHideCart} />, portalElement)}
       {ReactDOM.createPortal(
-        <ModalOverlays>{props.children} </ModalOverlays>,
+        <Backdrop onClose={props.onClose} />,
+        portalElement
+      )}
+      {ReactDOM.createPortal(
+        <ModalOverlay>{props.children}</ModalOverlay>,
         portalElement
       )}
     </Fragment>

src/store/CartProvider.jsx

@@ -1,21 +1,60 @@
-import React from "react";
 import { useReducer } from "react";
+
 import CartContext from "./cart-context";
 
 const defaultCartState = {
   items: [],
   totalAmount: 0,
 };
+
 const cartReducer = (state, action) => {
   if (action.type === "ADD") {
-    const updatedItems = state.items.concat(action.item);
-    const updatedtotalAmount =
+    const updatedTotalAmount =
       state.totalAmount + action.item.price * action.item.amount;
+
+    const existingCartItemIndex = state.items.findIndex(
+      (item) => item.id === action.item.id
+    );
+    const existingCartItem = state.items[existingCartItemIndex];
+    let updatedItems;
+
+    if (existingCartItem) {
+      const updatedItem = {
+        ...existingCartItem,
+        amount: existingCartItem.amount + action.item.amount,
+      };
+      updatedItems = [...state.items];
+      updatedItems[existingCartItemIndex] = updatedItem;
+    } else {
+      updatedItems = state.items.concat(action.item);
+    }
+
+    return {
+      items: updatedItems,
+      totalAmount: updatedTotalAmount,
+    };
+  }
+  if (action.type === "REMOVE") {
+    const existingCartItemIndex = state.items.findIndex(
+      (item) => item.id === action.id
+    );
+    const existingItem = state.items[existingCartItemIndex];
+    const updatedTotalAmount = state.totalAmount - existingItem.price;
+    let updatedItems;
+    if (existingItem.amount === 1) {
+      updatedItems = state.items.filter((item) => item.id !== action.id);
+    } else {
+      const updatedItem = { ...existingItem, amount: existingItem.amount - 1 };
+      updatedItems = [...state.items];
+      updatedItems[existingCartItemIndex] = updatedItem;
+    }
+
     return {
-      item: updatedItems,
-      totalAmount: updatedtotalAmount,
+      items: updatedItems,
+      totalAmount: updatedTotalAmount,
     };
   }
+
   return defaultCartState;
 };
 
@@ -28,13 +67,16 @@ const CartProvider = (props) => {
   const addItemToCartHandler = (item) => {
     dispatchCartAction({ type: "ADD", item: item });
   };
-  const removeItemFromCarthandler = (id) => {};
+
+  const removeItemFromCartHandler = (id) => {
+    dispatchCartAction({ type: "REMOVE", id: id });
+  };
 
   const cartContext = {
     items: cartState.items,
     totalAmount: cartState.totalAmount,
     addItem: addItemToCartHandler,
-    removeItem: removeItemFromCarthandler,
+    removeItem: removeItemFromCartHandler,
   };
 
   return (