bump

ordering/src/components/Layout/HeaderCartButton.js

@@ -1,18 +1,39 @@
-import { useContext } from "react"
+import { useContext, useEffect, useState } from "react"
 import CartIcon from "../Cart/CartIcon"
 import classes from "./HeaderCartButton.module.css"
 
 import CartContext from "../../store/cart-context"
 
 function HeaderCartButton(props) {
+    const [btnIsHighlighted, setBtnIsHighlighted] = useState(false)
     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>