Start on server actions

app/product/[handle]/page.tsx

@@ -14,7 +14,7 @@ import Link from 'next/link';
 export const runtime = 'edge';
 
 export async function generateMetadata({
-  params
+  params,
 }: {
   params: { handle: string };
 }): Promise<Metadata> {
@@ -51,7 +51,7 @@ export async function generateMetadata({
   };
 }
 
-export default async function ProductPage({ params }: { params: { handle: string } }) {
+export default async function ProductPage({ params, searchParams }: { params: { handle: string }; searchParams: URLSearchParams }) {
   const product = await getProduct(params.handle);
 
   if (!product) return notFound();
@@ -93,7 +93,7 @@ export default async function ProductPage({ params }: { params: { handle: string
           </div>
 
           <div className="py-6 pr-8 md:pr-12 lg:col-span-2">
-            <ProductDescription product={product} />
+            <ProductDescription product={product} searchParams={searchParams} />
           </div>
         </div>
         <Suspense>

components/cart/add-to-cart.tsx

@@ -2,65 +2,37 @@
 
 import { PlusIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
-import { addItem } from 'components/cart/actions';
 import LoadingDots from 'components/loading-dots';
-import { ProductVariant } from 'lib/shopify/types';
+import { experimental_useFormStatus as useFormStatus } from 'react-dom';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useEffect, useState, useTransition } from 'react';
 
 export function AddToCart({
-  variants,
+  availableForSale,
-  availableForSale
+  addToCart,
 }: {
-  variants: ProductVariant[];
   availableForSale: boolean;
+  addToCart: any;
 }) {
-  const [selectedVariantId, setSelectedVariantId] = useState(variants[0]?.id);
+  const { pending } = useFormStatus()
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const [isPending, startTransition] = useTransition();
-
-  useEffect(() => {
-    const variant = variants.find((variant: ProductVariant) =>
-      variant.selectedOptions.every(
-        (option) => option.value === searchParams.get(option.name.toLowerCase())
-      )
-    );
-
-    if (variant) {
-      setSelectedVariantId(variant.id);
-    }
-  }, [searchParams, variants, setSelectedVariantId]);
 
   return (
+    <form action={addToCart}>
       <button
         aria-label="Add item to cart"
-      disabled={isPending}
+        disabled={pending}
-      onClick={() => {
+        type="submit"
-        if (!availableForSale) return;
-        startTransition(async () => {
-          const error = await addItem(selectedVariantId);
-
-          if (error) {
-            alert(error);
-            return;
-          }
-
-          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': !availableForSale,
-          'cursor-not-allowed': isPending
+            'cursor-not-allowed': pending
           }
         )}
       >
         <div className="absolute left-0 ml-4">
-        {!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
+          {!pending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
         </div>
         <span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
       </button>
+    </form>
   );
 }

components/product/product-description.tsx

@@ -2,9 +2,32 @@ import { AddToCart } from 'components/cart/add-to-cart';
 import Price from 'components/price';
 import Prose from 'components/prose';
 import { Product } from 'lib/shopify/types';
-import { VariantSelector } from './variant-selector';
+// import { VariantSelector } from './variant-selector';
+
+export function ProductDescription({ product, searchParams }: { product: Product; searchParams: URLSearchParams }) {
+  async function addToCart() {
+    'use server';
+
+    if (!product.availableForSale) return;
+
+    console.log(product.variants)
+    const variant = product.variants.find((variant: ProductVariant) =>
+      variant.selectedOptions.every(
+        (option) => option.value === searchParams.get(option.name.toLowerCase())
+      )
+    );
+
+    const variantId = variant?.id || product.variants[0]!.id
+
+    console.log(variantId)
+    // const error = await addItem(variantId);
+
+    // if (error) {
+    //   console.error(error);
+    //   return;
+    // }
+  }
 
-export function ProductDescription({ product }: { product: Product }) {
   return (
     <>
       <div className="mb-6 flex flex-col border-b pb-6 dark:border-neutral-700">
@@ -16,7 +39,7 @@ export function ProductDescription({ product }: { product: Product }) {
           />
         </div>
       </div>
-      <VariantSelector options={product.options} variants={product.variants} />
+      {/* <VariantSelector options={product.options} variants={product.variants} /> */}
 
       {product.descriptionHtml ? (
         <Prose
@@ -25,7 +48,7 @@ export function ProductDescription({ product }: { product: Product }) {
         />
       ) : null}
 
-      <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
+      <AddToCart availableForSale={product.availableForSale} addToCart={addToCart} />
     </>
   );
 }