Normalized Products output

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<typeof getStaticProps>) {
   return (
     <div>
       <Grid>
-        {featured.slice(0, 3).map(({ node }, i) => (
+        {products.slice(0, 3).map(({ p }, i) => (
           <ProductCard
-            key={node.path}
-            product={node}
+            key={p.id}
+            product={p}
             imgProps={{
               width: i === 0 ? 1080 : 540,
               height: i === 0 ? 1080 : 540,
@@ -96,7 +76,7 @@ export default function Home({
           />
         ))}
       </Grid>
-      <Marquee variant="secondary">
+      {/* <Marquee variant="secondary">
         {bestSelling.slice(3, 6).map(({ node }) => (
           <ProductCard
             key={node.path}
@@ -143,12 +123,12 @@ export default function Home({
             }}
           />
         ))}
-      </Marquee>
-      <HomeAllProductsGrid
+      </Marquee> */}
+      {/* <HomeAllProductsGrid
         newestProducts={newestProducts}
         categories={categories}
         brands={brands}
-      />
+      /> */}
     </div>
   )
 }