From 2eb560b00061ed1417604178b487aa7ac69f6cef Mon Sep 17 00:00:00 2001
From: "claudia.holhos" <claudia.holhos@hpm.ro>
Date: Tue, 23 Feb 2021 16:52:59 +0200
Subject: [PATCH 1/2] select and deselect filter  button

---
 .../templates/Search/filterPrice.tsx          | 68 ++++++-------------
 1 file changed, 19 insertions(+), 49 deletions(-)

diff --git a/src/components/templates/Search/filterPrice.tsx b/src/components/templates/Search/filterPrice.tsx
index 620138eba..d8ceb6636 100644
--- a/src/components/templates/Search/filterPrice.tsx
+++ b/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 }
-]
-
-const filterItemsType = [
-  { display: 'all', value: undefined },
-  { display: 'algorithms', value: FilterByTypeOptions.Algorithm },
-  { display: 'data sets', value: FilterByTypeOptions.Data }
+  { display: 'dynamic price', value: FilterByPriceOptions.Dynamic },
+  { display: 'data sets', value: FilterByTypeOptions.Data },
+  { display: 'algorithms', value: FilterByTypeOptions.Algorithm }
 ]
 
 export default function FilterPrice({
   priceType,
-  setPriceType,
-  serviceType,
-  setServiceType
+  setPriceType
 }: {
   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) => {
-          const filter = 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({
+        {filterItems.map((e, index) => {
+          const selectFilter = cx({
             [styles.selected]: e.value === priceType,
             [styles.filter]: true
           })
+          const isSelected = e.value === priceType
           return (
             <Button
               size="small"
               style="text"
               key={index}
-              className={filter}
-              onClick={async () => {
-                await applyFilter(e.value)
-              }}
+              className={selectFilter}
+              onClick={
+                isSelected
+                  ? async () => {
+                      await applyFilter(undefined)
+                    }
+                  : async () => {
+                      await applyFilter(e.value)
+                    }
+              }
             >
               {e.display}
             </Button>

From ed5796aa42798fc6d9ca6457d1fd622cbf743ed0 Mon Sep 17 00:00:00 2001
From: "claudia.holhos" <claudia.holhos@hpm.ro>
Date: Tue, 23 Feb 2021 21:24:44 +0200
Subject: [PATCH 2/2] price and service filters combined

---
 .../templates/Search/filterPrice.tsx          | 57 ++++++++++++++++---
 src/components/templates/Search/index.tsx     |  7 ++-
 src/components/templates/Search/sort.tsx      |  4 +-
 3 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/src/components/templates/Search/filterPrice.tsx b/src/components/templates/Search/filterPrice.tsx
index d8ceb6636..65d66845c 100644
--- a/src/components/templates/Search/filterPrice.tsx
+++ b/src/components/templates/Search/filterPrice.tsx
@@ -11,37 +11,52 @@ import Button from '../../atoms/Button'
 
 const cx = classNames.bind(styles)
 
-const filterItems = [
+const priceFilterItems = [
   { display: 'all', value: undefined },
   { display: 'fixed price', value: FilterByPriceOptions.Fixed },
-  { display: 'dynamic price', value: FilterByPriceOptions.Dynamic },
+  { display: 'dynamic price', value: FilterByPriceOptions.Dynamic }
+]
+
+const serviceFilterItems = [
   { display: 'data sets', value: FilterByTypeOptions.Data },
   { display: 'algorithms', value: FilterByTypeOptions.Algorithm }
 ]
 
 export default function FilterPrice({
   priceType,
-  setPriceType
+  serviceType,
+  setPriceType,
+  setServiceType
 }: {
   priceType: string
   setPriceType: React.Dispatch<React.SetStateAction<string>>
+  serviceType: string
+  setServiceType: React.Dispatch<React.SetStateAction<string>>
 }): ReactElement {
   const navigate = useNavigate()
 
-  async function applyFilter(filterBy: string) {
+  async function applyPriceFilter(filterBy: string) {
     let urlLocation = await addExistingParamsToUrl(location, 'priceType')
     if (filterBy) {
       urlLocation = `${urlLocation}&priceType=${filterBy}`
     }
-    console.log('FILTER BY: ', filterBy)
     setPriceType(filterBy)
     navigate(urlLocation)
   }
 
+  async function applyServiceFilter(filterBy: string) {
+    let urlLocation = await addExistingParamsToUrl(location, 'serviceType')
+    if (filterBy) {
+      urlLocation = `${urlLocation}&serviceType=${filterBy}`
+    }
+    setServiceType(filterBy)
+    navigate(urlLocation)
+  }
+
   return (
     <div>
       <div className={styles.filterList}>
-        {filterItems.map((e, index) => {
+        {priceFilterItems.map((e, index) => {
           const selectFilter = cx({
             [styles.selected]: e.value === priceType,
             [styles.filter]: true
@@ -56,10 +71,36 @@ export default function FilterPrice({
               onClick={
                 isSelected
                   ? async () => {
-                      await applyFilter(undefined)
+                      await applyPriceFilter(undefined)
                     }
                   : async () => {
-                      await applyFilter(e.value)
+                      await applyPriceFilter(e.value)
+                    }
+              }
+            >
+              {e.display}
+            </Button>
+          )
+        })}
+        {serviceFilterItems.map((e, index) => {
+          const selectFilter = cx({
+            [styles.selected]: e.value === serviceType,
+            [styles.filter]: true
+          })
+          const isSelected = e.value === serviceType
+          return (
+            <Button
+              size="small"
+              style="text"
+              key={index}
+              className={selectFilter}
+              onClick={
+                isSelected
+                  ? async () => {
+                      await applyServiceFilter(undefined)
+                    }
+                  : async () => {
+                      await applyServiceFilter(e.value)
                     }
               }
             >
diff --git a/src/components/templates/Search/index.tsx b/src/components/templates/Search/index.tsx
index dc11ee940..f89af6d24 100644
--- a/src/components/templates/Search/index.tsx
+++ b/src/components/templates/Search/index.tsx
@@ -34,7 +34,7 @@ export default function SearchPage({
   const [queryResult, setQueryResult] = useState<QueryResult>()
   const [loading, setLoading] = useState<boolean>()
   const [price, setPriceType] = useState<string>(priceType as string)
-  const [type, setType] = useState<string>(serviceType as string)
+  const [service, setServiceType] = useState<string>(serviceType as string)
   const [sortType, setSortType] = useState<string>(sort as string)
   const [sortDirection, setSortDirection] = useState<string>(
     sortOrder as string
@@ -82,9 +82,9 @@ export default function SearchPage({
         <div className={styles.row}>
           <PriceFilter
             priceType={price}
+            serviceType={service}
             setPriceType={setPriceType}
-            serviceType={type}
-            setServiceType={setType}
+            setServiceType={setServiceType}
           />
           <Sort
             sortType={sortType}
@@ -92,6 +92,7 @@ export default function SearchPage({
             setSortType={setSortType}
             setSortDirection={setSortDirection}
             setPriceType={setPriceType}
+            setServiceType={setServiceType}
           />
         </div>
       </div>
diff --git a/src/components/templates/Search/sort.tsx b/src/components/templates/Search/sort.tsx
index 331d1876c..ca2699dc1 100644
--- a/src/components/templates/Search/sort.tsx
+++ b/src/components/templates/Search/sort.tsx
@@ -24,13 +24,15 @@ export default function Sort({
   setSortType,
   sortDirection,
   setSortDirection,
-  setPriceType
+  setPriceType,
+  setServiceType
 }: {
   sortType: string
   setSortType: React.Dispatch<React.SetStateAction<string>>
   sortDirection: string
   setSortDirection: React.Dispatch<React.SetStateAction<string>>
   setPriceType: React.Dispatch<React.SetStateAction<string>>
+  setServiceType: React.Dispatch<React.SetStateAction<string>>
 }): ReactElement {
   const navigate = useNavigate()
   const directionArrow = String.fromCharCode(