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

Closer

Browse Source
This commit is contained in:
Lee Robinson 2023-10-01 20:07:49 -05:00
parent 523deb2594
commit 3f0ff19381
3 changed files with 38 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/cart/add-to-cart.tsx
View File

@ -6,7 +6,7 @@ import { addItem } from 'components/cart/actions';
import LoadingDots from 'components/loading-dots';
import { ProductVariant } from 'lib/shopify/types';
import { useSearchParams } from 'next/navigation';
import { useState } from 'react';
import { useTransition } from 'react';
import {
// @ts-ignore
experimental_useFormState as useFormState,
@ -15,15 +15,12 @@ import {
function SubmitButton({
availableForSale,
selectedVariantId,
submitting
selectedVariantId
}: {
availableForSale: boolean;
selectedVariantId: string | undefined;
submitting: boolean;
}) {
let { pending } = useFormStatus();
pending = pending || submitting;
const { pending } = useFormStatus();
const buttonClasses =
'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white';
const disabledClasses = 'cursor-not-allowed opacity-60 hover:opacity-60';
@ -76,7 +73,7 @@ export function AddToCart({
variants: ProductVariant[];
availableForSale: boolean;
}) {
const [submitting, setSubmitting] = useState(false);
const [isPending, startTransition] = useTransition();
const [message, formAction] = useFormState(addItem, null);
const searchParams = useSearchParams();
const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
@ -88,23 +85,17 @@ export function AddToCart({
const selectedVariantId = variant?.id || defaultVariantId;
const actionWithVariant = formAction.bind(null, selectedVariantId);
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
if (isPending) {
event.preventDefault();
} else {
startTransition(actionWithVariant);
}
};
return (
<form
action={actionWithVariant}
// Prevent double clicks
onClick={async (e) => {
e.preventDefault();
if (submitting) return;
setSubmitting(true);
await addItem(message, selectedVariantId);
setSubmitting(false);
}}
>
<SubmitButton
availableForSale={availableForSale}
selectedVariantId={selectedVariantId}
submitting={submitting}
/>
<form action={actionWithVariant} onSubmit={handleSubmit}>
<SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
<p aria-live="polite" className="sr-only" role="status">
{message}
</p>

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

@ -5,16 +5,15 @@ import clsx from 'clsx';
import { removeItem } from 'components/cart/actions';
import LoadingDots from 'components/loading-dots';
import type { CartItem } from 'lib/shopify/types';
import { useState } from 'react';
import { useTransition } from 'react';
import {
// @ts-ignore
experimental_useFormState as useFormState,
experimental_useFormStatus as useFormStatus
} from 'react-dom';
function SubmitButton({ submitting }: { submitting: boolean }) {
let { pending } = useFormStatus();
pending = pending || submitting;
function SubmitButton() {
const { pending } = useFormStatus();
return (
<button
@ -38,24 +37,22 @@ function SubmitButton({ submitting }: { submitting: boolean }) {
}
export function DeleteItemButton({ item }: { item: CartItem }) {
const [submitting, setSubmitting] = useState(false);
const [isPending, startTransition] = useTransition();
const [message, formAction] = useFormState(removeItem, null);
const itemId = item.id;
const actionWithVariant = formAction.bind(null, itemId);
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
if (isPending) {
event.preventDefault();
} else {
startTransition(actionWithVariant);
}
};
return (
<form
action={actionWithVariant}
// Prevent double clicks
onClick={async (e) => {
e.preventDefault();
if (submitting) return;
setSubmitting(true);
await removeItem(message, itemId);
setSubmitting(false);
}}
>
<SubmitButton submitting={submitting} />
<form action={actionWithVariant} onSubmit={handleSubmit}>
<SubmitButton />
<p aria-live="polite" className="sr-only" role="status">
{message}
</p>

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

@ -12,7 +12,7 @@ import {
experimental_useFormStatus as useFormStatus
} from 'react-dom';
function SubmitButton({ type, onSubmit }: { type: 'plus' | 'minus'; onSubmit: any }) {
function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
const { pending } = useFormStatus();
return (
@ -20,7 +20,6 @@ function SubmitButton({ type, onSubmit }: { type: 'plus' | 'minus'; onSubmit: an
type="submit"
aria-label={type === 'plus' ? 'Increase item quantity' : 'Reduce item quantity'}
aria-disabled={pending}
onSubmit={onSubmit}
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',
{
@ -41,7 +40,7 @@ function SubmitButton({ type, onSubmit }: { type: 'plus' | 'minus'; onSubmit: an
}
export function EditItemQuantityButton({ item, type }: { item: CartItem; type: 'plus' | 'minus' }) {
const [pending, startAction] = useTransition();
const [isPending, startTransition] = useTransition();
const [message, formAction] = useFormState(updateItemQuantity, null);
const payload = {
lineId: item.id,
@ -50,15 +49,17 @@ export function EditItemQuantityButton({ item, type }: { item: CartItem; type: '
};
const actionWithVariant = formAction.bind(null, payload);
const onSubmit = (event) => {
// this isn't being called
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
if (isPending) {
event.preventDefault();
startAction(actionWithVariant);
} else {
startTransition(actionWithVariant);
}
};
return (
<form action={actionWithVariant}>
<SubmitButton type={type} onSubmit={onSubmit} />
<form action={actionWithVariant} onSubmit={handleSubmit}>
<SubmitButton type={type} />
<p aria-live="polite" className="sr-only" role="status">
{message}
</p>