From 7a34362456de1ec902bbae279317b3ec0a6011b3 Mon Sep 17 00:00:00 2001
From: Ryan Ford <ryanford@users.noreply.github.com>
Date: Tue, 10 Aug 2021 02:27:07 +0800
Subject: [PATCH] add cache-buster to cart

---
 components/cart/CartItem/CartItem.tsx               | 7 ++++++-
 components/cart/CartSidebarView/CartSidebarView.tsx | 9 ++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx
index 4453e0c08..14324e1b2 100644
--- a/components/cart/CartItem/CartItem.tsx
+++ b/components/cart/CartItem/CartItem.tsx
@@ -22,16 +22,21 @@ const CartItem = ({
   item,
   variant = 'default',
   currencyCode,
+  refreshCart,
   ...rest
 }: {
   variant?: 'default' | 'display'
   item: LineItem
   currencyCode: string
+  refreshCart: () => void
 }) => {
   const { closeSidebarIfPresent } = useUI()
   const [removing, setRemoving] = useState(false)
   const [quantity, setQuantity] = useState<number>(item.quantity)
-  const removeItem = useRemoveItem()
+  const removeItem = () => {
+    useRemoveItem()
+    refreshCart()
+  }
   const updateItem = useUpdateItem({ item })
 
   const { price } = usePrice({
diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index 128b928a8..b390c4e62 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -1,6 +1,6 @@
 import cn from 'classnames'
 import Link from 'next/link'
-import { FC } from 'react'
+import { FC, useState, useCallback } from 'react'
 import s from './CartSidebarView.module.css'
 import CartItem from '../CartItem'
 import { Button, Text } from '@components/ui'
@@ -13,6 +13,11 @@ import SidebarLayout from '@components/common/SidebarLayout'
 const CartSidebarView: FC = () => {
   const { closeSidebar, setSidebarView } = useUI()
   const { data, isLoading, isEmpty } = useCart()
+  const [lastChanged, setLastChanged] = useState(0)
+
+  const refreshCart = useCallback(() => setLastChanged(performance.now()), [
+    setLastChanged,
+  ])
 
   const { price: subTotal } = usePrice(
     data && {
@@ -38,6 +43,7 @@ const CartSidebarView: FC = () => {
         [s.empty]: error || success || isLoading || isEmpty,
       })}
       handleClose={handleClose}
+      key={lastChanged}
     >
       {isLoading || isEmpty ? (
         <div className="flex-1 px-4 flex flex-col justify-center items-center">
@@ -84,6 +90,7 @@ const CartSidebarView: FC = () => {
                   key={item.id}
                   item={item}
                   currencyCode={data!.currency.code}
+                  refreshCart={refreshCart}
                 />
               ))}
             </ul>