cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Keep the query and sort while navigating

Browse Source
This commit is contained in:
Luis Alvarez 2020-10-13 22:20:23 -05:00
parent f37fbc00bf
commit 6f763f6913
1 changed files with 37 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
pages/search.tsx
View File

@ -22,8 +22,10 @@ export default function Home({
brands, brands,
}: InferGetStaticPropsType<typeof getStaticProps>) { }: InferGetStaticPropsType<typeof getStaticProps>) {
const router = useRouter() const router = useRouter()
const { q } = router.query const { asPath } = router
const { category, brand } = useSearchMeta(router.asPath) const { q, sort } = router.query
const query = filterQuery({ q, sort })
const { category, brand } = useSearchMeta(asPath)
const activeCategory = categories.find( const activeCategory = categories.find(
(cat) => getSlug(cat.path) === category (cat) => getSlug(cat.path) === category
) )
@ -42,7 +44,7 @@ export default function Home({
<div className="col-span-2"> <div className="col-span-2">
<ul className="mb-10"> <ul className="mb-10">
<li className="py-1 text-primary font-bold tracking-wide"> <li className="py-1 text-primary font-bold tracking-wide">
<Link href={getCategoryPath('', brand)}> <Link href={{ pathname: getCategoryPath('', brand), query }}>
<a>All Categories</a> <a>All Categories</a>
</Link> </Link>
</li> </li>
@ -53,7 +55,12 @@ export default function Home({
underline: activeCategory?.entityId === cat.entityId, underline: activeCategory?.entityId === cat.entityId,
})} })}
> >
<Link href={getCategoryPath(getSlug(cat.path), brand)}> <Link
href={{
pathname: getCategoryPath(getSlug(cat.path), brand),
query,
}}
>
<a>{cat.name}</a> <a>{cat.name}</a>
</Link> </Link>
</li> </li>
@ -61,7 +68,7 @@ export default function Home({
</ul> </ul>
<ul> <ul>
<li className="py-1 text-primary font-bold tracking-wide"> <li className="py-1 text-primary font-bold tracking-wide">
<Link href={getDesignerPath('', category)}> <Link href={{ pathname: getDesignerPath('', category), query }}>
<a>All Designers</a> <a>All Designers</a>
</Link> </Link>
</li> </li>
@ -72,7 +79,12 @@ export default function Home({
underline: activeBrand?.entityId === node.entityId, underline: activeBrand?.entityId === node.entityId,
})} })}
> >
<Link href={getDesignerPath(getSlug(node.path), category)}> <Link
href={{
pathname: getDesignerPath(getSlug(node.path), category),
query,
}}
>
<a>{node.name}</a> <a>{node.name}</a>
</Link> </Link>
</li> </li>
@ -104,8 +116,16 @@ export default function Home({
</div> </div>
<div className="col-span-2"> <div className="col-span-2">
<ul> <ul>
<li className="py-1 text-primary font-bold tracking-wide"> <li className="py-1 text-primary font-bold tracking-wide">Sort</li>
Relevance <li className="py-1 text-default">
<Link
href={{
pathname: asPath.split('?')[0],
query: filterQuery({ q }),
}}
>
<a>Relevance</a>
</Link>
</li> </li>
<li className="py-1 text-default">Latest arrivals</li> <li className="py-1 text-default">Latest arrivals</li>
<li className="py-1 text-default">Trending</li> <li className="py-1 text-default">Trending</li>
@ -127,8 +147,6 @@ function useSearchMeta(asPath: string) {
useEffect(() => { useEffect(() => {
const parts = asPath.split('/') const parts = asPath.split('/')
// console.log('parts', parts)
let c = parts[2] let c = parts[2]
let b = parts[3] let b = parts[3]
@ -143,6 +161,15 @@ function useSearchMeta(asPath: string) {
return { category, brand } 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 // Remove trailing and leading slash
const getSlug = (path: string) => path.replace(/^\/|\/$/g, '') const getSlug = (path: string) => path.replace(/^\/|\/$/g, '')