select and deselect filter button

src/components/templates/Search/filterPrice.tsx

@@ -11,28 +11,20 @@ import Button from '../../atoms/Button'
 
 const cx = classNames.bind(styles)
 
-const filterItemsPrice = [
+const filterItems = [
   { display: 'all', value: undefined },
   { display: 'fixed price', value: FilterByPriceOptions.Fixed },
-  { display: 'dynamic price', value: FilterByPriceOptions.Dynamic }
+  { display: 'dynamic price', value: FilterByPriceOptions.Dynamic },
-]
+  { display: 'data sets', value: FilterByTypeOptions.Data },
-
+  { display: 'algorithms', value: FilterByTypeOptions.Algorithm }
-const filterItemsType = [
-  { display: 'all', value: undefined },
-  { display: 'algorithms', value: FilterByTypeOptions.Algorithm },
-  { display: 'data sets', value: FilterByTypeOptions.Data }
 ]
 
 export default function FilterPrice({
   priceType,
-  setPriceType,
+  setPriceType
-  serviceType,
-  setServiceType
 }: {
   priceType: string
   setPriceType: React.Dispatch<React.SetStateAction<string>>
-  serviceType: string
-  setServiceType: React.Dispatch<React.SetStateAction<string>>
 }): ReactElement {
   const navigate = useNavigate()
 
@@ -41,57 +33,35 @@ export default function FilterPrice({
     if (filterBy) {
       urlLocation = `${urlLocation}&priceType=${filterBy}`
     }
+    console.log('FILTER BY: ', filterBy)
     setPriceType(filterBy)
     navigate(urlLocation)
   }
 
-  async function applyTypeFilter(filterBy: string) {
-    let urlLocation = await addExistingParamsToUrl(location, 'serviceType')
-    if (filterBy) {
-      urlLocation = `${urlLocation}&serviceType=${filterBy}`
-    }
-    setServiceType(filterBy)
-    navigate(urlLocation)
-  }
-
   return (
     <div>
       <div className={styles.filterList}>
-        {filterItemsType.map((e, index) => {
+        {filterItems.map((e, index) => {
-          const filter = cx({
+          const selectFilter = cx({
-            [styles.selected]: e.value === serviceType,
-            [styles.filter]: true
-          })
-          return (
-            <Button
-              size="small"
-              style="text"
-              key={index}
-              className={filter}
-              onClick={async () => {
-                await applyTypeFilter(e.value)
-              }}
-            >
-              {e.display}
-            </Button>
-          )
-        })}
-      </div>
-      <div className={styles.filterList}>
-        {filterItemsPrice.map((e, index) => {
-          const filter = cx({
             [styles.selected]: e.value === priceType,
             [styles.filter]: true
           })
+          const isSelected = e.value === priceType
           return (
             <Button
               size="small"
               style="text"
               key={index}
-              className={filter}
+              className={selectFilter}
-              onClick={async () => {
+              onClick={
+                isSelected
+                  ? async () => {
+                      await applyFilter(undefined)
+                    }
+                  : async () => {
                       await applyFilter(e.value)
-              }}
+                    }
+              }
             >
               {e.display}
             </Button>