From e5ee8caaeca0225bf0d22af4a956f7b5932a9cca Mon Sep 17 00:00:00 2001 From: Luis Alvarez Date: Mon, 19 Oct 2020 13:49:02 -0500 Subject: [PATCH] Filtered products for the landing --- lib/range-map.ts | 7 ++++++ pages/index.tsx | 61 ++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 56 insertions(+), 12 deletions(-) create mode 100644 lib/range-map.ts diff --git a/lib/range-map.ts b/lib/range-map.ts new file mode 100644 index 000000000..886f20d6b --- /dev/null +++ b/lib/range-map.ts @@ -0,0 +1,7 @@ +export default function rangeMap(n: number, fn: (i: number) => any) { + const arr = [] + while (n > arr.length) { + arr.push(fn(arr.length)) + } + return arr +} diff --git a/pages/index.tsx b/pages/index.tsx index 65afe747f..4cad5bd6d 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,39 +1,76 @@ +import { useMemo } from 'react' import { GetStaticPropsContext, InferGetStaticPropsType } from 'next' import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products' +import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info' +import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages' +import rangeMap from '@lib/range-map' import { Layout } from '@components/core' import { Grid, Marquee, Hero } from '@components/ui' import { ProductCard } from '@components/product' -import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info' -import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages' export async function getStaticProps({ preview }: GetStaticPropsContext) { - const { pages } = await getAllPages() - const { products } = await getAllProducts() const { products: featuredProducts } = await getAllProducts({ - variables: { field: 'featuredProducts', first: 3 }, + variables: { field: 'featuredProducts', first: 6 }, + }) + const { products: bestSellingProducts } = await getAllProducts({ + variables: { field: 'bestSellingProducts', first: 6 }, + }) + const { products: newestProducts } = await getAllProducts({ + variables: { field: 'newestProducts', first: 12 }, }) const { categories, brands } = await getSiteInfo() + const { pages } = await getAllPages() return { - props: { pages, products, featuredProducts, categories, brands }, + props: { + featuredProducts, + bestSellingProducts, + newestProducts, + categories, + brands, + pages, + }, + revalidate: 10, } } +const nonNullable = (v: any) => v + export default function Home({ - products, featuredProducts, + bestSellingProducts, + newestProducts, categories, brands, }: InferGetStaticPropsType) { + const { featured, bestSelling } = useMemo(() => { + // Create a copy of products that we can mutate + const products = [...newestProducts] + // If the lists of featured and best selling products don't have enough + // products, then fill them with products from the products list, this + // is useful for new commerce sites that don't have a lot of products + return { + featured: rangeMap( + 6, + (i) => featuredProducts[i] ?? products.shift() + ).filter(nonNullable), + bestSelling: rangeMap( + 6, + (i) => bestSellingProducts[i] ?? products.shift() + ).filter(nonNullable), + } + // Props from getStaticProps won't change + }, []) + return (
- {featuredProducts.map(({ node }) => ( + {featured.slice(0, 3).map(({ node }) => ( ))} - {products.slice(0, 3).map(({ node }) => ( + {bestSelling.slice(0, 3).map(({ node }) => ( ))} @@ -48,12 +85,12 @@ export default function Home({ ‘Natural’." /> - {products.slice(3, 6).map(({ node }) => ( + {featured.slice(3, 6).map(({ node }) => ( ))} - {products.slice(0, 3).map(({ node }) => ( + {bestSelling.slice(3, 6).map(({ node }) => ( ))} @@ -84,7 +121,7 @@ export default function Home({
- {products.map(({ node }) => ( + {newestProducts.map(({ node }) => ( ))}