4
0
forked from crowetic/commerce
commerce/pages/search.tsx
2020-10-13 22:43:11 -05:00

225 lines
6.4 KiB
TypeScript

import { useEffect, useState } from 'react'
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import { useRouter } from 'next/router'
import Link from 'next/link'
import cn from 'classnames'
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
import useSearch from '@lib/bigcommerce/products/use-search'
import { Layout } from '@components/core'
import { Container, Grid } from '@components/ui'
import { ProductCard } from '@components/product'
export async function getStaticProps({ preview }: GetStaticPropsContext) {
const { categories, brands } = await getSiteInfo()
return {
props: { categories, brands },
}
}
export default function Home({
categories,
brands,
}: InferGetStaticPropsType<typeof getStaticProps>) {
const router = useRouter()
const { asPath } = router
const { q, sort } = router.query
const query = filterQuery({ q, sort })
const pathname = asPath.split('?')[0]
const { category, brand } = useSearchMeta(asPath)
const activeCategory = categories.find(
(cat) => getSlug(cat.path) === category
)
const activeBrand = brands.find(
(b) => getSlug(b.node.path) === `brands/${brand}`
)?.node
const { data } = useSearch({
search: typeof q === 'string' ? q : '',
categoryId: activeCategory?.entityId,
brandId: activeBrand?.entityId,
})
return (
<Container>
<div className="grid grid-cols-12 gap-8 mt-3 mb-20">
<div className="col-span-2">
<ul className="mb-10">
<li className="py-1 text-primary font-bold tracking-wide">
<Link href={{ pathname: getCategoryPath('', brand), query }}>
<a>All Categories</a>
</Link>
</li>
{categories.map((cat) => (
<li
key={cat.path}
className={cn('py-1 text-default', {
underline: activeCategory?.entityId === cat.entityId,
})}
>
<Link
href={{
pathname: getCategoryPath(getSlug(cat.path), brand),
query,
}}
>
<a>{cat.name}</a>
</Link>
</li>
))}
</ul>
<ul>
<li className="py-1 text-primary font-bold tracking-wide">
<Link href={{ pathname: getDesignerPath('', category), query }}>
<a>All Designers</a>
</Link>
</li>
{brands.flatMap(({ node }) => (
<li
key={node.path}
className={cn('py-1 text-default', {
underline: activeBrand?.entityId === node.entityId,
})}
>
<Link
href={{
pathname: getDesignerPath(getSlug(node.path), category),
query,
}}
>
<a>{node.name}</a>
</Link>
</li>
))}
</ul>
</div>
<div className="col-span-8">
{data ? (
<>
{q && (
<div className="mb-12">
{data.found ? (
<>Showing {data.products.length} results for</>
) : (
<>There are no products that match</>
)}{' '}
"<strong>{q}</strong>"
</div>
)}
<Grid
items={data.products}
layout="normal"
wrapper={ProductCard}
/>
</>
) : (
<div>Searching...</div>
)}
</div>
<div className="col-span-2">
<ul>
<li className="py-1 text-primary font-bold tracking-wide">Sort</li>
<li className="py-1 text-default">
<Link
href={{
pathname,
query: filterQuery({ q }),
}}
>
<a>Relevance</a>
</Link>
</li>
<li className="py-1 text-default">
<Link
href={{
pathname,
query: filterQuery({ q, sort: 'latest-desc' }),
}}
>
<a>Latest arrivals</a>
</Link>
</li>
<li className="py-1 text-default">
<Link
href={{
pathname,
query: filterQuery({ q, sort: 'trending-desc' }),
}}
>
<a>Trending</a>
</Link>
</li>
<li className="py-1 text-default">
<Link
href={{
pathname,
query: filterQuery({ q, sort: 'price-asc' }),
}}
>
<a>Price: Low to high</a>
</Link>
</li>
<li className="py-1 text-default">
<Link
href={{
pathname,
query: filterQuery({ q, sort: 'price-desc' }),
}}
>
<a>Price: High to low</a>
</Link>
</li>
</ul>
</div>
</div>
</Container>
)
}
Home.Layout = Layout
function useSearchMeta(asPath: string) {
const [category, setCategory] = useState<string | undefined>()
const [brand, setBrand] = useState<string | undefined>()
useEffect(() => {
const parts = asPath.split('/')
let c = parts[2]
let b = parts[3]
if (c === 'designers') {
c = parts[4]
}
if (c !== category) setCategory(c)
if (b !== brand) setBrand(b)
}, [asPath])
return { category, brand }
}
// Removes empty query parameters from the query object
const filterQuery = (query: any) =>
Object.keys(query).reduce<any>((obj, key) => {
if (query[key]?.length) {
obj[key] = query[key]
}
return obj
}, {})
// Remove trailing and leading slash
const getSlug = (path: string) => path.replace(/^\/|\/$/g, '')
const getCategoryPath = (slug: string, brand?: string) =>
`/search${brand ? `/designers/${brand}` : ''}${slug ? `/${slug}` : ''}`
const getDesignerPath = (slug: string, category?: string) => {
const designer = slug.replace(/^brands/, 'designers')
return `/search${designer ? `/${designer}` : ''}${
category ? `/${category}` : ''
}`
}