Add animation

src/components/Cart/CartLIst.js

@@ -1,59 +1,58 @@
-import { Fragment, useContext } from "react";
-import classes from "./Cart.module.css";
-import CartContext from "../../store/cart-context";
-import CartItem from "../../store/CartItem";
+import { Fragment, useContext } from 'react';
 
-const CartList = (props) => {
+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 check = cartCtx.items.length > 0;
+  const hasItems = cartCtx.items.length > 0;
 
-  const orderhandler = () => {
-    console.log("Ordering...");
+  const cartItemRemoveHandler = (id) => {
+    cartCtx.removeItem(id);
   };
 
-  const cartItemAddHandler =(id) => {};
+  const cartItemAddHandler = (item) => {
+    cartCtx.addItem({...item, amount: 1});
+  };
 
-  const cartItemRemoveHandler = (item) => {};
+  const orderingHandler = () =>{
+    console.log('Ordering...')
+  };
 
-  const CartItems = (
-    <ul className={classes["cart-items"]}>
+
+  const cartItems = (
+    <ul className={classes['cart-items']}>
       {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(null,item)}
+          onAdd={cartItemAddHandler.bind(null, item)}
         />
       ))}
     </ul>
   );
 
   return (
     <Fragment>
-      {CartItems}
-      {console.log(props)}
-      {!check && <label>Cart empty</label>}
+      {cartItems}
       <div className={classes.total}>
         <span>Total Amount</span>
         <span>{totalAmount}</span>
       </div>
-
       <div className={classes.actions}>
-        <button className={classes["button--alt"]} onClick={props.onClose}>
+        <button className={classes['button--alt']} onClick={props.onClose}>
           Close
         </button>
-        {check && (
-          <button className={classes.button} onClick={orderhandler}>
-            Order
-          </button>
-        )}
+        {hasItems && <button className={classes.button} onClick={orderingHandler} >Order</button>}
       </div>
     </Fragment>
   );
 };
 
-export default CartList;
+export default Cart;

src/components/Layout/Header.js

@@ -9,7 +9,7 @@ const Header = (props) => {
     return(
         <Fragment>
             <header className={classes.header}>
-                <h1>KingMeals</h1>
+                <h1>Zomato Restaurant</h1>
                 <HaederCartButton onClick={props.onShowCart} />
             </header>
             <div className={classes['main-image']}>

src/components/Layout/HeaderCartButton.js

@@ -1,19 +1,38 @@
-import { useContext } from 'react';
-import CartIcon from "../Cart/CartIcon";
-import classes from './HeaderCartButton.module.css';
-import CartContext from "../../store/cart-context";
+import { useContext, useEffect, useState } from 'react';
 
+import CartIcon from '../Cart/CartIcon';
+import CartContext from '../../store/cart-context';
+import classes from './HeaderCartButton.module.css';
 
-const HaederCartButton = (props) => {
+const HeaderCartButton = (props) => {
+  const [btnIsHighlighted, setBtnIsHighlighted] = useState(false);
+  const cartCtx = useContext(CartContext);
 
-  const cartCtx=useContext(CartContext);
+  const { items } = cartCtx;
 
-  const numberOfCartItems = cartCtx.items.reduce((curNumber, item) => {
+  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>
@@ -23,4 +42,4 @@ const HaederCartButton = (props) => {
   );
 };
 
-export default HaederCartButton;
+export default HeaderCartButton;