Fixes search page bugs. (#1019)

components/carousel.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 
 export async function Carousel() {
   // Collections that start with `hidden-*` are hidden from the search page.
-  const products = await getCollectionProducts('hidden-homepage-carousel');
+  const products = await getCollectionProducts({ collection: 'hidden-homepage-carousel' });
 
   if (!products?.length) return null;
 

components/grid/three-items.tsx

@@ -37,7 +37,9 @@ function ThreeItemGridItem({
 
 export async function ThreeItemGrid() {
   // Collections that start with `hidden-*` are hidden from the search page.
-  const homepageItems = await getCollectionProducts('hidden-homepage-featured-items');
+  const homepageItems = await getCollectionProducts({
+    collection: 'hidden-homepage-featured-items'
+  });
 
   if (!homepageItems[0] || !homepageItems[1] || !homepageItems[2]) return null;
 

components/layout/navbar/search.tsx

@@ -3,6 +3,7 @@
 import { useRouter, useSearchParams } from 'next/navigation';
 
 import SearchIcon from 'components/icons/search';
+import { createUrl } from 'lib/utils';
 
 export default function Search() {
   const router = useRouter();
@@ -13,12 +14,15 @@ export default function Search() {
 
     const val = e.target as HTMLFormElement;
     const search = val.search as HTMLInputElement;
+    const newParams = new URLSearchParams(searchParams.toString());
 
     if (search.value) {
-      router.push(`/search?q=${search.value}`);
+      newParams.set('q', search.value);
     } else {
-      router.push(`/search`);
+      newParams.delete('q');
     }
+
+    router.push(createUrl('/search', newParams));
   }
 
   return (

components/layout/search/filter/item.tsx

@@ -12,6 +12,9 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const [active, setActive] = useState(pathname === item.path);
+  const newParams = new URLSearchParams(searchParams.toString());
+
+  newParams.delete('q');
 
   useEffect(() => {
     setActive(pathname === item.path);
@@ -20,7 +23,7 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
   return (
     <li className="mt-2 flex text-sm text-gray-400" key={item.title}>
       <Link
-        href={createUrl(item.path, searchParams)}
+        href={createUrl(item.path, newParams)}
         className={clsx('w-full hover:text-gray-800 dark:hover:text-gray-100', {
           'text-gray-600 dark:text-gray-400': !active,
           'font-semibold text-black dark:text-white': active
@@ -36,6 +39,7 @@ function SortFilterItem({ item }: { item: SortFilterItem }) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const [active, setActive] = useState(searchParams.get('sort') === item.slug);
+  const q = searchParams.get('q');
 
   useEffect(() => {
     setActive(searchParams.get('sort') === item.slug);
@@ -43,7 +47,13 @@ function SortFilterItem({ item }: { item: SortFilterItem }) {
 
   const href =
     item.slug && item.slug.length
-      ? createUrl(pathname, new URLSearchParams({ sort: item.slug }))
+      ? createUrl(
+          pathname,
+          new URLSearchParams({
+            ...(q && { q }),
+            sort: item.slug
+          })
+        )
       : pathname;
 
   return (