From 5c71671bf2bdcce4308180f4966a87dd8719dc2a Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Thu, 7 Oct 2021 10:56:22 +0700
Subject: [PATCH] :sparkles: feat: getStaticProps in product detail

:%s
---
 pages/product/[slug].tsx     | 45 +++++++++++++++++++++---------------
 pages/products.tsx           |  4 ++--
 src/utils/constanst.utils.ts |  1 +
 3 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx
index ee0730314..fa307d1c2 100644
--- a/pages/product/[slug].tsx
+++ b/pages/product/[slug].tsx
@@ -1,12 +1,14 @@
 
-import { Product } from '@framework/schema'
 import commerce from '@lib/api/commerce'
 import { GetStaticPathsContext, GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 import { Layout, RecipeDetail, RecommendedRecipes, RelevantBlogPosts } from 'src/components/common'
 import { ProductInfoDetail, ReleventProducts, ViewedProducts } from 'src/components/modules/product-detail'
+import { REVALIDATE_TIME } from 'src/utils/constanst.utils'
 import { BLOGS_DATA_TEST, INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'
+import { getAllPromies } from 'src/utils/funtion.utils'
+import { PromiseWithKey } from 'src/utils/types.utils'
 
-export default function Slug({ product } : InferGetStaticPropsType<typeof getStaticProps>) {
+export default function Slug({ product }: InferGetStaticPropsType<typeof getStaticProps>) {
   console.log("product: ", product)
 
   return <>
@@ -26,26 +28,31 @@ export async function getStaticProps({
   preview,
 }: GetStaticPropsContext<{ slug: string }>) {
   const config = { locale, locales }
+  let promisesWithKey = [] as PromiseWithKey[]
+  let props = {} as any
+
   const productPromise = commerce.getProduct({
     variables: { slug: params!.slug },
     config,
     preview,
   })
+  promisesWithKey.push({ key: 'product', promise: productPromise, keyResult: 'product' })
 
-  console.log('slug: ', params!.slug)
+  try {
+    const promises = getAllPromies(promisesWithKey)
+    const rs = await Promise.all(promises)
 
+    promisesWithKey.map((item, index) => {
+      props[item.key] = item.keyResult ? rs[index][item.keyResult] : rs[index]
+      return null
+    })
 
-  const { product } = await productPromise
+    return {
+      props,
+      revalidate: REVALIDATE_TIME,
+    }
+  } catch (err) {
 
-  if (!product) {
-    throw new Error(`Product with slug '${params!.slug}' not found`)
-  }
-
-  return {
-    props: {
-      product,
-    },
-    revalidate: 60,
   }
 }
 
@@ -56,12 +63,12 @@ export async function getStaticPaths({ locales }: GetStaticPathsContext) {
   return {
     paths: locales
       ? locales.reduce<string[]>((arr, locale) => {
-          // Add a product path for every locale
-          products.forEach((product: any) => {
-            arr.push(`/${locale}/product${product.path}`)
-          })
-          return arr
-        }, [])
+        // Add a product path for every locale
+        products.forEach((product: any) => {
+          arr.push(`/${locale}/product${product.path}`)
+        })
+        return arr
+      }, [])
       : products.map((product: any) => `/product${product.path}`),
     fallback: 'blocking',
   }
diff --git a/pages/products.tsx b/pages/products.tsx
index 9559538df..4a37ab097 100644
--- a/pages/products.tsx
+++ b/pages/products.tsx
@@ -5,7 +5,7 @@ import { GetStaticPropsContext } from 'next';
 import { Layout } from 'src/components/common';
 import { ViewedProducts } from 'src/components/modules/product-detail';
 import ProductListFilter from 'src/components/modules/product-list/ProductListFilter/ProductListFilter';
-import { CODE_FACET_BRAND, CODE_FACET_FEATURED, DEFAULT_PAGE_SIZE } from 'src/utils/constanst.utils';
+import { CODE_FACET_BRAND, CODE_FACET_FEATURED, DEFAULT_PAGE_SIZE, REVALIDATE_TIME } from 'src/utils/constanst.utils';
 import { getAllPromies } from 'src/utils/funtion.utils';
 import { PromiseWithKey, SortOrder } from 'src/utils/types.utils';
 import ProductListBanner from '../src/components/modules/product-list/ProductListBanner/ProductListBanner';
@@ -87,7 +87,7 @@ export async function getStaticProps({
 
     return {
       props,
-      revalidate: 60,
+      revalidate: REVALIDATE_TIME,
     }
   } catch (err) {
 
diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index 15c1004f2..6736e77c0 100644
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -1,5 +1,6 @@
 import DefaultImg from '../../public/assets/images/default_img.jpg'
 
+export const REVALIDATE_TIME = 60
 export const BLUR_DATA_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN8fBIAApUBruKYvzsAAAAASUVORK5CYII='
 export const DEFAULT_IMG = DefaultImg