From e6936593a6d33648c7b4b1454cdca26f0c1506be Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Wed, 16 Oct 2024 02:27:22 +0900
Subject: [PATCH] feat: update filtering

---
 public/assets/close-black.svg                 |  3 ++
 src/components/Dropdown/Dropdown.tsx          | 49 ++++++++++++++++++-
 .../Explore/OperatorFilter/OperatorFilter.tsx |  2 +-
 src/containers/Explore/ExploreContainer.tsx   | 27 ++++++++++
 4 files changed, 78 insertions(+), 3 deletions(-)
 create mode 100644 public/assets/close-black.svg

diff --git a/public/assets/close-black.svg b/public/assets/close-black.svg
new file mode 100644
index 0000000..a6b14ed
--- /dev/null
+++ b/public/assets/close-black.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.0833 3.73916L10.2608 2.91666L6.99996 6.17749L3.73913 2.91666L2.91663 3.73916L6.17746 6.99999L2.91663 10.2608L3.73913 11.0833L6.99996 7.82249L10.2608 11.0833L11.0833 10.2608L7.82246 6.99999L11.0833 3.73916Z" fill="black"/>
+</svg>
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 96ed2ee..e49fec1 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -1,4 +1,6 @@
+import { defaultFilterState } from '@/states/filterState'
 import styled from '@emotion/styled'
+import { hookstate, useHookstate } from '@hookstate/core'
 import React, { useEffect, useRef, useState } from 'react'
 import Checkbox from './Checkbox' // Import the CustomCheckbox
 
@@ -10,6 +12,10 @@ interface DropdownProps {
   prefill?: string[]
 }
 
+const globalState = hookstate(() =>
+  JSON.parse(JSON.stringify(defaultFilterState)),
+)
+
 const Dropdown: React.FC<DropdownProps> = ({
   title,
   options,
@@ -17,18 +23,35 @@ const Dropdown: React.FC<DropdownProps> = ({
   onSelectionChange,
   prefill = [],
 }) => {
+  const [updated, setUpdated] = useState(false)
   const [selectedOptions, setSelectedOptions] = useState<string[]>([])
   const [isExpanded, setIsExpanded] = useState(false)
 
   const dropdownRef = useRef<HTMLDivElement>(null)
 
-  // If prefill is provided, set the selected options to the prefill
+  const state = useHookstate(globalState)
+  const defualtState = state.get()
+
+  useEffect(() => {
+    if (defualtState[filterType]?.length === selectedOptions?.length) {
+      setUpdated(false)
+    }
+  }, [defualtState, selectedOptions])
+
   useEffect(() => {
     if (prefill?.length) {
       setSelectedOptions(prefill)
     }
   }, [prefill])
 
+  const handleUpdate = (selected: string[]) => {
+    if (selected?.length !== options?.length) {
+      setUpdated(true)
+    } else {
+      setUpdated(false)
+    }
+  }
+
   const handleSelect = (option: string) => {
     let newSelectedOptions = []
     if (selectedOptions.includes(option)) {
@@ -38,16 +61,22 @@ const Dropdown: React.FC<DropdownProps> = ({
     }
     setSelectedOptions(newSelectedOptions)
     onSelectionChange(newSelectedOptions, filterType)
+
+    handleUpdate(newSelectedOptions)
   }
 
   const selectAll = () => {
     setSelectedOptions(options)
     onSelectionChange(options, filterType)
+
+    setUpdated(false)
   }
 
   const clearAll = () => {
     setSelectedOptions([])
     onSelectionChange([], filterType)
+
+    setUpdated(true)
   }
 
   const toggleDropdown = () => {
@@ -77,7 +106,10 @@ const Dropdown: React.FC<DropdownProps> = ({
   return (
     <DropdownContainer ref={dropdownRef}>
       <DropdownHeader onClick={toggleDropdown} isExpanded={isExpanded}>
-        <span>{title}</span>
+        <TitleContainer>
+          {updated && <Dot isExpanded={isExpanded} />}
+          <span>{title}</span>
+        </TitleContainer>
         <Chevron isExpanded={isExpanded}>
           <img src="/assets/chevron-down.svg" alt="chevron down" />
         </Chevron>
@@ -194,4 +226,17 @@ const ScrollDiv = styled.div`
   }
 `
 
+const Dot = styled.div<{ isExpanded: boolean }>`
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: ${({ isExpanded }) => (isExpanded ? 'black' : 'white')};
+`
+
+const TitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 14px;
+`
+
 export default Dropdown
diff --git a/src/components/Explore/OperatorFilter/OperatorFilter.tsx b/src/components/Explore/OperatorFilter/OperatorFilter.tsx
index e8b6be3..f046cff 100644
--- a/src/components/Explore/OperatorFilter/OperatorFilter.tsx
+++ b/src/components/Explore/OperatorFilter/OperatorFilter.tsx
@@ -30,8 +30,8 @@ const filterOptions: FilterOption[] = [
 interface OperatorFilterProps {}
 
 const OperatorFilter: React.FC<OperatorFilterProps> = () => {
-  // checkbox based on filterOptions
   const [checked, setChecked] = useState<number | null>(null)
+
   return (
     <Container>
       {filterOptions.map((option, index) => (
diff --git a/src/containers/Explore/ExploreContainer.tsx b/src/containers/Explore/ExploreContainer.tsx
index 743a833..36c85b2 100644
--- a/src/containers/Explore/ExploreContainer.tsx
+++ b/src/containers/Explore/ExploreContainer.tsx
@@ -53,6 +53,10 @@ const ExploreSection: React.FC<ExploreSectionProps> = () => {
     state[filterType].set(selectedOptions)
   }
 
+  const handleResetAll = () => {
+    state.set(defaultFilterState)
+  }
+
   return (
     <Container>
       <h1 className="section-title">Operators</h1>
@@ -99,6 +103,9 @@ const ExploreSection: React.FC<ExploreSectionProps> = () => {
           filterType="background"
           prefill={filter.background.slice()}
         />
+        <ResetAll onClick={handleResetAll}>
+          Reset All <img src="/assets/close-black.svg" />
+        </ResetAll>
       </DropdownContainer>
       <OperatorGrid
         key={JSON.stringify(filter)}
@@ -137,6 +144,7 @@ const DropdownContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
 
   max-width: 911px;
   flex-wrap: wrap;
@@ -155,4 +163,23 @@ const DropdownContainer = styled.div`
   }
 `
 
+const ResetAll = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: white;
+  color: black;
+  border: none;
+  height: 42px;
+  padding: 10px 14px 10px 18px;
+  gap: 14px;
+  position: absolute;
+  right: -136px;
+  cursor: pointer;
+
+  @media (max-width: 1190px) {
+    display: none;
+  }
+`
+
 export default ExploreSection