roll back search filter refactor for published list

src/components/pages/Profile/History/PublishedList.tsx

@@ -3,7 +3,7 @@ import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/Metadata
 import React, { ReactElement, useEffect, useState } from 'react'
 import AssetList from '../../../organisms/AssetList'
 import { getPublishedAssets } from '../../../../utils/aquarius'
-import Filters from '../../../templates/Search/Filters'
+// import Filters from '../../../templates/Search/Filters'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
 import styles from './PublishedList.module.css'
@@ -53,12 +53,11 @@ export default function PublishedList({
 
   return accountId ? (
     <>
-      <Filters
+      {/* <Filters
         serviceType={service}
         setServiceType={setServiceType}
-        isSearch={false}
         className={styles.filters}
-      />
+      /> */}
       <AssetList
         assets={queryResult?.results}
         isLoading={isLoading}

src/components/templates/Search/Filters.tsx

@@ -23,20 +23,16 @@ const accessFilterItems = [
   { display: 'compute ', value: FilterByAccessOptions.Compute }
 ]
 
-export default function Filters({
+export default function FilterPrice({
   serviceType,
   accessType,
   setServiceType,
-  setAccessType,
+  setAccessType
-  isSearch,
-  className
 }: {
   serviceType: string
   accessType: string
   setServiceType: React.Dispatch<React.SetStateAction<string>>
-  isSearch: boolean
   setAccessType: React.Dispatch<React.SetStateAction<string>>
-  className?: string
 }): ReactElement {
   const navigate = useNavigate()
   const [serviceSelections, setServiceSelections] = useState<string[]>([])
@@ -50,165 +46,147 @@ export default function Filters({
       urlLocation = await addExistingParamsToUrl(location, ['serviceType'])
     }
 
-    async function applyServiceFilter(filterBy: string) {
+    if (filter && location.search.indexOf(filterType) === -1) {
-      setServiceType(filterBy)
+      filterType === 'accessType'
-      if (filter && location.search.indexOf(filterType) === -1) {
+        ? (urlLocation = `${urlLocation}&accessType=${filter}`)
-        filterType === 'accessType'
+        : (urlLocation = `${urlLocation}&serviceType=${filter}`)
-          ? (urlLocation = `${urlLocation}&accessType=${filter}`)
-          : (urlLocation = `${urlLocation}&serviceType=${filter}`)
-      }
-
-      if (isSearch) {
-        let urlLocation = await addExistingParamsToUrl(location, [
-          'serviceType'
-        ])
-        if (filterBy && location.search.indexOf('&serviceType') === -1) {
-          urlLocation = `${urlLocation}&serviceType=${filterBy}`
-        }
-        filterType === 'accessType'
-          ? setAccessType(filter)
-          : setServiceType(filter)
-        navigate(urlLocation)
-      }
     }
 
-    async function handleSelectedFilter(isSelected: boolean, value: string) {
+    filterType === 'accessType' ? setAccessType(filter) : setServiceType(filter)
-      if (
+    navigate(urlLocation)
-        value === FilterByAccessOptions.Download ||
+  }
-        value === FilterByAccessOptions.Compute
+
-      ) {
+  async function handleSelectedFilter(isSelected: boolean, value: string) {
-        if (isSelected) {
+    if (
-          if (accessSelections.length > 1) {
+      value === FilterByAccessOptions.Download ||
-            // both selected -> select the other one
+      value === FilterByAccessOptions.Compute
-            const otherValue = accessFilterItems.find(
+    ) {
-              (p) => p.value !== value
+      if (isSelected) {
-            ).value
+        if (accessSelections.length > 1) {
-            await applyFilter(otherValue, 'accessType')
+          // both selected -> select the other one
-            setAccessSelections([otherValue])
+          const otherValue = accessFilterItems.find(
-          } else {
+            (p) => p.value !== value
-            // only the current one selected -> deselect it
+          ).value
-            await applyFilter(undefined, 'accessType')
+          await applyFilter(otherValue, 'accessType')
-            setAccessSelections([])
+          setAccessSelections([otherValue])
-          }
         } else {
-          if (accessSelections.length) {
+          // only the current one selected -> deselect it
-            // one already selected -> both selected
+          await applyFilter(undefined, 'accessType')
-            await applyFilter(undefined, 'accessType')
+          setAccessSelections([])
-            setAccessSelections(accessFilterItems.map((p) => p.value))
-          } else {
-            // none selected -> select
-            await applyFilter(value, 'accessType')
-            setAccessSelections([value])
-          }
         }
       } else {
-        if (isSelected) {
+        if (accessSelections.length) {
-          if (serviceSelections.length > 1) {
+          // one already selected -> both selected
-            const otherValue = serviceFilterItems.find(
+          await applyFilter(undefined, 'accessType')
-              (p) => p.value !== value
+          setAccessSelections(accessFilterItems.map((p) => p.value))
-            ).value
-            await applyFilter(otherValue, 'serviceType')
-            setServiceSelections([otherValue])
-          } else {
-            await applyFilter(undefined, 'serviceType')
-            setServiceSelections([])
-          }
         } else {
-          if (serviceSelections.length) {
+          // none selected -> select
-            await applyFilter(undefined, 'serviceType')
+          await applyFilter(value, 'accessType')
-            setServiceSelections(serviceFilterItems.map((p) => p.value))
+          setAccessSelections([value])
-          } else {
+        }
-            await applyFilter(value, 'serviceType')
+      }
-            setServiceSelections([value])
+    } else {
-          }
+      if (isSelected) {
+        if (serviceSelections.length > 1) {
+          const otherValue = serviceFilterItems.find(
+            (p) => p.value !== value
+          ).value
+          await applyFilter(otherValue, 'serviceType')
+          setServiceSelections([otherValue])
+        } else {
+          await applyFilter(undefined, 'serviceType')
+          setServiceSelections([])
+        }
+      } else {
+        if (serviceSelections.length) {
+          await applyFilter(undefined, 'serviceType')
+          setServiceSelections(serviceFilterItems.map((p) => p.value))
+        } else {
+          await applyFilter(value, 'serviceType')
+          setServiceSelections([value])
         }
       }
     }
-
-    async function applyClearFilter(isSearch: boolean) {
-      setServiceSelections([])
-      setAccessSelections([])
-
-      setServiceType(undefined)
-      setAccessType(undefined)
-      if (isSearch) {
-        let urlLocation = await addExistingParamsToUrl(location, [
-          'serviceType'
-        ])
-        urlLocation = `${urlLocation}`
-        navigate(urlLocation)
-      }
-    }
-
-    const styleClasses = cx({
-      filterList: true,
-      [className]: className
-    })
-
-    return (
-      <div className={styleClasses}>
-        {serviceFilterItems.map((e, index) => {
-          const isServiceSelected =
-            e.value === serviceType || serviceSelections.includes(e.value)
-
-          const selectFilter = cx({
-            [styles.selected]: isServiceSelected,
-            [styles.filter]: true
-          })
-          return (
-            <Button
-              size="small"
-              style="text"
-              key={index}
-              className={selectFilter}
-              onClick={async () => {
-                handleSelectedFilter(isServiceSelected, e.value)
-              }}
-            >
-              {e.display}
-            </Button>
-          )
-        })}
-        <div className={styles.separator} />
-        {accessFilterItems.map((e, index) => {
-          const isAccessSelected =
-            e.value === accessType || accessSelections.includes(e.value)
-          const selectFilter = cx({
-            [styles.selected]: isAccessSelected,
-            [styles.filter]: true
-          })
-          return (
-            <Button
-              size="small"
-              style="text"
-              key={index}
-              className={selectFilter}
-              onClick={async () => {
-                handleSelectedFilter(isAccessSelected, e.value)
-              }}
-            >
-              {e.display}
-            </Button>
-          )
-        })}
-        {clearFilters.map((e, index) => {
-          const showClear =
-            accessSelections.length > 0 || serviceSelections.length > 0
-          return (
-            <Button
-              size="small"
-              style="text"
-              key={index}
-              className={showClear ? styles.showClear : styles.hideClear}
-              onClick={async () => {
-                applyClearFilter(isSearch)
-              }}
-            >
-              {e.display}
-            </Button>
-          )
-        })}
-      </div>
-    )
   }
+
+  async function applyClearFilter() {
+    let urlLocation = await addExistingParamsToUrl(location, [
+      'accessType',
+      'serviceType'
+    ])
+
+    urlLocation = `${urlLocation}`
+
+    setServiceSelections([])
+    setAccessSelections([])
+
+    setServiceType(undefined)
+    setAccessType(undefined)
+    navigate(urlLocation)
+  }
+
+  return (
+    <div className={styles.filterList}>
+      {serviceFilterItems.map((e, index) => {
+        const isServiceSelected =
+          e.value === serviceType || serviceSelections.includes(e.value)
+        const selectFilter = cx({
+          [styles.selected]: isServiceSelected,
+          [styles.filter]: true
+        })
+        return (
+          <Button
+            size="small"
+            style="text"
+            key={index}
+            className={selectFilter}
+            onClick={async () => {
+              handleSelectedFilter(isServiceSelected, e.value)
+            }}
+          >
+            {e.display}
+          </Button>
+        )
+      })}
+      <div className={styles.separator} />
+      {accessFilterItems.map((e, index) => {
+        const isAccessSelected =
+          e.value === accessType || accessSelections.includes(e.value)
+        const selectFilter = cx({
+          [styles.selected]: isAccessSelected,
+          [styles.filter]: true
+        })
+        return (
+          <Button
+            size="small"
+            style="text"
+            key={index}
+            className={selectFilter}
+            onClick={async () => {
+              handleSelectedFilter(isAccessSelected, e.value)
+            }}
+          >
+            {e.display}
+          </Button>
+        )
+      })}
+      {clearFilters.map((e, index) => {
+        const showClear =
+          accessSelections.length > 0 || serviceSelections.length > 0
+        return (
+          <Button
+            size="small"
+            style="text"
+            key={index}
+            className={showClear ? styles.showClear : styles.hideClear}
+            onClick={async () => {
+              applyClearFilter()
+            }}
+          >
+            {e.display}
+          </Button>
+        )
+      })}
+    </div>
+  )
 }

src/components/templates/Search/index.tsx

@@ -80,7 +80,6 @@ export default function SearchPage({
               accessType={access}
               setServiceType={setServiceType}
               setAccessType={setAccessType}
-              isSearch
             />
             <Sort
               sortType={sortType}