fix product

1 files changed, 23 insertions, 22 deletions

diff --git a/src/pages/shop/product/[slug].jsx b/src/pages/shop/product/[slug].jsx
index 230d1f87..7ab0ef76 100644
--- a/src/pages/shop/product/[slug].jsx
+++ b/src/pages/shop/product/[slug].jsx
@@ -9,29 +9,30 @@ import { useEffect, useState } from 'react'
 const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
 const Product = dynamic(() => import('@/lib/product/components/Product/Product'))
 
-export default function ProductDetail() {
-  const router = useRouter()
-  const [product, setProduct] = useState(null)
+export async function getServerSideProps(context) {
+  const { slug } = context.query
+  
+  let product = await productApi({ id: getIdFromSlug(slug) })
+  if (product?.length == 1) {
+    product = product[0]
+    const regexHtmlTags = /(<([^>]+)>)/gi
+    const regexHtmlTagsExceptP = /<\/?(?!p\b)[^>]*>/g
+    if (product.description.replace(regexHtmlTags, ' ').trim() == '') {
+      product.description = ''
+    }
+    product.description = product.description.replace(regexHtmlTagsExceptP, ' ')
+    product.description = product.description.trim()
+  } else {
+    product = null
+  }
 
-  useEffect(() => {
-    const { slug } = router.query
+  return {
+    props: { product }
+  }
+}
 
-    const loadProduct = async () => {
-      let product = await productApi({ id: getIdFromSlug(slug) })
-      if (product?.length == 1) {
-        product = product[0]
-        const regexHtmlTags = /(<([^>]+)>)/gi
-        const regexHtmlTagsExceptP = /<\/?(?!p\b)[^>]*>/g
-        if (product.description.replace(regexHtmlTags, ' ').trim() == '') {
-          product.description = ''
-        }
-        product.description = product.description.replace(regexHtmlTagsExceptP, ' ')
-        product.description = product.description.trim()
-      }
-      setProduct(product)
-    }
-    if (slug) loadProduct()
-  }, [router])
+export default function ProductDetail({ product }) {
+  const router = useRouter()
 
   return (
     <BasicLayout>
@@ -51,7 +52,7 @@ export default function ProductDetail() {
         ]}
       />
       {!product && (
-        <div className="container mx-auto flex justify-center pt-10">
+        <div className='container mx-auto flex justify-center pt-10'>
           <LogoSpinner width={36} height={36} />
         </div>
       )}