clear filters button added

src/components/templates/Search/filterPrice.tsx

@@ -11,6 +11,8 @@ import Button from '../../atoms/Button'
 
 const cx = classNames.bind(styles)
 
+const clearFilters = [{ display: 'clear', value: '' }]
+
 const priceFilterItems = [
   { display: 'fixed price', value: FilterByPriceOptions.Fixed },
   { display: 'dynamic price', value: FilterByPriceOptions.Dynamic }
@@ -36,6 +38,7 @@ export default function FilterPrice({
 
   const [priceSelections, setPriceSelections] = useState<string[]>([])
   const [serviceSelections, setServiceSelections] = useState<string[]>([])
+  const [clearSelected, setClearSeleted] = useState<boolean>(false)
 
   async function applyPriceFilter(filterBy: string) {
     let urlLocation = await addExistingParamsToUrl(location, 'priceType')
@@ -61,6 +64,9 @@ export default function FilterPrice({
       value === FilterByPriceOptions.Dynamic
     ) {
       if (isSelected) {
+        if (clearSelected) {
+          setPriceSelections([])
+        } else {
           if (priceSelections.length > 1) {
             // both selected -> select the other one
             const otherValue = priceFilterItems.find((p) => p.value !== value)
@@ -72,19 +78,25 @@ export default function FilterPrice({
             await applyPriceFilter(undefined)
             setPriceSelections([])
           }
+        }
       } else {
-        if (priceSelections.length) {
+        if (priceSelections.length > 0) {
           // one already selected -> both selected
           await applyPriceFilter(FilterByPriceOptions.All)
           setPriceSelections(priceFilterItems.map((p) => p.value))
+          setClearSeleted(false)
         } else {
           // none selected -> select
           await applyPriceFilter(value)
           setPriceSelections([value])
+          setClearSeleted(false)
         }
       }
     } else {
       if (isSelected) {
+        if (clearSelected) {
+          setServiceSelections([])
+        } else {
           if (serviceSelections.length > 1) {
             const otherValue = serviceFilterItems.find((p) => p.value !== value)
               .value
@@ -94,25 +106,45 @@ export default function FilterPrice({
             await applyServiceFilter(undefined)
             setServiceSelections([])
           }
+        }
       } else {
         if (serviceSelections.length) {
           await applyServiceFilter(undefined)
           setServiceSelections(serviceFilterItems.map((p) => p.value))
+          setClearSeleted(false)
         } else {
           await applyServiceFilter(value)
           setServiceSelections([value])
+          setClearSeleted(false)
         }
       }
     }
   }
 
+  async function applyClearFilter() {
+    let urlLocation = await addExistingParamsToUrl(
+      location,
+      'priceType',
+      'serviceType'
+    )
+
+    urlLocation = `${urlLocation}`
+
+    setServiceSelections([])
+    setPriceSelections([])
+
+    setClearSeleted(true)
+    setPriceType(undefined)
+    setServiceType(undefined)
+    navigate(urlLocation)
+  }
+
   return (
+    <div>
       <div className={styles.filterList}>
-      {priceFilterItems.map((e, index) => {
+        {clearFilters.map((e, index) => {
-        const isSelected =
-          e.value === priceType || priceSelections.includes(e.value)
           const selectFilter = cx({
-          [styles.selected]: isSelected,
+            [styles.selected]: clearSelected,
             [styles.filter]: true
           })
           return (
@@ -122,7 +154,29 @@ export default function FilterPrice({
               key={index}
               className={selectFilter}
               onClick={async () => {
-              handleSelectedFilter(isSelected, e.value)
+                applyClearFilter()
+              }}
+            >
+              {e.display}
+            </Button>
+          )
+        })}
+        {priceFilterItems.map((e, index) => {
+          const isPriceSelected =
+            (e.value === priceType || priceSelections.includes(e.value)) &&
+            clearSelected === false
+          const selectFilter = cx({
+            [styles.selected]: isPriceSelected,
+            [styles.filter]: true
+          })
+          return (
+            <Button
+              size="small"
+              style="text"
+              key={index}
+              className={selectFilter}
+              onClick={async () => {
+                handleSelectedFilter(isPriceSelected, e.value)
               }}
             >
               {e.display}
@@ -130,10 +184,11 @@ export default function FilterPrice({
           )
         })}
         {serviceFilterItems.map((e, index) => {
-        const isSelected =
+          const isServiceSelected =
-          e.value === serviceType || serviceSelections.includes(e.value)
+            (e.value === serviceType || serviceSelections.includes(e.value)) &&
+            clearSelected === false
           const selectFilter = cx({
-          [styles.selected]: isSelected,
+            [styles.selected]: isServiceSelected,
             [styles.filter]: true
           })
           return (
@@ -143,7 +198,7 @@ export default function FilterPrice({
               key={index}
               className={selectFilter}
               onClick={async () => {
-              handleSelectedFilter(isSelected, e.value)
+                handleSelectedFilter(isServiceSelected, e.value)
               }}
             >
               {e.display}
@@ -151,5 +206,6 @@ export default function FilterPrice({
           )
         })}
       </div>
+    </div>
   )
 }

src/components/templates/Search/utils.ts

@@ -39,7 +39,7 @@ export const FilterByTypeOptions = {
 } as const
 type FilterByTypeOptions = typeof FilterByTypeOptions[keyof typeof FilterByTypeOptions]
 
-function addPriceFilterToQuerry(sortTerm: string, priceFilter: string): string {
+function addPriceFilterToQuery(sortTerm: string, priceFilter: string): string {
   if (priceFilter === FilterByPriceOptions.All) {
     sortTerm = priceFilter
       ? sortTerm === ''
@@ -53,7 +53,6 @@ function addPriceFilterToQuerry(sortTerm: string, priceFilter: string): string {
         : `${sortTerm} AND price.type:${priceFilter}`
       : sortTerm
   }
-  console.log('SORT TERM: ', sortTerm)
   return sortTerm
 }
 
@@ -99,9 +98,9 @@ export function getSearchQuery(
     ? // eslint-disable-next-line no-useless-escape
       `(service.attributes.additionalInformation.categories:\"${categories}\")`
     : text || ''
-  searchTerm = addPriceFilterToQuerry(searchTerm, priceType)
   searchTerm = addTypeFilterToQuery(searchTerm, serviceType)
-  console.log('search', searchTerm, serviceType)
+  searchTerm = addPriceFilterToQuery(searchTerm, priceType)
+
   return {
     page: Number(page) || 1,
     offset: Number(offset) || 21,