Fix/ Put back filters published page (#867)

* put back filters on published page

* fix filter + pagination issue on published asset tab

* renamed isSearch prop and made it optional

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

@@ -2,7 +2,7 @@ import { Logger } from '@oceanprotocol/lib'
 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'
@@ -20,11 +20,9 @@ export default function PublishedList({
   const [isLoading, setIsLoading] = useState(false)
   const [page, setPage] = useState<number>(1)
   const [service, setServiceType] = useState('dataset OR algorithm')
+  const [access, setAccsesType] = useState('access OR compute')
   const newCancelToken = useCancelToken()
 
-  useEffect(() => {
-    if (!accountId) return
-
   async function getPublished() {
     try {
       setIsLoading(true)
@@ -32,8 +30,9 @@ export default function PublishedList({
         accountId,
         chainIds,
         newCancelToken(),
-          page - 1,
-          service
+        page,
+        service,
+        access
       )
       setQueryResult(result)
     } catch (error) {
@@ -42,23 +41,35 @@ export default function PublishedList({
       setIsLoading(false)
     }
   }
-    getPublished()
-  }, [
-    accountId,
-    page,
-    appConfig.metadataCacheUri,
-    chainIds,
-    service,
-    newCancelToken
-  ])
+
+  useEffect(() => {
+    async function fetchPublishedAssets() {
+      await getPublished()
+    }
+    if (page !== 1) {
+      setPage(1)
+    } else {
+      fetchPublishedAssets()
+    }
+  }, [service, access])
+
+  useEffect(() => {
+    if (!accountId) return
+    async function fetchPublishedAssets() {
+      await getPublished()
+    }
+    fetchPublishedAssets()
+  }, [accountId, page, appConfig.metadataCacheUri, chainIds, newCancelToken])
 
   return accountId ? (
     <>
-      {/* <Filters
+      <Filters
         serviceType={service}
         setServiceType={setServiceType}
+        accessType={access}
+        setAccessType={setAccsesType}
         className={styles.filters}
-      /> */}
+      />
       <AssetList
         assets={queryResult?.results}
         isLoading={isLoading}

src/components/templates/Search/Filters.tsx

@@ -27,18 +27,24 @@ export default function FilterPrice({
   serviceType,
   accessType,
   setServiceType,
-  setAccessType
+  setAccessType,
+  addFiltersToUrl,
+  className
 }: {
   serviceType: string
   accessType: string
   setServiceType: React.Dispatch<React.SetStateAction<string>>
   setAccessType: React.Dispatch<React.SetStateAction<string>>
+  addFiltersToUrl?: boolean
+  className?: string
 }): ReactElement {
   const navigate = useNavigate()
   const [serviceSelections, setServiceSelections] = useState<string[]>([])
   const [accessSelections, setAccessSelections] = useState<string[]>([])
 
   async function applyFilter(filter: string, filterType: string) {
+    filterType === 'accessType' ? setAccessType(filter) : setServiceType(filter)
+    if (addFiltersToUrl) {
       let urlLocation = ''
       if (filterType.localeCompare('accessType') === 0) {
         urlLocation = await addExistingParamsToUrl(location, ['accessType'])
@@ -52,9 +58,9 @@ export default function FilterPrice({
           : (urlLocation = `${urlLocation}&serviceType=${filter}`)
       }
 
-    filterType === 'accessType' ? setAccessType(filter) : setServiceType(filter)
       navigate(urlLocation)
     }
+  }
 
   async function handleSelectedFilter(isSelected: boolean, value: string) {
     if (
@@ -109,24 +115,28 @@ export default function FilterPrice({
     }
   }
 
-  async function applyClearFilter() {
+  async function applyClearFilter(addFiltersToUrl: boolean) {
+    setServiceSelections([])
+    setAccessSelections([])
+    setServiceType(undefined)
+    setAccessType(undefined)
+    if (addFiltersToUrl) {
       let urlLocation = await addExistingParamsToUrl(location, [
         'accessType',
         'serviceType'
       ])
-
       urlLocation = `${urlLocation}`
-
-    setServiceSelections([])
-    setAccessSelections([])
-
-    setServiceType(undefined)
-    setAccessType(undefined)
       navigate(urlLocation)
     }
+  }
+
+  const styleClasses = cx({
+    filterList: true,
+    [className]: className
+  })
 
   return (
-    <div className={styles.filterList}>
+    <div className={styleClasses}>
       {serviceFilterItems.map((e, index) => {
         const isServiceSelected =
           e.value === serviceType || serviceSelections.includes(e.value)
@@ -180,7 +190,7 @@ export default function FilterPrice({
             key={index}
             className={showClear ? styles.showClear : styles.hideClear}
             onClick={async () => {
-              applyClearFilter()
+              applyClearFilter(addFiltersToUrl)
             }}
           >
             {e.display}

src/components/templates/Search/index.tsx

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

src/utils/aquarius.ts

@@ -230,18 +230,20 @@ export async function getPublishedAssets(
   chainIds: number[],
   cancelToken: CancelToken,
   page?: number,
-  type?: string
+  type?: string,
+  accesType?: string
 ): Promise<any> {
   if (!accountId) return
 
   type = type || 'dataset OR algorithm'
+  accesType = accesType || 'access OR compute'
 
   const queryPublishedAssets = {
     from: (Number(page) || 0) * (Number(9) || 21),
     size: Number(9) || 21,
     query: {
       query_string: {
-        query: `(publicKey.owner:${accountId}) AND (service.attributes.main.type:${type}) AND (${transformChainIdsListToQuery(
+        query: `(publicKey.owner:${accountId}) AND (service.attributes.main.type:${type}) AND (service.type:${accesType}) AND (${transformChainIdsListToQuery(
           chainIds
         )})`
       }