diff --git a/pages/index.tsx b/pages/index.tsx index 3266bc053..6ebbc8d40 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -10,61 +10,45 @@ import getAllProducts from '@framework/api/operations/get-all-products' import getSiteInfo from '@framework/api/operations/get-site-info' import getAllPages from '@framework/api/operations/get-all-pages' +// Outputs from providers should already be normalized +// TODO (bc) move this to the provider +function normalize(arr: any[]) { + // Normalizes products arr response and flattens node edges + return arr.map( + ({ + node: { entityId: id, images, variants, productOptions, ...rest }, + }) => ({ + id, + images: images.edges, + variants: variants.edges, + productOptions: productOptions.edges, + ...rest, + }) + ) +} + export async function getStaticProps({ preview, locale, }: GetStaticPropsContext) { const config = getConfig({ locale }) - // Get Featured Products - const { products: featuredProducts } = await getAllProducts({ - variables: { field: 'featuredProducts', first: 6 }, + const { products: rawProducts } = await getAllProducts({ + variables: { first: 12 }, config, preview, }) - // Get Best Selling Products - const { products: bestSellingProducts } = await getAllProducts({ - variables: { field: 'bestSellingProducts', first: 6 }, - config, - preview, - }) + const products = normalize(rawProducts) - // Get Best Newest Products - const { products: newestProducts } = await getAllProducts({ - variables: { field: 'newestProducts', first: 12 }, - config, - preview, - }) + console.log(products) const { categories, brands } = await getSiteInfo({ config, preview }) const { pages } = await getAllPages({ config, preview }) - // These are the products that are going to be displayed in the landing. - // We prefer to do the computation at buildtime/servertime - const { featured, bestSelling } = (() => { - // 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) - .sort((a, b) => a.node.prices.price.value - b.node.prices.price.value) - .reverse(), - bestSelling: rangeMap( - 6, - (i) => bestSellingProducts[i] ?? products.shift() - ).filter(nonNullable), - } - })() - return { props: { - featured, - bestSelling, - newestProducts, + products, categories, brands, pages, @@ -73,22 +57,18 @@ export async function getStaticProps({ } } -const nonNullable = (v: any) => v - export default function Home({ - featured, - bestSelling, + products, brands, categories, - newestProducts, }: InferGetStaticPropsType) { return (
- {featured.slice(0, 3).map(({ node }, i) => ( + {products.slice(0, 3).map(({ p }, i) => ( ))} - + {/* {bestSelling.slice(3, 6).map(({ node }) => ( ))} - - */} + {/* + /> */} ) }