From dd7449f975b18a6d068cef34c59df98173007976 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Thu, 25 Jul 2024 17:23:22 -0500 Subject: [PATCH] Make deleting optimistic too. --- components/cart/delete-item-button.tsx | 54 ++++++++++---------------- components/cart/modal.tsx | 2 +- 2 files changed, 22 insertions(+), 34 deletions(-) diff --git a/components/cart/delete-item-button.tsx b/components/cart/delete-item-button.tsx index 814e1f389..5b436a93c 100644 --- a/components/cart/delete-item-button.tsx +++ b/components/cart/delete-item-button.tsx @@ -1,47 +1,35 @@ 'use client'; import { XMarkIcon } from '@heroicons/react/24/outline'; -import clsx from 'clsx'; import { removeItem } from 'components/cart/actions'; -import LoadingDots from 'components/loading-dots'; import type { CartItem } from 'lib/shopify/types'; -import { useFormState, useFormStatus } from 'react-dom'; +import { useFormState } from 'react-dom'; -function SubmitButton() { - const { pending } = useFormStatus(); - - return ( - - ); -} - -export function DeleteItemButton({ item }: { item: CartItem }) { +export function DeleteItemButton({ + item, + optimisticUpdate +}: { + item: CartItem; + optimisticUpdate: any; +}) { const [message, formAction] = useFormState(removeItem, null); const itemId = item.id; const actionWithVariant = formAction.bind(null, itemId); return ( -
- + { + optimisticUpdate({ itemId, newQuantity: 0, type: 'minus' }); + await actionWithVariant(); + }} + > +

{message}

diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx index 52602c6a3..8b2b89d1b 100644 --- a/components/cart/modal.tsx +++ b/components/cart/modal.tsx @@ -179,7 +179,7 @@ export default function CartModal({ cart: initialCart }: { cart: Cart | undefine >
- +