From 16b222a22ea92698826ca749f3190f02eff227e2 Mon Sep 17 00:00:00 2001
From: Lee Robinson <lrobinson2011@gmail.com>
Date: Sun, 28 Jul 2024 18:24:16 -0500
Subject: [PATCH] use actions

---
 components/product/gallery.tsx          | 10 +--
 components/product/variant-selector.tsx | 90 +++++++++++++------------
 2 files changed, 51 insertions(+), 49 deletions(-)

diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx
index f54d6015c..3bbb8fd6d 100644
--- a/components/product/gallery.tsx
+++ b/components/product/gallery.tsx
@@ -16,7 +16,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
     'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black dark:hover:text-white flex items-center justify-center';
 
   return (
-    <>
+    <form>
       <div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden">
         {images[imageIndex] && (
           <Image
@@ -33,16 +33,16 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
           <div className="absolute bottom-[15%] flex w-full justify-center">
             <div className="mx-auto flex h-11 items-center rounded-full border border-white bg-neutral-50/80 text-neutral-500 backdrop-blur dark:border-black dark:bg-neutral-900/80">
               <button
+                formAction={() => updateImage(previousImageIndex.toString())}
                 aria-label="Previous product image"
-                onClick={() => updateImage(previousImageIndex.toString())}
                 className={buttonClassName}
               >
                 <ArrowLeftIcon className="h-5" />
               </button>
               <div className="mx-1 h-6 w-px bg-neutral-500"></div>
               <button
+                formAction={() => updateImage(nextImageIndex.toString())}
                 aria-label="Next product image"
-                onClick={() => updateImage(nextImageIndex.toString())}
                 className={buttonClassName}
               >
                 <ArrowRightIcon className="h-5" />
@@ -60,9 +60,9 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
             return (
               <li key={image.src} className="h-20 w-20">
                 <button
+                  formAction={() => updateImage(index.toString())}
                   aria-label="Select product image"
                   className="h-full w-full"
-                  onClick={() => updateImage(index.toString())}
                 >
                   <GridTileImage
                     alt={image.altText}
@@ -77,6 +77,6 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
           })}
         </ul>
       ) : null}
-    </>
+    </form>
   );
 }
diff --git a/components/product/variant-selector.tsx b/components/product/variant-selector.tsx
index c89f99a81..ad432ca1f 100644
--- a/components/product/variant-selector.tsx
+++ b/components/product/variant-selector.tsx
@@ -35,53 +35,55 @@ export function VariantSelector({
   }));
 
   return options.map((option) => (
-    <dl className="mb-8" key={option.id}>
-      <dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt>
-      <dd className="flex flex-wrap gap-3">
-        {option.values.map((value) => {
-          const optionNameLowerCase = option.name.toLowerCase();
+    <form key={option.id}>
+      <dl className="mb-8">
+        <dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt>
+        <dd className="flex flex-wrap gap-3">
+          {option.values.map((value) => {
+            const optionNameLowerCase = option.name.toLowerCase();
 
-          // Base option params on current selectedOptions so we can preserve any other param state.
-          const optionParams = { ...state, [optionNameLowerCase]: value };
+            // Base option params on current selectedOptions so we can preserve any other param state.
+            const optionParams = { ...state, [optionNameLowerCase]: value };
 
-          // Filter out invalid options and check if the option combination is available for sale.
-          const filtered = Object.entries(optionParams).filter(([key, value]) =>
-            options.find(
-              (option) => option.name.toLowerCase() === key && option.values.includes(value)
-            )
-          );
-          const isAvailableForSale = combinations.find((combination) =>
-            filtered.every(
-              ([key, value]) => combination[key] === value && combination.availableForSale
-            )
-          );
+            // Filter out invalid options and check if the option combination is available for sale.
+            const filtered = Object.entries(optionParams).filter(([key, value]) =>
+              options.find(
+                (option) => option.name.toLowerCase() === key && option.values.includes(value)
+              )
+            );
+            const isAvailableForSale = combinations.find((combination) =>
+              filtered.every(
+                ([key, value]) => combination[key] === value && combination.availableForSale
+              )
+            );
 
-          // The option is active if it's in the selected options.
-          const isActive = state[optionNameLowerCase] === value;
+            // The option is active if it's in the selected options.
+            const isActive = state[optionNameLowerCase] === value;
 
-          return (
-            <button
-              key={value}
-              aria-disabled={!isAvailableForSale}
-              disabled={!isAvailableForSale}
-              onClick={() => updateOption(optionNameLowerCase, value)}
-              title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
-              className={clsx(
-                'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
-                {
-                  'cursor-default ring-2 ring-blue-600': isActive,
-                  'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-blue-600':
-                    !isActive && isAvailableForSale,
-                  'relative z-10 cursor-not-allowed overflow-hidden bg-neutral-100 text-neutral-500 ring-1 ring-neutral-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform dark:bg-neutral-900 dark:text-neutral-400 dark:ring-neutral-700 before:dark:bg-neutral-700':
-                    !isAvailableForSale
-                }
-              )}
-            >
-              {value}
-            </button>
-          );
-        })}
-      </dd>
-    </dl>
+            return (
+              <button
+                formAction={() => updateOption(optionNameLowerCase, value)}
+                key={value}
+                aria-disabled={!isAvailableForSale}
+                disabled={!isAvailableForSale}
+                title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
+                className={clsx(
+                  'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
+                  {
+                    'cursor-default ring-2 ring-blue-600': isActive,
+                    'ring-1 ring-transparent transition duration-300 ease-in-out hover:ring-blue-600':
+                      !isActive && isAvailableForSale,
+                    'relative z-10 cursor-not-allowed overflow-hidden bg-neutral-100 text-neutral-500 ring-1 ring-neutral-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform dark:bg-neutral-900 dark:text-neutral-400 dark:ring-neutral-700 before:dark:bg-neutral-700':
+                      !isAvailableForSale
+                  }
+                )}
+              >
+                {value}
+              </button>
+            );
+          })}
+        </dd>
+      </dl>
+    </form>
   ));
 }