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

225 lines
6.9 KiB
TypeScript
Raw Normal View History

2020-10-13 19:31:00 -05:00
import cn from 'classnames'
2020-10-19 13:56:29 -05:00
import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
2020-10-17 17:56:38 -03:00
import Link from 'next/link'
import { useRouter } from 'next/router'
2020-10-27 04:53:21 -05:00
import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
import getAllPages from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
import getSiteInfo from '@bigcommerce/storefront-data-hooks/api/operations/get-site-info'
import useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'
2020-10-12 10:25:36 -03:00
import { Layout } from '@components/core'
import { ProductCard } from '@components/product'
2020-10-17 17:56:38 -03:00
import { Container, Grid, Skeleton } from '@components/ui'
2020-10-27 04:00:42 -05:00
2020-10-19 13:56:29 -05:00
import rangeMap from '@lib/range-map'
import getSlug from '@utils/get-slug'
2020-10-14 12:47:22 -05:00
import {
filterQuery,
getCategoryPath,
getDesignerPath,
useSearchMeta,
} from '@utils/search'
2020-10-12 10:25:36 -03:00
2020-10-27 04:00:42 -05:00
export async function getStaticProps({
preview,
locale,
}: GetStaticPropsContext) {
const config = getConfig({ locale })
const { pages } = await getAllPages({ config, preview })
const { categories, brands } = await getSiteInfo({ config, preview })
2020-10-12 10:25:36 -03:00
return {
2020-10-15 18:55:39 -05:00
props: { pages, categories, brands },
2020-10-12 10:25:36 -03:00
}
}
2020-10-14 13:50:56 -05:00
const SORT = Object.entries({
'latest-desc': 'Latest arrivals',
'trending-desc': 'Trending',
'price-asc': 'Price: Low to high',
'price-desc': 'Price: High to low',
})
2020-10-14 11:50:38 -05:00
export default function Search({
2020-10-12 10:25:36 -03:00
categories,
brands,
}: InferGetStaticPropsType<typeof getStaticProps>) {
2020-10-12 11:10:20 -03:00
const router = useRouter()
const { asPath } = router
const { q, sort } = router.query
2020-10-25 22:33:32 -05:00
// `q` can be included but because categories and designers can't be searched
// in the same way of products, it's better to ignore the search input if one
// of those is selected
const query = filterQuery({ sort })
2020-10-13 22:43:11 -05:00
2020-10-14 13:12:34 -05:00
const { pathname, category, brand } = useSearchMeta(asPath)
2020-10-13 20:16:43 -05:00
const activeCategory = categories.find(
(cat) => getSlug(cat.path) === category
)
const activeBrand = brands.find(
(b) => getSlug(b.node.path) === `brands/${brand}`
)?.node
2020-10-13 22:43:11 -05:00
2020-10-13 07:07:35 -05:00
const { data } = useSearch({
search: typeof q === 'string' ? q : '',
2020-10-13 20:16:43 -05:00
categoryId: activeCategory?.entityId,
brandId: activeBrand?.entityId,
2020-10-14 11:50:38 -05:00
sort: typeof sort === 'string' ? sort : '',
2020-10-13 07:07:35 -05:00
})
2020-10-13 03:49:24 -05:00
2020-10-12 10:25:36 -03:00
return (
2020-10-13 09:41:37 -03:00
<Container>
2020-10-21 11:36:38 -03:00
<div className="grid grid-cols-12 gap-4 mt-3 mb-20">
2020-10-13 09:41:37 -03:00
<div className="col-span-2">
<ul className="mb-10">
2020-10-15 16:00:11 -03:00
<li className="py-1 text-base font-bold tracking-wide">
<Link href={{ pathname: getCategoryPath('', brand), query }}>
2020-10-13 20:43:56 -05:00
<a>All Categories</a>
</Link>
2020-10-12 10:25:36 -03:00
</li>
2020-10-13 09:41:37 -03:00
{categories.map((cat) => (
2020-10-13 19:31:00 -05:00
<li
key={cat.path}
2020-10-15 16:00:11 -03:00
className={cn('py-1 text-accents-8', {
2020-10-13 20:16:43 -05:00
underline: activeCategory?.entityId === cat.entityId,
2020-10-13 19:31:00 -05:00
})}
>
<Link
href={{
pathname: getCategoryPath(cat.path, brand),
query,
}}
>
2020-10-13 18:52:02 -05:00
<a>{cat.name}</a>
</Link>
2020-10-13 09:41:37 -03:00
</li>
))}
</ul>
<ul>
2020-10-15 16:00:11 -03:00
<li className="py-1 text-base font-bold tracking-wide">
<Link href={{ pathname: getDesignerPath('', category), query }}>
2020-10-13 20:43:56 -05:00
<a>All Designers</a>
</Link>
2020-10-12 10:25:36 -03:00
</li>
2020-10-13 09:41:37 -03:00
{brands.flatMap(({ node }) => (
2020-10-13 19:31:00 -05:00
<li
key={node.path}
2020-10-15 16:00:11 -03:00
className={cn('py-1 text-accents-8', {
2020-10-13 20:16:43 -05:00
underline: activeBrand?.entityId === node.entityId,
2020-10-13 19:31:00 -05:00
})}
>
<Link
href={{
pathname: getDesignerPath(node.path, category),
query,
}}
>
2020-10-13 18:52:02 -05:00
<a>{node.name}</a>
</Link>
2020-10-13 09:41:37 -03:00
</li>
))}
</ul>
</div>
<div className="col-span-8">
2020-10-25 22:33:32 -05:00
{(q || activeCategory || activeBrand) && (
2020-10-25 21:47:19 -05:00
<div className="mb-12 transition ease-in duration-75">
{data ? (
<>
<span
className={cn('animated', {
fadeIn: data.found,
hidden: !data.found,
})}
>
2020-10-25 22:33:32 -05:00
Showing {data.products.length} results{' '}
{q && (
<>
for "<strong>{q}</strong>"
</>
)}
2020-10-25 21:47:19 -05:00
</span>
<span
className={cn('animated', {
fadeIn: !data.found,
hidden: data.found,
})}
>
2020-10-25 22:33:32 -05:00
{q ? (
<>
There are no products that match "<strong>{q}</strong>"
</>
) : (
<>
There are no products that match the selected category &
designer
</>
)}
2020-10-25 21:47:19 -05:00
</span>
</>
2020-10-25 22:33:32 -05:00
) : q ? (
2020-10-25 21:47:19 -05:00
<>
Searching for: "<strong>{q}</strong>"
</>
2020-10-25 22:33:32 -05:00
) : (
<>Searching...</>
2020-10-25 21:47:19 -05:00
)}
</div>
)}
2020-10-17 17:56:38 -03:00
{data ? (
<Grid layout="normal">
2020-10-19 12:40:26 -05:00
{data.products.map(({ node }) => (
2020-10-17 17:56:38 -03:00
<ProductCard
2020-10-21 11:36:38 -03:00
variant="simple"
2020-10-19 12:40:26 -05:00
key={node.path}
2020-10-24 19:35:16 -03:00
className="animated fadeIn"
2020-10-19 12:40:26 -05:00
product={node}
imgWidth={480}
imgHeight={480}
2020-10-17 17:56:38 -03:00
/>
))}
</Grid>
) : (
2020-10-19 11:23:10 -03:00
<Grid layout="normal">
2020-10-19 13:56:29 -05:00
{rangeMap(12, (i) => (
2020-10-17 17:56:38 -03:00
<Skeleton
2020-10-19 13:56:29 -05:00
key={i}
2020-10-24 19:35:16 -03:00
className="w-full animated fadeIn"
2020-10-17 17:56:38 -03:00
height={325}
/>
))}
</Grid>
)}
2020-10-13 09:41:37 -03:00
</div>
<div className="col-span-2">
<ul>
2020-10-15 16:00:11 -03:00
<li className="py-1 text-base font-bold tracking-wide">Sort</li>
2020-10-14 13:50:56 -05:00
<li
2020-10-15 16:00:11 -03:00
className={cn('py-1 text-accents-8', {
2020-10-14 13:50:56 -05:00
underline: !sort,
})}
>
<Link href={{ pathname, query: filterQuery({ q }) }}>
<a>Relevance</a>
</Link>
2020-10-13 09:41:37 -03:00
</li>
2020-10-14 13:50:56 -05:00
{SORT.map(([key, text]) => (
<li
key={key}
2020-10-15 16:00:11 -03:00
className={cn('py-1 text-accents-8', {
2020-10-14 13:50:56 -05:00
underline: sort === key,
})}
2020-10-13 22:43:11 -05:00
>
2020-10-14 13:50:56 -05:00
<Link href={{ pathname, query: filterQuery({ q, sort: key }) }}>
<a>{text}</a>
</Link>
</li>
))}
2020-10-13 09:41:37 -03:00
</ul>
</div>
2020-10-12 10:25:36 -03:00
</div>
2020-10-13 09:41:37 -03:00
</Container>
2020-10-12 10:25:36 -03:00
)
}
2020-10-14 11:50:38 -05:00
Search.Layout = Layout