From fb00cff3b3f167a4fb823b21cf66d63f4fa0f0c5 Mon Sep 17 00:00:00 2001
From: Leandro Palazzolo <leapalazzolo@gmail.com>
Date: Mon, 8 Jan 2024 19:21:00 -0300
Subject: [PATCH] refactor: individual clear filter

---
 assets/icons.tsx                     | 12 +++++++++++-
 components/filters/select-filter.tsx |  6 +++++-
 components/filters/toolbar.tsx       | 21 +++------------------
 3 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/assets/icons.tsx b/assets/icons.tsx
index 4e4b335..e2a7ac1 100644
--- a/assets/icons.tsx
+++ b/assets/icons.tsx
@@ -1,6 +1,16 @@
 import * as React from "react";
 import { IconSvgProps } from "@/types/index";
-
+export const CircledCross = ({ size = 24,
+  width,
+  height,
+  ...props }: IconSvgProps) => (
+  <svg
+    height={size || height}
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}>
+    <path d="M12 2a10 10 0 1010 10A10.016 10.016 0 0012 2zm3.36 12.3a.754.754 0 010 1.06.748.748 0 01-1.06 0l-2.3-2.3-2.3 2.3a.748.748 0 01-1.06 0 .754.754 0 010-1.06l2.3-2.3-2.3-2.3A.75.75 0 019.7 8.64l2.3 2.3 2.3-2.3a.75.75 0 011.06 1.06l-2.3 2.3z" fill="currentColor"></path>  </svg>
+)
 export const HeartFilledIcon = ({
   size = 24,
   width,
diff --git a/components/filters/select-filter.tsx b/components/filters/select-filter.tsx
index 28e2df4..3eb094c 100644
--- a/components/filters/select-filter.tsx
+++ b/components/filters/select-filter.tsx
@@ -6,6 +6,7 @@ import { Select, SelectItem } from "@nextui-org/select";
 import { FilterOption } from "@/types/filters";
 import { createUrl } from "@/utils/url";
 import Emoji from "../emoji";
+import { CircledCross } from "@/assets/icons";
 
 interface ISelectFilterProps {
   placeholder: string;
@@ -39,7 +40,9 @@ export const SelectFilter = ({
     router.replace(optionUrl, { scroll: false });
 
   };
-
+  const resetFilter = () => {
+    handleSelectionChange("")
+  }
   return (
     <Select
       aria-label={`Select Filter ${placeholder}`}
@@ -49,6 +52,7 @@ export const SelectFilter = ({
       placeholder={placeholder}
       selectionMode="single"
       startContent={<Emoji emoji={mainEmoji} className="text-sm" />}
+      endContent={selectedKey && <CircledCross className="z-10 appearance-none outline-none select-none transition-opacity opacity-70 hover:opacity-100 cursor-pointer active:opacity-disabled tap-highlight-transparent text-large" onClick={resetFilter} />}
       selectedKeys={selectedKey ? new Set([selectedKey]) : new Set()}
       onSelectionChange={handleSelectionChange}
     >
diff --git a/components/filters/toolbar.tsx b/components/filters/toolbar.tsx
index 2a12b3f..60caefc 100644
--- a/components/filters/toolbar.tsx
+++ b/components/filters/toolbar.tsx
@@ -57,25 +57,10 @@ const Toolbar = ({ searchParams }: IToolbarProps) => {
         />
       </div>
 
-      {
-        numberOfFilters > 0 &&
-        <div className="flex justify-left items-stretch gap-4">
+      {numberOfFilters > 1 && (
+        <ClearFilters onClear={clearAllFilters} value="All filters" />
+      )}
 
-          {searchParams?.languages && (
-            <ClearFilters onClear={clearLanguagesFilter} value={searchParams.languages} param="languages" />
-          )}
-          {searchParams?.interests && (
-            <ClearFilters onClear={clearInterestsFilter} value={searchParams.interests} param="interests" />
-          )}
-          {searchParams?.projects && (
-            <ClearFilters onClear={clearProjectsFilter} value={searchParams.projects} param="projects" />
-          )}
-          {numberOfFilters > 1 && (
-            <ClearFilters onClear={clearAllFilters} value="All filters" />
-          )}
-        </div>
-
-      }
     </>
   );
 };