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

136 lines
4.0 KiB
TypeScript
Raw Normal View History

2020-10-13 18:52:02 -05:00
import { useEffect, useState } from 'react'
2020-10-12 10:25:36 -03:00
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
2020-10-13 18:52:02 -05:00
import { useRouter } from 'next/router'
import Link from 'next/link'
2020-10-13 03:49:24 -05:00
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
import useSearch from '@lib/bigcommerce/products/use-search'
2020-10-12 10:25:36 -03:00
import { Layout } from '@components/core'
2020-10-13 09:41:37 -03:00
import { Container, Grid } from '@components/ui'
2020-10-12 10:25:36 -03:00
import { ProductCard } from '@components/product'
export async function getStaticProps({ preview }: GetStaticPropsContext) {
const { categories, brands } = await getSiteInfo()
return {
2020-10-13 07:07:35 -05:00
props: { categories, brands },
2020-10-12 10:25:36 -03:00
}
}
export default function Home({
categories,
brands,
}: InferGetStaticPropsType<typeof getStaticProps>) {
2020-10-12 11:10:20 -03:00
const router = useRouter()
2020-10-13 07:07:35 -05:00
const { q } = router.query
const { data } = useSearch({
search: typeof q === 'string' ? q : '',
})
2020-10-13 18:52:02 -05:00
const { category, brand } = useSearchMeta(router.asPath)
console.log('Q', category, brand)
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>
<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">
All Categories
2020-10-12 10:25:36 -03:00
</li>
2020-10-13 09:41:37 -03:00
{categories.map((cat) => (
2020-10-13 11:56:12 -05:00
<li key={cat.path} className="py-1 text-default">
2020-10-13 18:52:02 -05:00
<Link href={getCategoryPath(cat.path, brand)}>
<a>{cat.name}</a>
</Link>
2020-10-13 09:41:37 -03:00
</li>
))}
</ul>
<ul>
<li className="py-1 text-primary font-bold tracking-wide">
All Designers
2020-10-12 10:25:36 -03:00
</li>
2020-10-13 09:41:37 -03:00
{brands.flatMap(({ node }) => (
2020-10-13 11:56:12 -05:00
<li key={node.path} className="py-1 text-default">
2020-10-13 18:52:02 -05:00
<Link href={getDesignerPath(node.path, category)}>
<a>{node.name}</a>
</Link>
2020-10-13 09:41:37 -03:00
</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">
Relevance
</li>
2020-10-13 11:56:12 -05:00
<li className="py-1 text-default">Latest arrivals</li>
<li className="py-1 text-default">Trending</li>
<li className="py-1 text-default">Price: Low to high</li>
<li className="py-1 text-default">Price: High to low</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
)
}
Home.Layout = Layout
2020-10-13 18:52:02 -05:00
function useSearchMeta(asPath: string) {
const [category, setCategory] = useState<string | undefined>()
const [brand, setBrand] = useState<string | undefined>()
useEffect(() => {
const parts = asPath.split('/')
// console.log('parts', parts)
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 }
}
function getCategoryPath(path: string, designer?: string) {
return designer ? `/search/designers/${designer}${path}` : `/search${path}`
}
function getDesignerPath(path: string, category?: string) {
// Remove the trailing slash and replace /brands with /designers
const designer = path.replace(/^\/brands/, '/designers').replace(/\/$/, '')
const href = `/search${designer}`
return category ? `${href}/${category}` : href
}