Closer

components/cart/add-to-cart.tsx

@@ -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,
+  selectedVariantId
-  submitting
 }: {
   availableForSale: boolean;
   selectedVariantId: string | undefined;
-  submitting: boolean;
 }) {
-  let { pending } = useFormStatus();
+  const { pending } = useFormStatus();
-  pending = pending || submitting;
   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
+    <form action={actionWithVariant} onSubmit={handleSubmit}>
-      action={actionWithVariant}
+      <SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
-      // 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}
-      />
       <p aria-live="polite" className="sr-only" role="status">
         {message}
       </p>

components/cart/delete-item-button.tsx

@@ -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 }) {
+function SubmitButton() {
-  let { pending } = useFormStatus();
+  const { pending } = useFormStatus();
-  pending = pending || submitting;
 
   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
+    <form action={actionWithVariant} onSubmit={handleSubmit}>
-      action={actionWithVariant}
+      <SubmitButton />
-      // Prevent double clicks
-      onClick={async (e) => {
-        e.preventDefault();
-        if (submitting) return;
-        setSubmitting(true);
-        await removeItem(message, itemId);
-        setSubmitting(false);
-      }}
-    >
-      <SubmitButton submitting={submitting} />
       <p aria-live="polite" className="sr-only" role="status">
         {message}
       </p>

components/cart/edit-item-quantity-button.tsx

@@ -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) => {
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    // this isn't being called
+    if (isPending) {
       event.preventDefault();
-    startAction(actionWithVariant);
+    } else {
+      startTransition(actionWithVariant);
+    }
   };
 
   return (
-    <form action={actionWithVariant}>
+    <form action={actionWithVariant} onSubmit={handleSubmit}>
-      <SubmitButton type={type} onSubmit={onSubmit} />
+      <SubmitButton type={type} />
       <p aria-live="polite" className="sr-only" role="status">
         {message}
       </p>