Reset filters feature

codiumkg · May 26, 2024 · 500dde3 · 500dde3
1 parent a2e10b8
commit 500dde3
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git a/src/components/shared/FiltersBar.tsx b/src/components/shared/FiltersBar.tsx
@@ -1,7 +1,8 @@
 import { IFilter } from "@/interfaces/common";
-import { Card, CardBody } from "@nextui-org/react";
+import { Card, CardBody, Tooltip } from "@nextui-org/react";
 import { useSearchParams } from "react-router-dom";
 import cn from "classnames";
+import { Icons } from "./Icons";
 
 interface Props {
   filters: IFilter[];
@@ -16,11 +17,29 @@ export default function FiltersBar({ filters }: Props) {
     setSearchParams(searchParams);
   };
 
+  const handleFiltersReset = () => {
+    filters.forEach((filter) => {
+      searchParams.delete(filter.key);
+    });
+    setSearchParams(searchParams);
+  };
+
   return (
     <Card>
       <CardBody>
         <div className="flex flex-col p-1 text-sm gap-4">
-          <h1 className="font-bold">Фильтры</h1>
+          <div className="flex items-center justify-between">
+            <h1 className="font-bold">Фильтры</h1>
+
+            <Tooltip content="Сбросить фильтры" showArrow placement="top-end">
+              <span
+                className="text-lg cursor-pointer"
+                onClick={handleFiltersReset}
+              >
+                <Icons.DELETE />
+              </span>
+            </Tooltip>
+          </div>
 
           <div className="flex flex-col gap-3">
             {filters.map((filter) => (
@@ -29,8 +48,9 @@ export default function FiltersBar({ filters }: Props) {
                 <div className="flex flex-col gap-2">
                   {filter.values.map((value) => (
                     <div
+                      key={value.value}
                       className={cn(
-                        "p-1 cursor-pointer font-light text-xs",
+                        "p-1 cursor-pointer font-light text-xs hover:text-primary duration-300",
                         value.value === searchParams.get(filter.key)
                           ? "text-primary"
                           : ""

diff --git a/src/components/shared/Icons.tsx b/src/components/shared/Icons.tsx
@@ -6,6 +6,8 @@ import { FaUserLarge } from "react-icons/fa6";
 import { MdOutlineGroup } from "react-icons/md";
 import { GoTasklist } from "react-icons/go";
 import { HiMiniPresentationChartLine } from "react-icons/hi2";
+import { GrPowerReset } from "react-icons/gr";
+import { FiDelete } from "react-icons/fi";
 
 interface Props extends HTMLAttributes<SVGElement> {}
 
@@ -19,4 +21,6 @@ export const Icons = {
     <HiMiniPresentationChartLine {...props} />
   ),
   SEARCH: (props: Props) => <IoSearchOutline {...props} />,
+  RESET: (props: Props) => <GrPowerReset {...props} />,
+  DELETE: (props: Props) => <FiDelete {...props} />,
 };
diff --git a/src/components/shared/SearchBar.tsx b/src/components/shared/SearchBar.tsx
@@ -13,7 +13,7 @@ export default function SearchBar() {
     if (!text.length) {
       searchParams.delete("search");
     } else {
-      searchParams.append("search", text);
+      searchParams.set("search", text);
     }
     setSearchParams(searchParams);
   }, 500);