simplify PublishedList

src/components/organisms/PublishedList.tsx

@@ -1,87 +1,24 @@
 import React, { useEffect, useState, ReactElement } from 'react'
 import Loader from '../atoms/Loader'
-import { MetadataMain } from '@oceanprotocol/lib'
-import {
-  useOcean,
-  OceanConnectionStatus,
-  useSearch
-} from '@oceanprotocol/react'
-import Table from '../atoms/Table'
-import Price from '../atoms/Price'
-import { fromWei } from 'web3-utils'
-import DateCell from '../atoms/Table/DateCell'
-import DdoLinkCell from '../atoms/Table/DdoLinkCell'
-
-const publishedColumns = [
-  {
-    name: 'Published',
-    selector: 'published',
-    sortable: true,
-    cell: function getCell(row: any) {
-      return <DateCell date={row.published} />
-    }
-  },
-  {
-    name: 'Name',
-    selector: 'name',
-    sortable: true,
-    cell: function getCell(row: any) {
-      return <DdoLinkCell id={row.id} name={row.name} />
-    }
-  },
-  {
-    name: 'Price',
-    selector: 'price',
-    sortable: true,
-    cell: function getCell(row: any) {
-      return <Price price={fromWei(row.price)} small />
-    }
-  }
-]
+import { useOcean } from '@oceanprotocol/react'
+import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatastore/MetadataStore'
+import AssetList from './AssetList'
 
 export default function PublishedList(): ReactElement {
   const { ocean, status, account, accountId } = useOcean()
-  const { getPublishedList } = useSearch()
-  const [publishedList, setPublishedList] = useState<any[]>([])
+  const [queryResult, setQueryResult] = useState<QueryResult>()
   const [isLoading, setIsLoading] = useState(false)
-  const [paginationParams, setPaginationParams] = useState({
-    count: 1,
-    rowsPerPage: 10,
-    page: 1
-  })
 
   useEffect(() => {
     async function getPublished() {
-      if (
-        !account ||
-        !accountId ||
-        !ocean ||
-        status !== OceanConnectionStatus.CONNECTED
-      )
-        return
+      if (!account || !accountId || !ocean) return
 
       setIsLoading(true)
-      const publishedItems = await getPublishedList(
-        paginationParams.page,
-        paginationParams.rowsPerPage
-      )
-      setPaginationParams({
-        ...paginationParams,
-        count: publishedItems.totalPages
-      })
 
-      const data = publishedItems.results.map((ddo) => {
-        const { attributes } = ddo.findServiceByType('metadata')
-        const { name, price, datePublished } = attributes.main as MetadataMain
-        return {
-          published: datePublished,
-          name: name,
-          price: price,
-          id: ddo.id
-        }
-      })
+      // const queryResult = await
+
+      setQueryResult(queryResult)
 
-      setPublishedList(data)
       setIsLoading(false)
     }
     getPublished()
@@ -89,8 +26,8 @@ export default function PublishedList(): ReactElement {
 
   return isLoading ? (
     <Loader />
-  ) : account && ocean ? (
-    <Table data={publishedList} columns={publishedColumns} />
+  ) : queryResult ? (
+    <AssetList queryResult={queryResult} />
   ) : (
     <div>Connect your wallet to see your published data sets.</div>
   )

src/components/pages/History.tsx

@@ -8,7 +8,7 @@ import JobsList from '../organisms/JobsList'
 const sections = [
   {
     title: 'Published',
-    component: 'Coming Soon...'
+    component: <PublishedList />
   },
   {
     title: 'Downloaded',