From 2c39f2b8d88f713f2d8a6c7ab48ae4760d52fc3b Mon Sep 17 00:00:00 2001
From: Tyrel Souza <tyrel@tyrelsouza.com>
Date: Mon, 26 Sep 2022 13:45:11 -0400
Subject: [PATCH] bump

---
 .../src/components/Layout/HeaderCartButton.js | 27 ++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/ordering/src/components/Layout/HeaderCartButton.js b/ordering/src/components/Layout/HeaderCartButton.js
index 0b41983..beb2918 100644
--- a/ordering/src/components/Layout/HeaderCartButton.js
+++ b/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>