Get similar product on client side

1 files changed, 12 insertions, 6 deletions

diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index 2ff151fa..b6af8c87 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -18,13 +18,10 @@ export async function getServerSideProps(context) {
   const { slug } = context.query;
   let product = await getOdoo('/api/v1/product/' + getId(slug));
   product = product[0];
-  
-  const similarProducts = await getOdoo(`/api/v1/product/${getId(slug)}/similar?limit=20`);
-  
   return {props: {product, similarProducts}};
 }
 
-export default function ProductDetail({product, similarProducts}) {
+export default function ProductDetail({product}) {
   const router = useRouter();
   const { slug } = router.query;
   const [selectedVariant, setSelectedVariant] = useState("");
@@ -37,12 +34,21 @@ export default function ProductDetail({product, similarProducts}) {
     weight: product.weight,
     attributes: '',
   });
+  const [similarProducts, setSimilarProducts] = useState(null);
   
   useEffect(() => {
     if (product.variants.length == 1) {
       setSelectedVariant(product.variants[0].id);
     }
-  }, [product.variants]);
+  }, [product]);
+
+  useEffect(() => {
+    const getSimilarProducts = async () => {
+      const dataSimilarProducts = await getOdoo(`/api/v1/product/${getId(slug)}/similar?limit=20`);
+      setSimilarProducts(dataSimilarProducts);
+    }
+    getSimilarProducts();
+  }, [slug]);
 
   useEffect(() => {
     if (selectedVariant != '') {
@@ -164,7 +170,7 @@ export default function ProductDetail({product, similarProducts}) {
         <div className="mt-10">
           <h2 className="h1 mb-4">Produk Lainnya</h2>
           <Swiper freeMode={true} slidesPerView={2.15} spaceBetween={8} loop={true}>
-            {similarProducts.products.map((product, index) => (<SwiperSlide key={index}><ProductCard data={product} /></SwiperSlide>))}
+            {similarProducts?.products?.map((product, index) => (<SwiperSlide key={index}><ProductCard data={product} /></SwiperSlide>))}
           </Swiper>
         </div>