fix: filter parameters

Author: fagundesjg

package-lock.json

@@ -27,7 +27,7 @@
     "date-fns": "^3.6.0",
     "formik": "^2.4.6",
     "lucide-react": "^0.378.0",
-    "query-string": "^9.0.0",
+    "qs": "^6.12.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.4",
@@ -41,6 +41,7 @@
   },
   "devDependencies": {
     "@types/node": "^20.12.8",
+    "@types/qs": "^6.9.15",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@types/react-input-mask": "^3.0.5",

package.json

@@ -1,7 +1,7 @@
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { RotateCw, LogOutIcon } from 'lucide-react';
-import qs from 'query-string';
+import qs from 'qs';
 
 import { Footer, Header } from '@/components';
 import { useShelters, useThrottle } from '@/hooks';
@@ -36,7 +36,7 @@ const Home = () => {
       throttle: 400,
       callback: (v) => {
         const params = {
-          search: v ? qs.stringify(filterData, { arrayFormat: 'bracket' }) : '',
+          search: v ? qs.stringify(filterData) : '',
         };
         refresh({
           params: params,
@@ -51,7 +51,8 @@ const Home = () => {
     setSearchValue('');
     setSearch('');
     setFilterData(initialFilterData);
-  }, [setSearch]);
+    setSearchParams('');
+  }, [setSearch, setSearchParams]);
 
   const hasMore = useMemo(
     () => shelters.page * shelters.perPage < shelters.count,
@@ -63,11 +64,13 @@ const Home = () => {
       setOpenModal(false);
       setFilterData(values);
       console.log(values);
-      const search = qs.stringify(values, { arrayFormat: 'bracket' });
-      setSearchParams(search);
+      const searchQuery = qs.stringify(values, {
+        skipNulls: true,
+      });
+      setSearchParams(searchQuery);
       refresh({
         params: {
-          search,
+          search: searchQuery,
         },
       });
     },