select and deselect filter button

price and service filters combined


unselect filter on button

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

@@ -35,3 +35,14 @@ button.filter,
 .filterList:first-of-type{
   margin-bottom: calc(var(--spacer) / 6);
 }
+
+.escape {
+  /* position: absolute; */
+  /* border-radius: 50%; */
+  /* background-color: var(--color-secondary); */
+  /* text-align: center; */
+  /* padding: 0rem .1rem; */
+  margin-left: calc(var(--spacer) / 6);
+  color: var(--background-body);
+
+}

src/components/templates/Search/filterPrice.tsx

@@ -11,22 +11,21 @@ import Button from '../../atoms/Button'
 
 const cx = classNames.bind(styles)
 
-const filterItemsPrice = [
+const priceFilterItems = [
   { display: 'all', value: undefined },
   { display: 'fixed price', value: FilterByPriceOptions.Fixed },
   { display: 'dynamic price', value: FilterByPriceOptions.Dynamic }
 ]
 
-const filterItemsType = [
+const serviceFilterItems = [
-  { display: 'all', value: undefined },
+  { display: 'data sets', value: FilterByTypeOptions.Data },
-  { display: 'algorithms', value: FilterByTypeOptions.Algorithm },
+  { display: 'algorithms', value: FilterByTypeOptions.Algorithm }
-  { display: 'data sets', value: FilterByTypeOptions.Data }
 ]
 
 export default function FilterPrice({
   priceType,
-  setPriceType,
   serviceType,
+  setPriceType,
   setServiceType
 }: {
   priceType: string
@@ -36,7 +35,7 @@ export default function FilterPrice({
 }): 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}`
@@ -45,7 +44,7 @@ export default function FilterPrice({
     navigate(urlLocation)
   }
 
-  async function applyTypeFilter(filterBy: string) {
+  async function applyServiceFilter(filterBy: string) {
     let urlLocation = await addExistingParamsToUrl(location, 'serviceType')
     if (filterBy) {
       urlLocation = `${urlLocation}&serviceType=${filterBy}`
@@ -57,43 +56,65 @@ export default function FilterPrice({
   return (
     <div>
       <div className={styles.filterList}>
-        {filterItemsType.map((e, index) => {
+        {priceFilterItems.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={
-                await applyFilter(e.value)
+                isSelected
-              }}
+                  ? async () => {
+                      await applyPriceFilter(undefined)
+                    }
+                  : async () => {
+                      await applyPriceFilter(e.value)
+                    }
+              }
             >
               {e.display}
+              {isSelected && e.display !== 'all' ? (
+                <span className={styles.escape}>✕</span>
+              ) : (
+                <></>
+              )}
+            </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)
+                    }
+              }
+            >
+              {e.display}
+              {isSelected && e.display !== 'all' ? (
+                <span className={styles.escape}>✕</span>
+              ) : (
+                <></>
+              )}
             </Button>
           )
         })}

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={setServiceType}
-            setServiceType={setType}
           />
           <Sort
             sortType={sortType}
@@ -92,6 +92,7 @@ export default function SearchPage({
             setSortType={setSortType}
             setSortDirection={setSortDirection}
             setPriceType={setPriceType}
+            setServiceType={setServiceType}
           />
         </div>
       </div>

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(