Merge pull request #805 from oceanprotocol/issue710-account-published-page

Account history published page

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

@@ -1,13 +1,13 @@
 import { Logger } from '@oceanprotocol/lib'
 import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache'
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { ReactElement, useEffect, useState, useReducer } from 'react'
 import AssetList from '../../../organisms/AssetList'
 import axios from 'axios'
 import {
   queryMetadata,
   transformChainIdsListToQuery
 } from '../../../../utils/aquarius'
-import { useWeb3 } from '../../../../providers/Web3'
+import ServiceFilter from '../../../templates/Search/filterService'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
 
@@ -22,16 +22,19 @@ export default function PublishedList({
   const [queryResult, setQueryResult] = useState<QueryResult>()
   const [isLoading, setIsLoading] = useState(false)
   const [page, setPage] = useState<number>(1)
+  const [service, setServiceType] = useState<string>()
 
   useEffect(() => {
     async function getPublished() {
+      const serviceFiter =
+        service === undefined ? 'dataset OR algorithm' : `${service}`
       if (!accountId) return
       const queryPublishedAssets = {
         page: page,
         offset: 9,
         query: {
           query_string: {
-            query: `(publicKey.owner:${accountId}) AND (${transformChainIdsListToQuery(
+            query: `(publicKey.owner:${accountId}) AND (service.attributes.main.type:${serviceFiter}) AND (${transformChainIdsListToQuery(
               chainIds
             )})`
           }
@@ -41,7 +44,7 @@ export default function PublishedList({
       try {
         const source = axios.CancelToken.source()
 
-        queryResult || setIsLoading(true)
+        setIsLoading(true)
         const result = await queryMetadata(queryPublishedAssets, source.token)
         setQueryResult(result)
       } catch (error) {
@@ -51,19 +54,26 @@ export default function PublishedList({
       }
     }
     getPublished()
-  }, [accountId, page, appConfig.metadataCacheUri, chainIds])
+  }, [accountId, page, appConfig.metadataCacheUri, chainIds, service])
 
   return accountId ? (
-    <AssetList
-      assets={queryResult?.results}
-      isLoading={isLoading}
-      showPagination
-      page={queryResult?.page}
-      totalPages={queryResult?.totalPages}
-      onPageChange={(newPage) => {
-        setPage(newPage)
-      }}
-    />
+    <div>
+      <ServiceFilter
+        serviceType={service}
+        setServiceType={setServiceType}
+        isSearch={false}
+      />
+      <AssetList
+        assets={queryResult?.results}
+        isLoading={isLoading}
+        showPagination
+        page={queryResult?.page}
+        totalPages={queryResult?.totalPages}
+        onPageChange={(newPage) => {
+          setPage(newPage)
+        }}
+      />
+    </div>
   ) : (
     <div>Please connect your Web3 wallet.</div>
   )

src/components/templates/Search/filterService.tsx

@@ -16,21 +16,25 @@ const serviceFilterItems = [
 
 export default function FilterPrice({
   serviceType,
-  setServiceType
+  setServiceType,
+  isSearch
 }: {
   serviceType: string
   setServiceType: React.Dispatch<React.SetStateAction<string>>
+  isSearch: boolean
 }): ReactElement {
   const navigate = useNavigate()
   const [serviceSelections, setServiceSelections] = useState<string[]>([])
 
   async function applyServiceFilter(filterBy: string) {
-    let urlLocation = await addExistingParamsToUrl(location, ['serviceType'])
-    if (filterBy && location.search.indexOf('&serviceType') === -1) {
-      urlLocation = `${urlLocation}&serviceType=${filterBy}`
-    }
     setServiceType(filterBy)
-    navigate(urlLocation)
+    if (isSearch) {
+      let urlLocation = await addExistingParamsToUrl(location, ['serviceType'])
+      if (filterBy && location.search.indexOf('&serviceType') === -1) {
+        urlLocation = `${urlLocation}&serviceType=${filterBy}`
+      }
+      navigate(urlLocation)
+    }
   }
 
   async function handleSelectedFilter(isSelected: boolean, value: string) {
@@ -58,14 +62,14 @@ export default function FilterPrice({
     }
   }
 
-  async function applyClearFilter() {
-    let urlLocation = await addExistingParamsToUrl(location, ['serviceType'])
-
-    urlLocation = `${urlLocation}`
-
+  async function applyClearFilter(isSearch: boolean) {
     setServiceSelections([])
     setServiceType(undefined)
-    navigate(urlLocation)
+    if (isSearch) {
+      let urlLocation = await addExistingParamsToUrl(location, ['serviceType'])
+      urlLocation = `${urlLocation}`
+      navigate(urlLocation)
+    }
   }
 
   return (
@@ -100,7 +104,7 @@ export default function FilterPrice({
             key={index}
             className={showClear ? styles.showClear : styles.hideClear}
             onClick={async () => {
-              applyClearFilter()
+              applyClearFilter(isSearch)
             }}
           >
             {e.display}

src/components/templates/Search/index.tsx

@@ -75,6 +75,7 @@ export default function SearchPage({
             <ServiceFilter
               serviceType={service}
               setServiceType={setServiceType}
+              isSearch
             />
             <Sort
               sortType={sortType}