clear button display changed

src/components/templates/Search/filterPrice.module.css

@@ -43,13 +43,14 @@ button.filter,
   color: var(--background-body);
 }
 
-.filter.clearSelected {
+.showClear {
-  color: var(--background-body);
+  display: inline-flex;
-  background: var(--font-color-text);
+  text-transform: capitalize;
-  border-color: var(--background-body);
+  color: var(--color-secondary);
+  font-weight: var(--font-weight-base);
+  margin-left: calc(var(--spacer) / 6);
 }
 
-.filter.clearSelected::after {
+.hideClear {
-  margin-left: calc(var(--spacer) / 6);
+  display: none !important;
-  color: var(--background-body);
+}
-}

src/components/templates/Search/filterPrice.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import { useNavigate } from '@reach/router'
 import styles from './filterPrice.module.css'
 import classNames from 'classnames/bind'
@@ -11,7 +11,7 @@ import Button from '../../atoms/Button'
 
 const cx = classNames.bind(styles)
 
-const clearFilters = [{ display: 'clear', value: '' }]
+const clearFilters = [{ display: 'Clear', value: '' }]
 
 const priceFilterItems = [
   { display: 'fixed price', value: FilterByPriceOptions.Fixed },
@@ -38,7 +38,6 @@ export default function FilterPrice({
 
   const [priceSelections, setPriceSelections] = useState<string[]>([])
   const [serviceSelections, setServiceSelections] = useState<string[]>([])
-  const [clearSelected, setClearSelected] = useState<boolean>(false)
 
   async function applyPriceFilter(filterBy: string) {
     let urlLocation = await addExistingParamsToUrl(location, 'priceType')
@@ -64,58 +63,43 @@ export default function FilterPrice({
       value === FilterByPriceOptions.Dynamic
     ) {
       if (isSelected) {
-        if (clearSelected) {
+        if (priceSelections.length > 1) {
-          setPriceSelections([])
+          // both selected -> select the other one
+          const otherValue = priceFilterItems.find((p) => p.value !== value)
+            .value
+          await applyPriceFilter(otherValue)
         } else {
-          if (priceSelections.length > 1) {
+          // only the current one selected -> deselect it
-            // both selected -> select the other one
+          await applyPriceFilter(undefined)
-            const otherValue = priceFilterItems.find((p) => p.value !== value)
-              .value
-            await applyPriceFilter(otherValue)
-            setPriceSelections([otherValue])
-          } else {
-            // only the current one selected -> deselect it
-            await applyPriceFilter(undefined)
-            setPriceSelections([])
-          }
         }
       } else {
         if (priceSelections.length > 0) {
           // one already selected -> both selected
           await applyPriceFilter(FilterByPriceOptions.All)
           setPriceSelections(priceFilterItems.map((p) => p.value))
-          setClearSelected(false)
         } else {
           // none selected -> select
           await applyPriceFilter(value)
           setPriceSelections([value])
-          setClearSelected(false)
         }
       }
     } else {
       if (isSelected) {
-        if (clearSelected) {
+        if (serviceSelections.length > 1) {
-          setServiceSelections([])
+          const otherValue = serviceFilterItems.find((p) => p.value !== value)
+            .value
+          await applyServiceFilter(otherValue)
+          setServiceSelections([otherValue])
         } else {
-          if (serviceSelections.length > 1) {
+          await applyServiceFilter(undefined)
-            const otherValue = serviceFilterItems.find((p) => p.value !== value)
-              .value
-            await applyServiceFilter(otherValue)
-            setServiceSelections([otherValue])
-          } else {
-            await applyServiceFilter(undefined)
-            setServiceSelections([])
-          }
         }
       } else {
         if (serviceSelections.length) {
           await applyServiceFilter(undefined)
           setServiceSelections(serviceFilterItems.map((p) => p.value))
-          setClearSelected(false)
         } else {
           await applyServiceFilter(value)
           setServiceSelections([value])
-          setClearSelected(false)
         }
       }
     }
@@ -133,79 +117,72 @@ export default function FilterPrice({
     setServiceSelections([])
     setPriceSelections([])
 
-    setClearSelected(true)
     setPriceType(undefined)
     setServiceType(undefined)
     navigate(urlLocation)
   }
 
   return (
-    <div>
+    <div className={styles.filterList}>
-      <div className={styles.filterList}>
+      {priceFilterItems.map((e, index) => {
-        {clearFilters.map((e, index) => {
+        const isPriceSelected =
-          const selectFilter = cx({
+          e.value === priceType || priceSelections.includes(e.value)
-            [styles.clearSelected]: clearSelected,
+        const selectFilter = cx({
-            [styles.filter]: true
+          [styles.selected]: isPriceSelected,
-          })
+          [styles.filter]: true
-          return (
+        })
-            <Button
+        return (
-              size="small"
+          <Button
-              style="text"
+            size="small"
-              key={index}
+            style="text"
-              className={selectFilter}
+            key={index}
-              onClick={async () => {
+            className={selectFilter}
-                applyClearFilter()
+            onClick={async () => {
-              }}
+              handleSelectedFilter(isPriceSelected, e.value)
-            >
+            }}
-              {e.display}
+          >
-            </Button>
+            {e.display}
-          )
+          </Button>
-        })}
+        )
-        {priceFilterItems.map((e, index) => {
+      })}
-          const isPriceSelected =
+      {serviceFilterItems.map((e, index) => {
-            (e.value === priceType || priceSelections.includes(e.value)) &&
+        const isServiceSelected =
-            clearSelected === false
+          e.value === serviceType || serviceSelections.includes(e.value)
-          const selectFilter = cx({
+        const selectFilter = cx({
-            [styles.selected]: isPriceSelected,
+          [styles.selected]: isServiceSelected,
-            [styles.filter]: true
+          [styles.filter]: true
-          })
+        })
-          return (
+        return (
-            <Button
+          <Button
-              size="small"
+            size="small"
-              style="text"
+            style="text"
-              key={index}
+            key={index}
-              className={selectFilter}
+            className={selectFilter}
-              onClick={async () => {
+            onClick={async () => {
-                handleSelectedFilter(isPriceSelected, e.value)
+              handleSelectedFilter(isServiceSelected, e.value)
-              }}
+            }}
-            >
+          >
-              {e.display}
+            {e.display}
-            </Button>
+          </Button>
-          )
+        )
-        })}
+      })}
-        {serviceFilterItems.map((e, index) => {
+      {clearFilters.map((e, index) => {
-          const isServiceSelected =
+        const showClear =
-            (e.value === serviceType || serviceSelections.includes(e.value)) &&
+          priceSelections.length > 0 || serviceSelections.length > 0
-            clearSelected === false
+        return (
-          const selectFilter = cx({
+          <Button
-            [styles.selected]: isServiceSelected,
+            size="small"
-            [styles.filter]: true
+            style="text"
-          })
+            key={index}
-          return (
+            className={showClear ? styles.showClear : styles.hideClear}
-            <Button
+            onClick={async () => {
-              size="small"
+              applyClearFilter()
-              style="text"
+            }}
-              key={index}
+          >
-              className={selectFilter}
+            {e.display}
-              onClick={async () => {
+          </Button>
-                handleSelectedFilter(isServiceSelected, e.value)
+        )
-              }}
+      })}
-            >
-              {e.display}
-            </Button>
-          )
-        })}
-      </div>
     </div>
   )
 }