crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-14 21:47:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Something closer...

Browse Source
This commit is contained in:
Lee Robinson 2023-10-01 19:42:12 -05:00
parent 9ef95719a4
commit 523deb2594
1 changed files with 13 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/cart/edit-item-quantity-button.tsx
View File

@ -5,22 +5,22 @@ import clsx from 'clsx';
import { updateItemQuantity } from 'components/cart/actions'; import { updateItemQuantity } from 'components/cart/actions';
import LoadingDots from 'components/loading-dots'; import LoadingDots from 'components/loading-dots';
import type { CartItem } from 'lib/shopify/types'; import type { CartItem } from 'lib/shopify/types';
import { useState } from 'react'; import { useTransition } from 'react';
import { import {
// @ts-ignore // @ts-ignore
experimental_useFormState as useFormState, experimental_useFormState as useFormState,
experimental_useFormStatus as useFormStatus experimental_useFormStatus as useFormStatus
} from 'react-dom'; } from 'react-dom';
function SubmitButton({ type, submitting }: { type: 'plus' | 'minus'; submitting: boolean }) { function SubmitButton({ type, onSubmit }: { type: 'plus' | 'minus'; onSubmit: any }) {
let { pending } = useFormStatus(); const { pending } = useFormStatus();
pending = pending || submitting;
return ( return (
<button <button
type="submit" type="submit"
aria-label={type === 'plus' ? 'Increase item quantity' : 'Reduce item quantity'} aria-label={type === 'plus' ? 'Increase item quantity' : 'Reduce item quantity'}
aria-disabled={pending} aria-disabled={pending}
onSubmit={onSubmit}
className={clsx( className={clsx(
'ease flex h-full min-w-[36px] max-w-[36px] flex-none items-center justify-center rounded-full px-2 transition-all duration-200 hover:border-neutral-800 hover:opacity-80', 'ease flex h-full min-w-[36px] max-w-[36px] flex-none items-center justify-center rounded-full px-2 transition-all duration-200 hover:border-neutral-800 hover:opacity-80',
{ {
@ -41,7 +41,7 @@ function SubmitButton({ type, submitting }: { type: 'plus' | 'minus'; submitting
} }
export function EditItemQuantityButton({ item, type }: { item: CartItem; type: 'plus' | 'minus' }) { export function EditItemQuantityButton({ item, type }: { item: CartItem; type: 'plus' | 'minus' }) {
const [submitting, setSubmitting] = useState(false); const [pending, startAction] = useTransition();
const [message, formAction] = useFormState(updateItemQuantity, null); const [message, formAction] = useFormState(updateItemQuantity, null);
const payload = { const payload = {
lineId: item.id, lineId: item.id,
@ -50,19 +50,15 @@ export function EditItemQuantityButton({ item, type }: { item: CartItem; type: '
}; };
const actionWithVariant = formAction.bind(null, payload); const actionWithVariant = formAction.bind(null, payload);
const onSubmit = (event) => {
// this isn't being called
event.preventDefault();
startAction(actionWithVariant);
};
return ( return (
<form <form action={actionWithVariant}>
action={actionWithVariant} <SubmitButton type={type} onSubmit={onSubmit} />
// Prevent double clicks
onClick={async (e) => {
e.preventDefault();
if (submitting) return;
setSubmitting(true);
await updateItemQuantity(message, payload);
setSubmitting(false);
}}
>
<SubmitButton type={type} submitting={submitting} />
<p aria-live="polite" className="sr-only" role="status"> <p aria-live="polite" className="sr-only" role="status">
{message} {message}
</p> </p>