From 0024f4d3ee5a8da42a01c50dba5977172f907c0e Mon Sep 17 00:00:00 2001
From: Lee Robinson <lrobinson2011@gmail.com>
Date: Sat, 30 Sep 2023 21:59:54 -0500
Subject: [PATCH] Format

---
 components/cart/add-to-cart.tsx | 87 ++++++++++++++++++++-------------
 1 file changed, 52 insertions(+), 35 deletions(-)

diff --git a/components/cart/add-to-cart.tsx b/components/cart/add-to-cart.tsx
index fe5bb22d0..bb91596c4 100644
--- a/components/cart/add-to-cart.tsx
+++ b/components/cart/add-to-cart.tsx
@@ -7,51 +7,66 @@ import LoadingDots from 'components/loading-dots';
 import { ProductVariant } from 'lib/shopify/types';
 import { useSearchParams } from 'next/navigation';
 // @ts-ignore
-import { experimental_useFormState as useFormState, experimental_useFormStatus as useFormStatus } from 'react-dom';
+import {
+  experimental_useFormState as useFormState,
+  experimental_useFormStatus as useFormStatus
+} from 'react-dom';
 
-function SubmitButton({ availableForSale, selectedVariantId }: {
+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 { 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,
-      'cursor-not-allowed opacity-60 hover:opacity-60'
-    )}>
-    Out Of Stock
-  </button>
+    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,
-      'cursor-not-allowed opacity-60 hover:opacity-60'
-    )}>
-      <div className="absolute left-0 ml-4">
-      <PlusIcon className="h-5" />
-      </div>
-      Add To Cart
-  </button>
+    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 type="submit" aria-disabled={pending} className={clsx(
-      buttonClasses,
-      {
+    <button
+      type="submit"
+      aria-label="Add to cart"
+      aria-disabled={pending}
+      className={clsx(buttonClasses, {
         'hover:opacity-90': true,
         'cursor-not-allowed': pending
-      }
-    )}>
+      })}
+    >
       <div className="absolute left-0 ml-4">
-        {!pending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
+        {!pending ? (
+          <PlusIcon className="h-5" />
+        ) : (
+          <LoadingDots className="mb-3 bg-white" />
+        )}
       </div>
       Add To Cart
-    </button> 
-  )
-  
+    </button>
+  );
 }
 
 export function AddToCart({
@@ -61,7 +76,7 @@ export function AddToCart({
   variants: ProductVariant[];
   availableForSale: boolean;
 }) {
-  const [message, formAction] = useFormState(addItem, null)
+  const [message, formAction] = useFormState(addItem, null);
   const searchParams = useSearchParams();
   const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
   const variant = variants.find((variant: ProductVariant) =>
@@ -70,15 +85,17 @@ export function AddToCart({
     )
   );
   const selectedVariantId = variant?.id || defaultVariantId;
-  const actionWithVariant = formAction.bind(null, selectedVariantId)
+  const actionWithVariant = formAction.bind(null, selectedVariantId);
 
   return (
-    <form action={actionWithVariant}
-    >
-      <SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
+    <form action={actionWithVariant}>
+      <SubmitButton
+        availableForSale={availableForSale}
+        selectedVariantId={selectedVariantId}
+      />
       <p aria-live="polite" className="sr-only" role="status">
         {message}
       </p>
     </form>
-  )
-}
\ No newline at end of file
+  );
+}