Merge branch 'feature/m3-relevant-product' of https://github.com/KieIO/grocery-vercel-commerce into feature/m1-get-product-detail

pages/index.tsx

@@ -62,27 +62,34 @@ export async function getStaticProps({
   const freshFacetId = getFreshFacetId(facets)
   if (freshFacetId) {
     freshProductvariables.facetValueIds = [freshFacetId]
+    const freshProductsPromise = commerce.getAllProducts({
+      variables: freshProductvariables,
+      config,
+      preview,
+    })
+    promisesWithKey.push({ key: 'freshProducts', promise: freshProductsPromise, keyResult: 'products' })
+  } else {
+    props.freshProducts = []
   }
-  const freshProductsPromise = commerce.getAllProducts({
-    variables: freshProductvariables,
-    config,
-    preview,
-  })
-  promisesWithKey.push({ key: 'freshProducts', promise: freshProductsPromise, keyResult: 'products' })
 
 
   // featured products
   const allFeaturedFacetIds = getAllFacetValueIdsByParentCode(facets, CODE_FACET_FEATURED)
   const allDiscountFacetIds = getAllFacetValueIdsByParentCode(facets, CODE_FACET_DISCOUNT)
   const facetValueIdsForFeaturedProducts = [...allFeaturedFacetIds, ...allDiscountFacetIds]
-  const featuredProductsPromise = commerce.getAllProducts({
-    variables: {
-      facetValueIds: facetValueIdsForFeaturedProducts
-    },
-    config,
-    preview,
-  })
-  promisesWithKey.push({ key: 'featuredProducts', promise: featuredProductsPromise, keyResult: 'products'  })
+  
+  if (facetValueIdsForFeaturedProducts.length > 0) {
+    const featuredProductsPromise = commerce.getAllProducts({
+      variables: {
+        facetValueIds: facetValueIdsForFeaturedProducts
+      },
+      config,
+      preview,
+    })
+    promisesWithKey.push({ key: 'featuredProducts', promise: featuredProductsPromise, keyResult: 'products'  })
+  } else {
+    props.featuredProducts = []
+  }
 
   // collection
   const collectionsPromise = commerce.getAllCollections({

pages/product/[slug].tsx

@@ -1,18 +1,114 @@
 
+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 { MAX_PRODUCT_CAROUSEL, 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() {
+export default function Slug({ product, relevantProducts, collections }: InferGetStaticPropsType<typeof getStaticProps>) {
 
   return <>
     <ProductInfoDetail />
     <RecipeDetail ingredients={INGREDIENT_DATA_TEST} />
     <RecommendedRecipes data={RECIPE_DATA_TEST} />
-    <ReleventProducts />
+    <ReleventProducts data={relevantProducts} collections={collections}/>
     <ViewedProducts />
-    <RelevantBlogPosts data={BLOGS_DATA_TEST} title="relevent blog posts"/>
+    <RelevantBlogPosts data={BLOGS_DATA_TEST} title="relevent blog posts" />
   </>
 }
 
+export async function getStaticProps({
+  params,
+  locale,
+  locales,
+  preview,
+}: GetStaticPropsContext<{ slug: string }>) {
+  const config = { locale, locales }
+  let promisesWithKey = [] as PromiseWithKey[]
+  let props = {} as any
+
+  const product = await commerce.getProduct({
+    variables: { slug: params!.slug },
+    config,
+    preview,
+  })
+  props.product = product
+
+
+  if (!product) {
+    throw new Error(`Product with slug '${params!.slug}' not found`)
+  }
+
+  // relevant product (filter by product detail's facetIds)
+  const relevantFacetIds = product.facetValueIds
+  if (relevantFacetIds && relevantFacetIds.length > 0) {
+    const relevantProductsPromise = commerce.getAllProducts({
+      variables: {
+        first: MAX_PRODUCT_CAROUSEL,
+        facetValueIds: relevantFacetIds,
+      },
+      config,
+      preview,
+    })
+    promisesWithKey.push({ key: 'relevantProducts', promise: relevantProductsPromise, keyResult: 'products' })
+  } else {
+    props.relevantProducts = []
+  }
+
+
+  // collection
+  const collectionsPromise = commerce.getAllCollections({
+    variables: {},
+    config,
+    preview,
+  })
+  promisesWithKey.push({ key: 'collections', promise: collectionsPromise, keyResult: 'collections' })
+
+
+  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
+    })
+
+    if (props.relevantProducts.length > 0) {
+      const relevantProducts = props.relevantProducts.filter((item: Product) => item.id !== product.id)
+      props.relevantProducts = relevantProducts
+    }
+
+    return {
+      props,
+      revalidate: REVALIDATE_TIME,
+    }
+  } catch (err) {
+    console.log('err: ', err)
+  }
+}
+
+
+export async function getStaticPaths({ locales }: GetStaticPathsContext) {
+  const { products } = await commerce.getAllProductPaths()
+
+  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
+      }, [])
+      : products.map((product: any) => `/product${product.path}`),
+    fallback: 'blocking',
+  }
+}
+
+
 Slug.Layout = Layout

pages/products.tsx

@@ -1,19 +1,97 @@
+import { ProductCard } from '@commerce/types/product';
+import { Collection, Facet } from '@framework/schema';
+import commerce from '@lib/api/commerce';
+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 RecipeListBanner from 'src/components/modules/recipes-list/RecipeListBanner/RecipeListBanner';
-import RecipesList from 'src/components/modules/recipes-list/RecipesList/RecipesList';
+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';
 
+interface Props {
+  facets: Facet[],
+  collections: Collection[],
+  productsResult: { products: ProductCard[], totalItems: number },
 
-export default function Products() {
+}
+
+export default function Products({ facets, collections, productsResult }: Props) {
   return (
     <>
       <ProductListBanner />
-      <ProductListFilter/>
-      <ViewedProducts/>
+      <ProductListFilter
+        collections={collections}
+        facets={facets}
+        products={productsResult.products}
+        total={productsResult.totalItems} />
+      <ViewedProducts />
     </>
   )
 }
 
+export async function getStaticProps({
+  preview,
+  locale,
+  locales,
+}: GetStaticPropsContext) {
+  const config = { locale, locales }
+  let promisesWithKey = [] as PromiseWithKey[]
+  let props = {} as any
+
+  const facetsPromise = commerce.getAllFacets({
+    variables: {
+      sort: {
+        code: SortOrder.Asc
+      },
+      filter: {
+        code: {
+          in: [CODE_FACET_FEATURED, CODE_FACET_BRAND]
+        }
+      }
+    },
+    config,
+    preview,
+  })
+
+  promisesWithKey.push({ key: 'facets', promise: facetsPromise, keyResult: 'facets' })
+
+  // collection
+  const collectionsPromise = commerce.getAllCollections({
+    variables: {},
+    config,
+    preview,
+  })
+  promisesWithKey.push({ key: 'collections', promise: collectionsPromise, keyResult: 'collections' })
+
+  // products
+  const productsPromise = commerce.getAllProducts({
+    variables: {
+      first: DEFAULT_PAGE_SIZE,
+    },
+    config,
+    preview,
+  })
+  promisesWithKey.push({ key: 'productsResult', promise: productsPromise })
+
+
+  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
+    })
+
+    return {
+      props,
+      revalidate: REVALIDATE_TIME,
+    }
+  } catch (err) {
+
+  }
+}
+
 Products.Layout = Layout

pages/test.tsx

@@ -1,17 +1,19 @@
 import commerce from '@lib/api/commerce';
 import { GetStaticPropsContext } from 'next';
-import { Layout } from 'src/components/common';
 import { ProductCard } from '@commerce/types/product';
+import { Layout, ListProductCardSkeleton } from 'src/components/common';
+
 interface Props {
   productDetail: ProductCard[],
 }
 export default function Home({ productDetail }: Props) {
   return (
     <>
-      <p>
-        TOTAL: {productDetail}
-      </p>
-      {/* {JSON.stringify(productDetail)} */}
+      {/* <ListProductCardSkeleton /> */}
+      {/* <ListProductCardSkeleton count={1} /> */}
+      <ListProductCardSkeleton count={10} />
+      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab qui magnam debitis ex laborum laboriosam suscipit! Totam excepturi eum libero.
+      <ListProductCardSkeleton count={10} isWrap/>
     </>
   )
 }
@@ -22,28 +24,9 @@ export async function getServerSideProps({
   locale,
   locales,
 }: GetStaticPropsContext) {
-  const config = { locale, locales }
-  
-  const productsPromise = commerce.getProduct({
-    // const productsPromise = commerce.getAllFacets({
-    variables: {
-      slug: "hand-trowel"
-      //  filter: {
-      //   name: {
-      //     contains: 'ca'
-      //   }
-      // }
-    },
-    config,
-    // preview,
-    // Saleor provider only
-    ...({ featured: true } as any),
-  })
 
-  const { product } = await productsPromise
-  const productDetail = JSON.stringify(product)
   return {
-    props: { productDetail },
+    props: {},
   }
 }