crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-03-31 01:05:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make deleting optimistic too.

Browse Source
This commit is contained in:
Lee Robinson 2024-07-25 17:23:22 -05:00
parent cea56f608b
commit dd7449f975
2 changed files with 22 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
components/cart/delete-item-button.tsx
View File

@ -1,47 +1,35 @@
'use client'; 'use client';
import { XMarkIcon } from '@heroicons/react/24/outline'; import { XMarkIcon } from '@heroicons/react/24/outline';
import clsx from 'clsx';
import { removeItem } from 'components/cart/actions'; import { removeItem } from 'components/cart/actions';
import LoadingDots from 'components/loading-dots';
import type { CartItem } from 'lib/shopify/types'; import type { CartItem } from 'lib/shopify/types';
import { useFormState, useFormStatus } from 'react-dom'; import { useFormState } from 'react-dom';
function SubmitButton() { export function DeleteItemButton({
const { pending } = useFormStatus(); item,
optimisticUpdate
return ( }: {
<button item: CartItem;
type="submit" optimisticUpdate: any;
onClick={(e: React.FormEvent<HTMLButtonElement>) => { }) {
if (pending) e.preventDefault();
}}
aria-label="Remove cart item"
aria-disabled={pending}
className={clsx(
'ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-neutral-500 transition-all duration-200',
{
'cursor-not-allowed px-0': pending
}
)}
>
{pending ? (
<LoadingDots className="bg-white" />
) : (
<XMarkIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" />
)}
</button>
);
}
export function DeleteItemButton({ item }: { item: CartItem }) {
const [message, formAction] = useFormState(removeItem, null); const [message, formAction] = useFormState(removeItem, null);
const itemId = item.id; const itemId = item.id;
const actionWithVariant = formAction.bind(null, itemId); const actionWithVariant = formAction.bind(null, itemId);
return ( return (
<form action={actionWithVariant}> <form
<SubmitButton /> action={async () => {
optimisticUpdate({ itemId, newQuantity: 0, type: 'minus' });
await actionWithVariant();
}}
>
<button
type="submit"
aria-label="Remove cart item"
className="ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-neutral-500 transition-all duration-200"
>
<XMarkIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" />
</button>
<p aria-live="polite" className="sr-only" role="status"> <p aria-live="polite" className="sr-only" role="status">
{message} {message}
</p> </p>

2
components/cart/modal.tsx
View File

@ -179,7 +179,7 @@ export default function CartModal({ cart: initialCart }: { cart: Cart | undefine
> >
<div className="relative flex w-full flex-row justify-between px-1 py-4"> <div className="relative flex w-full flex-row justify-between px-1 py-4">
<div className="absolute z-40 -mt-2 ml-[55px]"> <div className="absolute z-40 -mt-2 ml-[55px]">
<DeleteItemButton item={item} /> <DeleteItemButton item={item} optimisticUpdate={updateCartItem} />
</div> </div>
<Link <Link
href={merchandiseUrl} href={merchandiseUrl}