4
0
forked from crowetic/commerce
commerce/pages/index.tsx

144 lines
3.9 KiB
TypeScript
Raw Normal View History

2020-10-19 13:49:02 -05:00
import rangeMap from '@lib/range-map'
2020-11-04 11:50:23 -03:00
import { Layout } from '@components/common'
2021-01-06 21:24:09 -03:00
import ProductCard from '@components/product/ProductCard/FUTURE_ProductCard'
2020-11-06 16:30:08 -03:00
import { Grid, Marquee, Hero } from '@components/ui'
2020-11-04 11:50:23 -03:00
import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
2020-11-06 16:30:08 -03:00
import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
2020-09-30 13:36:02 -05:00
2020-12-29 20:04:26 -05:00
import { getConfig } from '@framework/api'
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'
2020-10-29 12:10:53 -03:00
2021-01-07 11:01:47 -03:00
// Outputs from providers should already be normalized
// TODO (bc) move this to the provider
2021-01-07 11:19:28 -03:00
2021-01-07 11:01:47 -03:00
function normalize(arr: any[]) {
// Normalizes products arr response and flattens node edges
return arr.map(
({
node: { entityId: id, images, variants, productOptions, ...rest },
}) => ({
id,
2021-01-07 11:19:28 -03:00
images: images.edges.map(
({ node: { urlOriginal, altText, ...rest } }: any) => ({
url: urlOriginal,
alt: altText,
...rest,
})
),
variants: variants.edges.map(({ node }: any) => node),
productOptions: productOptions.edges.map(({ node }: any) => node),
2021-01-07 11:01:47 -03:00
...rest,
})
)
}
2020-10-24 16:10:31 -05:00
export async function getStaticProps({
preview,
locale,
}: GetStaticPropsContext) {
const config = getConfig({ locale })
2020-10-24 16:10:31 -05:00
2021-01-07 11:01:47 -03:00
const { products: rawProducts } = await getAllProducts({
variables: { first: 12 },
config,
2020-10-27 00:47:29 -05:00
preview,
2020-10-19 13:49:02 -05:00
})
2020-11-06 11:43:11 -03:00
2021-01-07 11:01:47 -03:00
const products = normalize(rawProducts)
2020-11-06 11:43:11 -03:00
2021-01-07 11:19:28 -03:00
// console.log(products)
2020-11-06 11:43:11 -03:00
2020-10-27 00:47:29 -05:00
const { categories, brands } = await getSiteInfo({ config, preview })
const { pages } = await getAllPages({ config, preview })
2020-10-05 11:44:14 -03:00
2020-11-06 11:43:11 -03:00
return {
props: {
2021-01-07 11:01:47 -03:00
products,
2020-11-06 11:43:11 -03:00
categories,
brands,
pages,
},
2020-11-07 19:15:54 -03:00
revalidate: 14400,
2020-11-06 11:43:11 -03:00
}
}
export default function Home({
2021-01-07 11:01:47 -03:00
products,
2020-11-06 11:43:11 -03:00
brands,
categories,
}: InferGetStaticPropsType<typeof getStaticProps>) {
return (
2020-10-21 19:22:27 -03:00
<div>
2020-10-16 12:46:02 -03:00
<Grid>
2021-01-07 11:19:28 -03:00
{products.slice(0, 3).map((product, i) => (
<ProductCard
2021-01-07 11:19:28 -03:00
key={product.id}
product={product}
2021-01-06 21:24:09 -03:00
imgProps={{
width: i === 0 ? 1080 : 540,
height: i === 0 ? 1080 : 540,
}}
/>
2020-10-16 12:46:02 -03:00
))}
</Grid>
2021-01-07 11:01:47 -03:00
{/* <Marquee variant="secondary">
2020-10-26 21:06:36 -03:00
{bestSelling.slice(3, 6).map(({ node }) => (
<ProductCard
key={node.path}
product={node}
variant="slim"
2021-01-06 21:24:09 -03:00
imgProps={{
width: 320,
height: 320,
}}
/>
2020-10-16 12:46:02 -03:00
))}
</Marquee>
2020-10-04 17:47:05 -03:00
<Hero
headline="Release Details: The Yeezy BOOST 350 V2 Natural'"
description="
The Yeezy BOOST 350 V2 lineup continues to grow. We recently had the
Carbon iteration, and now release details have been locked in for
this Natural joint. Revealed by Yeezy Mafia earlier this year, the
shoe was originally called Abez, which translated to Tin in
Hebrew. Its now undergone a name change, and will be referred to as
Natural."
/>
2020-10-16 12:46:02 -03:00
<Grid layout="B">
{featured.slice(3, 6).map(({ node }, i) => (
<ProductCard
key={node.path}
product={node}
2021-01-06 21:24:09 -03:00
imgProps={{
width: i === 1 ? 1080 : 540,
height: i === 1 ? 1080 : 540,
}}
/>
2020-10-16 12:46:02 -03:00
))}
</Grid>
<Marquee>
2020-10-26 21:06:36 -03:00
{bestSelling.slice(0, 3).map(({ node }) => (
<ProductCard
key={node.path}
product={node}
variant="slim"
2021-01-06 21:24:09 -03:00
imgProps={{
width: 320,
height: 320,
}}
/>
2020-10-16 12:46:02 -03:00
))}
2021-01-07 11:01:47 -03:00
</Marquee> */}
{/* <HomeAllProductsGrid
2021-01-06 21:24:09 -03:00
newestProducts={newestProducts}
2020-10-26 20:02:29 -03:00
categories={categories}
brands={brands}
2021-01-07 11:01:47 -03:00
/> */}
2020-10-12 10:46:17 -03:00
</div>
)
2020-09-30 11:44:38 -05:00
}
2020-10-01 21:30:08 -05:00
Home.Layout = Layout