site: work around empty searchParams Next.js bug?

related vercel/next.js#53543
muxinc · Jun 28, 2024 · e953a4e · e953a4e
1 parent 8cf1769
commit e953a4e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/site/app/_components/Search.tsx b/site/app/_components/Search.tsx
@@ -16,7 +16,10 @@ export default function Search() {
     if (term) {
       params.set('search', term);
     } else {
-      params.delete('search');
+      // This is a workaround for a bug where the page without a search query
+      // would not trigger a RSC update.
+      // params.delete('search');
+      params.set('search', term);
     }
     replace(`${pathname}?${params.toString()}`, { scroll: false });
   };
@@ -37,7 +40,12 @@ export default function Search() {
             defaultValue={search}
           />
         </span>
-        <span className={clsx(search && 'hidden', 'absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer')}>
+        <span
+          className={clsx(
+            search && 'hidden',
+            'absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer'
+          )}
+        >
           <svg
             role="img"
             xmlns="http://www.w3.org/2000/svg"
@@ -62,7 +70,10 @@ export default function Search() {
           </svg>
         </span>
         <button
-          className={clsx(!search && 'hidden', 'absolute top-1/2 -translate-y-1/2 cursor-pointer right-2')}
+          className={clsx(
+            !search && 'hidden',
+            'absolute top-1/2 -translate-y-1/2 cursor-pointer right-2'
+          )}
           onClick={() => {
             if (!inputRef.current) return;
             inputRef.current.focus();

diff --git a/site/app/_utils/content.ts b/site/app/_utils/content.ts
@@ -76,6 +76,7 @@ async function filterCollection<T extends { _meta: Meta }>(
   for (let [tagGroup, selectedTags] of Object.entries(searchParams)) {
     const selectedTagsArray = Array.isArray(selectedTags) ? selectedTags : [selectedTags];
     collection = collection.filter((item: any) => {
+      if (!item.tagGroups[tagGroup]) return true;
       return selectedTagsArray.some((tag: string) =>
         includesIgnoreCase(item.tagGroups[tagGroup], tag)
       );