From 4e1a3e9c37ed04a8e70ad58cb29db34e5f115544 Mon Sep 17 00:00:00 2001
From: Kevin Green <kevin@ctrlaltdel.world>
Date: Mon, 11 Sep 2023 19:14:03 -0700
Subject: [PATCH] default variant + correct shopify variant

---
 app/components/sharable/productGrid.jsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/components/sharable/productGrid.jsx b/app/components/sharable/productGrid.jsx
index a393313..573904e 100644
--- a/app/components/sharable/productGrid.jsx
+++ b/app/components/sharable/productGrid.jsx
@@ -10,10 +10,14 @@ import {
 
 const ProductCard = ({
   product,
+  defaultVariant,
   shopify
 }) => {
-  const [activeVariant, setActiveVariant] = useState(shopify?.variants?.nodes[0])
-  console.log('first variant', product.store.variants[0], activeVariant)
+  const shopifyDefaultVariant = shopify.variants.nodes.find(item => {
+    return item.id === defaultVariant.store.gid
+  })
+  const [activeVariant, setActiveVariant] = useState(shopifyDefaultVariant ? shopifyDefaultVariant : shopify?.variants?.nodes[0])
+  console.log('active variant', activeVariant)
   return (
     <div className='col-span-1'>
       <div className='aspect-square bg-primary-green/60' />
@@ -30,7 +34,12 @@ const ProductCard = ({
                   backgroundSize: 'cover',
                   backgroundColor: variant.pattern?.colorType?.color,
                 }}
-                onClick={() => setActiveVariant(shopify.variants.nodes[i])}
+                onClick={() => {
+                  const shopifyVariant = shopify.variants.nodes.find(item => {
+                    return item.id === variant.store.gid
+                  })
+                  setActiveVariant(shopifyVariant)
+                }}
                 aria-label={`${variant.pattern.colorName}`}
                 className={cx('block w-10 h-10 mr-2 rounded-full border-black', {
                   'opacity-100': activeVariant.id === variant.store.gid,
@@ -70,6 +79,7 @@ export const ProductGrid = ({
         <ProductCard 
           product={item.product} 
           shopify={item.shopify}
+          defaultVariant={item.productVariant}
           key={item._key} />
       )
     })}