From eb9b6a9e59f403fe6832964367551a06a9724254 Mon Sep 17 00:00:00 2001
From: Chloe <pinkcloudvnn@gmail.com>
Date: Tue, 9 Jul 2024 07:22:02 +0700
Subject: [PATCH] fix reset search on filters

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
---
 components/filters/hompage-filters.tsx        |  5 ++--
 components/filters/index.tsx                  |  5 ++--
 .../layout/search/filters/filters-list.tsx    |  9 ++-----
 .../layout/search/filters/selected-list.tsx   | 13 ++++------
 lib/utils.ts                                  | 24 +++++++++++++++++++
 5 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/components/filters/hompage-filters.tsx b/components/filters/hompage-filters.tsx
index 47f4ff1a4..211ceb436 100644
--- a/components/filters/hompage-filters.tsx
+++ b/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">
diff --git a/components/filters/index.tsx b/components/filters/index.tsx
index c4239d87b..a4b543626 100644
--- a/components/filters/index.tsx
+++ b/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">
diff --git a/components/layout/search/filters/filters-list.tsx b/components/layout/search/filters/filters-list.tsx
index 96e89aa07..76f96f425 100644
--- a/components/layout/search/filters/filters-list.tsx
+++ b/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 = {
-    ...(q && { q }),
-    ...(sort && { sort }),
-    ...(collection && { collection })
-  };
+  const initialFilters = getInitialSearchParams(searchParams);
 
   const handleChange = (e: React.FormEvent<HTMLFormElement>) => {
     const formData = new FormData(e.currentTarget);
diff --git a/components/layout/search/filters/selected-list.tsx b/components/layout/search/filters/selected-list.tsx
index 16f8a8cfa..1e08c3f36 100644
--- a/components/layout/search/filters/selected-list.tsx
+++ b/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 collection = searchParams.get('collection');
-    const q = searchParams.get('q');
-    const newSearchParams = new URLSearchParams({
-      ...(sort && { sort }),
-      ...(collection && { collection }),
-      ...(q && { q })
-    });
+    const initialSearchParams = getInitialSearchParams(searchParams);
+    const newSearchParams = new URLSearchParams(initialSearchParams);
+
     router.replace(createUrl(pathname, newSearchParams), { scroll: false });
   };
 
diff --git a/lib/utils.ts b/lib/utils.ts
index 8344d95a2..76f5706d6 100644
--- a/lib/utils.ts
+++ b/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;
+};