simple fix for cart items removed too fast

iskurbanov · Aug 13, 2022 · 1351bdd · 1351bdd
1 parent 87049ce
commit 1351bdd
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 18 deletions.
diff --git a/components/MiniCart.js b/components/MiniCart.js
@@ -10,7 +10,7 @@ import { formatter } from '../utils/helpers'
 export default function MiniCart({ cart }) {
  const cancelButtonRef = useRef()
 
- const { cartOpen, setCartOpen, checkoutUrl, removeCartItem, clearCart } = useContext(CartContext)
+ const { cartOpen, setCartOpen, checkoutUrl, removeCartItem, clearCart, cartLoading } = useContext(CartContext)
 
  let cartTotal = 0
  cart.map(item => {
@@ -22,7 +22,7 @@ export default function MiniCart({ cart }) {
  <Dialog
  initialFocus={cancelButtonRef}
  as="div"
- className="fixed z-50 inset-0 overflow-hidden"
+ className="fixed inset-0 z-50 overflow-hidden"
  onClose={() => { setCartOpen(!cartOpen) }}
  >
  <div className="absolute inset-0 overflow-hidden">
@@ -35,10 +35,10 @@ export default function MiniCart({ cart }) {
  leaveFrom="opacity-100"
  leaveTo="opacity-0"
  >
- <Dialog.Overlay className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+ <Dialog.Overlay className="absolute inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
  </Transition.Child>
 
- <div className="fixed inset-y-0 right-0 pl-10 max-w-full flex">
+ <div className="fixed inset-y-0 right-0 flex max-w-full pl-10">
  <Transition.Child
  as={Fragment}
  enter="transform transition ease-in-out duration-500 sm:duration-700"
@@ -49,19 +49,19 @@ export default function MiniCart({ cart }) {
  leaveTo="translate-x-full"
  >
  <div className="w-screen max-w-md">
- <div className="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
- <div className="flex-1 py-6 overflow-y-auto px-4 sm:px-6">
+ <div className="flex flex-col h-full overflow-y-scroll bg-white shadow-xl">
+ <div className="flex-1 px-4 py-6 overflow-y-auto sm:px-6">
  <div className="flex items-start justify-between">
  <Dialog.Title className="text-lg font-medium text-gray-900">Shopping cart</Dialog.Title>
- <div className="ml-3 h-7 flex items-center">
+ <div className="flex items-center ml-3 h-7">
  <button
  ref={cancelButtonRef}
  type="button"
- className="-m-2 p-2 text-gray-400 hover:text-gray-500"
+ className="p-2 -m-2 text-gray-400 hover:text-gray-500"
  onClick={() => setCartOpen(false)}
  >
  <span className="sr-only">Close panel</span>
- <XIcon className="h-6 w-6" aria-hidden="true" />
+ <XIcon className="w-6 h-6" aria-hidden="true" />
  </button>
  </div>
  </div>
@@ -73,8 +73,8 @@ export default function MiniCart({ cart }) {
 
  <ul role="list" className="-my-6 divide-y divide-gray-200">
  {cart.map((product) => (
- <li key={product.id + Math.random()} className="py-6 flex">
- <div className="relative flex-shrink-0 w-24 h-24 border border-gray-200 rounded-md overflow-hidden">
+ <li key={product.id + Math.random()} className="flex py-6">
+ <div className="relative flex-shrink-0 w-24 h-24 overflow-hidden border border-gray-200 rounded-md">
  <Image
  src={product.image}
  alt={product.title}
@@ -83,7 +83,7 @@ export default function MiniCart({ cart }) {
  />
  </div>
 
- <div className="ml-4 flex-1 flex flex-col">
+ <div className="flex flex-col flex-1 ml-4">
  <div>
  <div className="flex justify-between text-base font-medium text-gray-900">
  <h3>
@@ -95,14 +95,16 @@ export default function MiniCart({ cart }) {
  </div>
  <p className="mt-1 text-sm text-gray-500">{product.variantTitle}</p>
  </div>
- <div className="flex-1 flex items-end justify-between text-sm">
+ <div className="flex items-end justify-between flex-1 text-sm">
  <p className="text-gray-500">Qty {product.variantQuantity}</p>
 
  <div className="flex">
  <button
  onClick={() => removeCartItem(product.id)}
  type="button"
- className="font-medium text-gray-500 hover:text-gray-800">
+ className="font-medium text-gray-500 hover:text-gray-800"
+ disabled={cartLoading}
+ >
  Remove
  </button>
  </div>
@@ -121,7 +123,7 @@ export default function MiniCart({ cart }) {
  </div>
  {
  cart.length > 0 ?
- <div className="border-t border-gray-200 py-6 px-4 sm:px-6">
+ <div className="px-4 py-6 border-t border-gray-200 sm:px-6">
  <div className="flex justify-between text-base font-medium text-gray-900">
  <p>Subtotal</p>
  <p>{formatter.format(cartTotal)}</p>
@@ -130,12 +132,12 @@ export default function MiniCart({ cart }) {
  <div className="mt-6">
  <a
  href={checkoutUrl}
- className="flex justify-center items-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-black hover:bg-gray-800"
+ className="flex items-center justify-center px-6 py-3 text-base font-medium text-white bg-black border border-transparent rounded-md shadow-sm hover:bg-gray-800"
  >
  Checkout
  </a>
  </div>
- <div className="mt-6 flex justify-center text-sm text-center text-gray-500">
+ <div className="flex justify-center mt-6 text-sm text-center text-gray-500">
  <p>
  <button
  onClick={() => clearCart()}

diff --git a/context/shopContext.js b/context/shopContext.js
@@ -8,6 +8,7 @@ export default function ShopProvider({ children }) {
  const [cartOpen, setCartOpen] = useState(false)
  const [checkoutId, setCheckoutId] = useState('')
  const [checkoutUrl, setCheckoutUrl] = useState('')
+ const [cartLoading, setCartLoading] = useState(false)
 
  useEffect(() => {
  if (localStorage.checkout_id) {
@@ -62,12 +63,14 @@ export default function ShopProvider({ children }) {
 
  async function removeCartItem(itemToRemove) {
  const updatedCart = cart.filter(item => item.id !== itemToRemove)
+ setCartLoading(true)
 
  setCart(updatedCart)
 
  const newCheckout = await updateCheckout(checkoutId, updatedCart)
 
  localStorage.setItem("checkout_id", JSON.stringify([updatedCart, newCheckout]))
+ setCartLoading(false)
 
  if (cart.length === 1) {
  setCartOpen(false)
@@ -94,7 +97,8 @@ export default function ShopProvider({ children }) {
  addToCart,
  checkoutUrl,
  removeCartItem,
- clearCart
+ clearCart,
+ cartLoading
  }}>
  {children}
  </CartContext.Provider>