Improves form submissions and updates dependencies (#1209)

components/cart/add-to-cart.tsx

@@ -5,8 +5,67 @@ import clsx from 'clsx';
 import { addItem } from 'components/cart/actions';
 import LoadingDots from 'components/loading-dots';
 import { ProductVariant } from 'lib/shopify/types';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useTransition } from 'react';
+import { useSearchParams } from 'next/navigation';
+import {
+  // @ts-ignore
+  experimental_useFormState as useFormState,
+  experimental_useFormStatus as useFormStatus
+} from 'react-dom';
+
+function SubmitButton({
+  availableForSale,
+  selectedVariantId
+}: {
+  availableForSale: boolean;
+  selectedVariantId: string | undefined;
+}) {
+  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';
+
+  if (!availableForSale) {
+    return (
+      <button aria-disabled className={clsx(buttonClasses, disabledClasses)}>
+        Out Of Stock
+      </button>
+    );
+  }
+
+  if (!selectedVariantId) {
+    return (
+      <button
+        aria-label="Please select an option"
+        aria-disabled
+        className={clsx(buttonClasses, disabledClasses)}
+      >
+        <div className="absolute left-0 ml-4">
+          <PlusIcon className="h-5" />
+        </div>
+        Add To Cart
+      </button>
+    );
+  }
+
+  return (
+    <button
+      onClick={(e: React.FormEvent<HTMLButtonElement>) => {
+        if (pending) e.preventDefault();
+      }}
+      aria-label="Add to cart"
+      aria-disabled={pending}
+      className={clsx(buttonClasses, {
+        'hover:opacity-90': true,
+        disabledClasses: pending
+      })}
+    >
+      <div className="absolute left-0 ml-4">
+        {pending ? <LoadingDots className="mb-3 bg-white" /> : <PlusIcon className="h-5" />}
+      </div>
+      Add To Cart
+    </button>
+  );
+}
 
 export function AddToCart({
   variants,
@@ -15,9 +74,8 @@ export function AddToCart({
   variants: ProductVariant[];
   availableForSale: boolean;
 }) {
-  const router = useRouter();
+  const [message, formAction] = useFormState(addItem, null);
   const searchParams = useSearchParams();
-  const [isPending, startTransition] = useTransition();
   const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
   const variant = variants.find((variant: ProductVariant) =>
     variant.selectedOptions.every(
@@ -25,44 +83,14 @@ export function AddToCart({
     )
   );
   const selectedVariantId = variant?.id || defaultVariantId;
-  const title = !availableForSale
-    ? 'Out of stock'
-    : !selectedVariantId
-    ? 'Please select options'
-    : undefined;
+  const actionWithVariant = formAction.bind(null, selectedVariantId);
 
   return (
-    <button
-      aria-label="Add item to cart"
-      disabled={isPending || !availableForSale || !selectedVariantId}
-      title={title}
-      onClick={() => {
-        // Safeguard in case someone messes with `disabled` in devtools.
-        if (!availableForSale || !selectedVariantId) return;
-
-        startTransition(async () => {
-          const error = await addItem(selectedVariantId);
-
-          if (error) {
-            // Trigger the error boundary in the root error.js
-            throw new Error(error.toString());
-          }
-
-          router.refresh();
-        });
-      }}
-      className={clsx(
-        'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
-        {
-          'cursor-not-allowed opacity-60 hover:opacity-60': !availableForSale || !selectedVariantId,
-          'cursor-not-allowed': isPending
-        }
-      )}
-    >
-      <div className="absolute left-0 ml-4">
-        {!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
-      </div>
-      <span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
-    </button>
+    <form action={actionWithVariant}>
+      <SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
+      <p aria-live="polite" className="sr-only" role="status">
+        {message}
+      </p>
+    </form>
   );
 }