crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-16 06:26:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes relevance removing search query (#1076)

Browse Source
This commit is contained in:
Michael Novotny 2023-07-14 12:51:45 -05:00 committed by GitHub
parent 37b436af52
commit 3455367a92
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/layout/search/filter/item.tsx
View File

@ -13,6 +13,7 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const [active, setActive] = useState(pathname === item.path); const [active, setActive] = useState(pathname === item.path);
const newParams = new URLSearchParams(searchParams.toString()); const newParams = new URLSearchParams(searchParams.toString());
const DynamicTag = active ? 'p' : Link;
newParams.delete('q'); newParams.delete('q');
@ -22,7 +23,7 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
return ( return (
<li className="mt-2 flex text-black dark:text-white" key={item.title}> <li className="mt-2 flex text-black dark:text-white" key={item.title}>
<Link <DynamicTag
href={createUrl(item.path, newParams)} href={createUrl(item.path, newParams)}
className={clsx( className={clsx(
'w-full text-sm underline-offset-4 hover:underline dark:hover:text-gray-100', 'w-full text-sm underline-offset-4 hover:underline dark:hover:text-gray-100',
@ -32,7 +33,7 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
)} )}
> >
{item.title} {item.title}
</Link> </DynamicTag>
</li> </li>
); );
} }
@ -42,33 +43,30 @@ function SortFilterItem({ item }: { item: SortFilterItem }) {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const [active, setActive] = useState(searchParams.get('sort') === item.slug); const [active, setActive] = useState(searchParams.get('sort') === item.slug);
const q = searchParams.get('q'); const q = searchParams.get('q');
const href = createUrl(
pathname,
new URLSearchParams({
...(q && { q }),
...(item.slug && item.slug.length && { sort: item.slug })
})
);
const DynamicTag = active ? 'p' : Link;
useEffect(() => { useEffect(() => {
setActive(searchParams.get('sort') === item.slug); setActive(searchParams.get('sort') === item.slug);
}, [searchParams, item.slug]); }, [searchParams, item.slug]);
const href =
item.slug && item.slug.length
? createUrl(
pathname,
new URLSearchParams({
...(q && { q }),
sort: item.slug
})
)
: pathname;
return ( return (
<li className="mt-2 flex text-sm text-black dark:text-white" key={item.title}> <li className="mt-2 flex text-sm text-black dark:text-white" key={item.title}>
<Link <DynamicTag
prefetch={false} prefetch={!active ? false : undefined}
href={href} href={href}
className={clsx('w-full', { className={clsx('w-full', {
'underline underline-offset-4': active 'underline underline-offset-4': active
})} })}
> >
{item.title} {item.title}
</Link> </DynamicTag>
</li> </li>
); );
} }