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 @@
+
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 = ({
title,
options,
@@ -17,18 +23,35 @@ const Dropdown: React.FC = ({
onSelectionChange,
prefill = [],
}) => {
+ const [updated, setUpdated] = useState(false)
const [selectedOptions, setSelectedOptions] = useState([])
const [isExpanded, setIsExpanded] = useState(false)
const dropdownRef = useRef(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 = ({
}
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 = ({
return (
- {title}
+
+ {updated && }
+ {title}
+
@@ -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 = () => {
- // checkbox based on filterOptions
const [checked, setChecked] = useState(null)
+
return (
{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 = () => {
state[filterType].set(selectedOptions)
}
+ const handleResetAll = () => {
+ state.set(defaultFilterState)
+ }
+
return (
Operators
@@ -99,6 +103,9 @@ const ExploreSection: React.FC = () => {
filterType="background"
prefill={filter.background.slice()}
/>
+
+ Reset All
+