fix reset search on filters

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

components/filters/hompage-filters.tsx

@@ -13,12 +13,13 @@ const title: Record<string, string> = {
 const { STORE_PREFIX } = process.env;
 
 const HomePageFilters = async () => {
-  const makes = await fetchMakes();
-  const menu = await getMenu('main-menu');
   // preload models and years
   fetchModels();
   fetchYears();
 
+  const makes = await fetchMakes();
+  const menu = await getMenu('main-menu');
+
   return (
     <>
       <h1 className="text-4xl font-bold tracking-tight text-white lg:text-6xl">

components/filters/index.tsx

@@ -15,12 +15,13 @@ const YMMFiltersContainer = ({ children }: { children: ReactNode }) => {
 };
 
 const YMMFilters = async () => {
-  const makes = await fetchMakes();
-  const menu = await getMenu('main-menu');
   // preload models and years
   fetchModels();
   fetchYears();
 
+  const makes = await fetchMakes();
+  const menu = await getMenu('main-menu');
+
   return (
     <YMMFiltersContainer>
       <div className="flex grow flex-col items-center gap-3 @md:flex-row">

components/layout/search/filters/filters-list.tsx

@@ -3,7 +3,7 @@ import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import { Filter, FilterType } from 'lib/shopify/types';
-import { createUrl } from 'lib/utils';
+import { createUrl, getInitialSearchParams } from 'lib/utils';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import PriceRange from './price-range';
 import SelectedList from './selected-list';
@@ -12,12 +12,7 @@ const Filters = ({ filters, defaultOpen = true }: { filters: Filter[]; defaultOp
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
-  const { q, sort, collection } = Object.fromEntries(searchParams);
+  const initialFilters = getInitialSearchParams(searchParams);
-  const initialFilters = {
-    ...(q && { q }),
-    ...(sort && { sort }),
-    ...(collection && { collection })
-  };
 
   const handleChange = (e: React.FormEvent<HTMLFormElement>) => {
     const formData = new FormData(e.currentTarget);

components/layout/search/filters/selected-list.tsx

@@ -2,7 +2,7 @@
 
 import { XMarkIcon } from '@heroicons/react/16/solid';
 import { Filter } from 'lib/shopify/types';
-import { createUrl } from 'lib/utils';
+import { createUrl, getInitialSearchParams } from 'lib/utils';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
 const SelectedList = ({ filters }: { filters: Filter[] }) => {
@@ -36,14 +36,9 @@ const SelectedList = ({ filters }: { filters: Filter[] }) => {
   };
 
   const handleClearAll = () => {
-    const sort = searchParams.get('sort');
+    const initialSearchParams = getInitialSearchParams(searchParams);
-    const collection = searchParams.get('collection');
+    const newSearchParams = new URLSearchParams(initialSearchParams);
-    const q = searchParams.get('q');
+
-    const newSearchParams = new URLSearchParams({
-      ...(sort && { sort }),
-      ...(collection && { collection }),
-      ...(q && { q })
-    });
     router.replace(createUrl(pathname, newSearchParams), { scroll: false });
   };
 

lib/utils.ts

@@ -1,6 +1,7 @@
 import clsx, { ClassValue } from 'clsx';
 import { ReadonlyURLSearchParams } from 'next/navigation';
 import { twMerge } from 'tailwind-merge';
+import { MAKE_FILTER_ID, MODEL_FILTER_ID, YEAR_FILTER_ID } from './constants';
 import { Menu, Product, ProductVariant } from './shopify/types';
 
 export function cx(...args: ClassValue[]) {
@@ -161,3 +162,26 @@ export const getSelectedProductVariant = ({
 
   return variant || product.variants[0];
 };
+
+const YMM_KEYS = [MAKE_FILTER_ID, YEAR_FILTER_ID, MODEL_FILTER_ID];
+
+export const getInitialSearchParams = (searchParams: URLSearchParams) => {
+  const { q, sort, collection, ...rest } = Object.fromEntries(searchParams);
+
+  const initialFilters: { [key: string]: string } = {
+    ...(q && { q }),
+    ...(sort && { sort }),
+    ...(collection && { collection })
+  };
+
+  Object.keys(rest)
+    .filter((key) => YMM_KEYS.includes(key))
+    .forEach((key) => {
+      const value = searchParams.get(key);
+      if (value) {
+        initialFilters[key] = value;
+      }
+    });
+
+  return initialFilters;
+};