refactor, unify published & consumed list

src/components/organisms/ConsumedList.tsx

@@ -1,81 +1,34 @@
 import React, { useEffect, useState, ReactElement } from 'react'
 import Loader from '../atoms/Loader'
-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'
-import { MetadataMain } from '@oceanprotocol/lib'
-
-const consumedColumns = [
-  {
-    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 ConsumedList(): ReactElement {
-  const { ocean, status, accountId, account } = useOcean()
-  const [consumedList, setConsumedList] = useState<any>([])
-  const { getConsumedList } = useSearch()
+  const { ocean, status, accountId } = useOcean()
+  const [queryResult, setQueryResult] = useState<QueryResult>()
   const [isLoading, setIsLoading] = useState(false)
 
   useEffect(() => {
     async function getConsumed() {
-      if (!accountId || !ocean || status !== OceanConnectionStatus.CONNECTED)
-        return
+      if (!accountId || !ocean) return
+
       setIsLoading(true)
 
-      const consumedItems = await getConsumedList()
+      // const queryResult = await
 
-      if (!consumedItems) return
+      setQueryResult(queryResult)
 
-      const data = consumedItems.map((ddo) => {
-        const { attributes } = ddo.findServiceByType('metadata')
-        const { name, price, datePublished } = attributes.main as MetadataMain
-        return {
-          published: datePublished,
-          name: name,
-          price: price
-        }
-      })
-
-      setConsumedList(data)
       setIsLoading(false)
     }
     getConsumed()
-  }, [accountId, ocean, status])
+  }, [ocean, status, accountId])
 
   return isLoading ? (
     <Loader />
-  ) : account && ocean ? (
-    <Table data={consumedList} columns={consumedColumns} />
+  ) : accountId && ocean ? (
+    <AssetList queryResult={queryResult} />
   ) : (
-    <div>Connect your wallet to see your consumed data sets.</div>
+    <div>Connect your wallet to see your published data sets.</div>
   )
 }

src/components/organisms/PublishedList.tsx

@@ -5,13 +5,13 @@ import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatastore/Metadata
 import AssetList from './AssetList'
 
 export default function PublishedList(): ReactElement {
-  const { ocean, status, account, accountId } = useOcean()
+  const { ocean, status, accountId } = useOcean()
   const [queryResult, setQueryResult] = useState<QueryResult>()
   const [isLoading, setIsLoading] = useState(false)
 
   useEffect(() => {
     async function getPublished() {
-      if (!account || !accountId || !ocean) return
+      if (!accountId || !ocean) return
 
       setIsLoading(true)
 
@@ -22,11 +22,11 @@ export default function PublishedList(): ReactElement {
       setIsLoading(false)
     }
     getPublished()
-  }, [accountId, ocean, status])
+  }, [ocean, status, accountId])
 
   return isLoading ? (
     <Loader />
-  ) : queryResult ? (
+  ) : accountId && ocean ? (
     <AssetList queryResult={queryResult} />
   ) : (
     <div>Connect your wallet to see your published data sets.</div>

src/components/pages/History.module.css

@@ -17,6 +17,19 @@
 }
 
 .content {
-  composes: box from '../atoms/Box.module.css';
   margin-top: var(--spacer);
 }
+
+.section {
+  composes: box from '../atoms/Box.module.css';
+  margin-bottom: var(--spacer);
+}
+
+.section:last-child {
+  margin-bottom: 0;
+}
+
+.sectionTitle {
+  font-size: var(--font-size-h3);
+  margin-bottom: calc(var(--spacer) / 2);
+}

src/components/pages/History.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 import styles from './History.module.css'
-import Web3Feedback from '../molecules/Wallet/Feedback'
 import ConsumedList from '../organisms/ConsumedList'
 import PublishedList from '../organisms/PublishedList'
 import JobsList from '../organisms/JobsList'
@@ -12,7 +11,7 @@ const sections = [
   },
   {
     title: 'Downloaded',
-    component: 'Coming Soon...'
+    component: <ConsumedList />
   },
   {
     title: 'Compute Jobs',
@@ -20,7 +19,13 @@ const sections = [
   }
 ]
 
-const Section = ({ title, component }: { title: string; component: any }) => {
+const Section = ({
+  title,
+  component
+}: {
+  title: string
+  component: ReactNode
+}) => {
   return (
     <div className={styles.section}>
       <h2 className={styles.sectionTitle}>{title}</h2>
@@ -29,23 +34,13 @@ const Section = ({ title, component }: { title: string; component: any }) => {
   )
 }
 
-const HistoryPage: React.FC = () => {
+export default function HistoryPage(): ReactElement {
   return (
-    <article className={styles.grid}>
-      <div className={styles.content}>
+    <article className={styles.content}>
       {sections.map((section) => {
         const { title, component } = section
         return <Section key={title} title={title} component={component} />
       })}
-      </div>
-
-      <aside>
-        <div className={styles.sticky}>
-          <Web3Feedback />
-        </div>
-      </aside>
     </article>
   )
 }
-
-export default HistoryPage