feat: hidden filter button if filter is empty

Author: fagundesjg

src/hooks/useShelters/useShelters.tsx

@@ -17,14 +17,16 @@ const useShelters = () => {
 
   const refresh = useCallback(
     (config: AxiosRequestConfig<any> = {}, append: boolean = false) => {
+      const { search, ...rest } = (config ?? {}).params ?? {};
       if (!append) setLoading(true);
       api
         .get<IServerResponse<any>>('/shelters', {
           ...config,
           params: {
             orderBy: 'prioritySum',
             order: 'desc',
-            ...(config.params ?? {}),
+            search: search ?? new URLSearchParams(window.location.search),
+            ...rest,
           },
         })
         .then(({ data }) => {

src/pages/Home/Home.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useMemo, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { RotateCw, LogOutIcon } from 'lucide-react';
 import qs from 'qs';
@@ -21,16 +21,18 @@ const initialFilterData: IFilterFormProps = {
 
 const Home = () => {
   const { data: shelters, loading, refresh } = useShelters();
-  const [searchParams, setSearchParams] = useSearchParams();
   const {
     loading: loadingSession,
     refreshSession,
     session,
   } = useContext(SessionContext);
-  const [searchValue, setSearchValue] = useState<string>('');
   const [isModalOpen, setOpenModal] = useState<boolean>(false);
-  const [filterData, setFilterData] =
-    useState<IFilterFormProps>(initialFilterData);
+  const [, setSearchParams] = useSearchParams();
+  const [filterData, setFilterData] = useState<IFilterFormProps>({
+    ...initialFilterData,
+    ...qs.parse(new URLSearchParams(window.location.search).toString()),
+  });
+
   const [, setSearch] = useThrottle<string>(
     {
       throttle: 400,
@@ -48,7 +50,6 @@ const Home = () => {
   const navigate = useNavigate();
 
   const clearSearch = useCallback(() => {
-    setSearchValue('');
     setSearch('');
     setFilterData(initialFilterData);
     setSearchParams('');
@@ -63,7 +64,6 @@ const Home = () => {
     (values: IFilterFormProps) => {
       setOpenModal(false);
       setFilterData(values);
-      console.log(values);
       const searchQuery = qs.stringify(values, {
         skipNulls: true,
       });
@@ -82,7 +82,7 @@ const Home = () => {
       ...shelters.filters,
       page: shelters.page + 1,
       perPage: shelters.perPage,
-      search: searchValue ? searchValue : '',
+      search: qs.stringify(filterData),
     };
 
     refresh(
@@ -91,11 +91,7 @@ const Home = () => {
       },
       true
     );
-  }, [refresh, searchValue, shelters.filters, shelters.page, shelters.perPage]);
-
-  useEffect(() => {
-    console.log(searchParams.toString());
-  }, [searchParams]);
+  }, [refresh, filterData, shelters.filters, shelters.page, shelters.perPage]);
 
   return (
     <div className="flex flex-col h-screen items-center">
@@ -147,9 +143,9 @@ const Home = () => {
         count={shelters.count}
         data={shelters.results}
         onFetchMoreData={handleFetchMore}
-        searchValue={searchValue}
+        searchValue={filterData.search}
         onSearchValueChange={(v) => {
-          setSearchValue(v);
+          setFilterData((prev) => ({ ...prev, search: v }));
           setSearch(v);
         }}
         onSelectShelter={(s) => navigate(`/abrigo/${s.id}`)}

src/pages/Home/components/ShelterListView/ShelterListView.tsx

@@ -10,6 +10,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { IShelterListViewProps } from './types';
+import { useSearchParams } from 'react-router-dom';
 
 const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
   (props, ref) => {
@@ -28,6 +29,8 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
       ...rest
     } = props;
 
+    const [searchParams] = useSearchParams();
+
     return (
       <div className={cn(className, 'flex flex-col gap-2')}>
         <h1 className="text-[#2f2f2f] font-semibold text-2xl">
@@ -51,23 +54,23 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
           <Button
             variant="ghost"
             size="sm"
-            className="flex gap-2 items-center [&_svg]:stroke-blue-500"
+            className="flex gap-2 items-center text-blue-500 hover:text-blue-600 active:text-blue-700"
             onClick={onOpenModal}
           >
-            <ListFilter className="h-5 w-5" />
-            <h1 className="font-semibold text-[16px] text-blue-500">Filtros</h1>
+            <ListFilter className="h-5 w-5 stroke-blue-500" />
+            Filtros
           </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="flex gap-2 items-center [&_svg]:stroke-blue-500"
-            onClick={onClearSearch}
-          >
-            <CircleAlert className="h-5 w-5" />
-            <h1 className="font-semibold text-[16px] text-blue-500">
+          {searchParams.toString() && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="flex gap-2 items-center text-blue-500 hover:text-blue-600 active:text-blue-700"
+              onClick={onClearSearch}
+            >
+              <CircleAlert className="h-5 w-5 stroke-blue-500" />
               Limpar Filtros
-            </h1>
-          </Button>
+            </Button>
+          )}
         </div>
         <main ref={ref} className="flex flex-col gap-4" {...rest}>
           {loading ? (