table refactor

src/components/atoms/Table.module.css

@@ -1,3 +1,11 @@
+.table div {
+  background-color: transparent !important;
+}
+
+.table [role='columnheader'] {
+  font-weight: var(--font-weight-bold);
+}
+
 .empty {
   width: 100%;
   text-align: left;

src/components/atoms/Table.tsx

@@ -0,0 +1,32 @@
+import React, { ReactElement } from 'react'
+import DataTable, { IDataTableProps } from 'react-data-table-component'
+import Loader from './Loader'
+import styles from './Table.module.css'
+
+interface TableProps extends IDataTableProps {
+  isLoading?: boolean
+}
+
+function Empty(): ReactElement {
+  return <div className={styles.empty}>No results found</div>
+}
+
+export default function Table({
+  data,
+  columns,
+  isLoading
+}: TableProps): ReactElement {
+  return (
+    <DataTable
+      columns={columns}
+      data={data}
+      className={styles.table}
+      noHeader
+      pagination={data?.length >= 9}
+      paginationPerPage={10}
+      noDataComponent={<Empty />}
+      progressPending={isLoading}
+      progressComponent={<Loader />}
+    />
+  )
+}

src/components/pages/History/ComputeDetails.tsx

@@ -8,7 +8,7 @@ import Time from '../../atoms/Time'
 import shortid from 'shortid'
 import styles from './ComputeDetails.module.css'
 import { Status } from './ComputeJobs'
-import { ListItem } from 'components/atoms/Lists'
+import { ListItem } from '../../atoms/Lists'
 
 export default function ComputeDetailsModal({
   computeJob,

src/components/pages/History/ComputeJobs.module.css

@@ -2,7 +2,3 @@
   text-transform: uppercase;
   color: var(--color-secondary);
 }
-
-.table {
-  composes: table from './PoolTransactions.module.css';
-}

src/components/pages/History/ComputeJobs.tsx

@@ -1,16 +1,14 @@
 import { useOcean } from '@oceanprotocol/react'
 import React, { ReactElement, useEffect, useState } from 'react'
-import DataTable from 'react-data-table-component'
 import Time from '../../atoms/Time'
 import styles from './ComputeJobs.module.css'
-import Loader from '../../atoms/Loader'
 import Button from '../../atoms/Button'
 import ComputeDetails from './ComputeDetails'
 import { ComputeJobMetaData } from '../../../@types/ComputeJobMetaData'
 import { Link } from 'gatsby'
 import { Logger } from '@oceanprotocol/lib'
-import Empty from './Empty'
 import Dotdotdot from 'react-dotdotdot'
+import Table from '../../atoms/Table'
 
 function DetailsButton({ row }: { row: ComputeJobMetaData }): ReactElement {
   const [isDialogOpen, setIsDialogOpen] = useState(false)
@@ -75,13 +73,13 @@ export default function ComputeJobs(): ReactElement {
   const [jobs, setJobs] = useState<ComputeJobMetaData[]>()
   const [isLoading, setIsLoading] = useState(false)
 
-  const getTitle = async (did: string) => {
-    const ddo = await ocean.metadatacache.retrieveDDO(did)
-    const metadata = ddo.findServiceByType('metadata')
-    return metadata.attributes.main.name
-  }
-
   useEffect(() => {
+    async function getTitle(did: string) {
+      const ddo = await ocean.metadatacache.retrieveDDO(did)
+      const metadata = ddo.findServiceByType('metadata')
+      return metadata.attributes.main.name
+    }
+
     async function getJobs() {
       if (!ocean || !account) return
       setIsLoading(true)
@@ -132,17 +130,5 @@ export default function ComputeJobs(): ReactElement {
     getJobs()
   }, [ocean, account])
 
-  return isLoading ? (
-    <Loader />
-  ) : (
-    <DataTable
-      columns={columns}
-      data={jobs}
-      className={styles.table}
-      noHeader
-      pagination={jobs?.length >= 9}
-      paginationPerPage={10}
-      noDataComponent={<Empty />}
-    />
-  )
+  return <Table columns={columns} data={jobs} isLoading={isLoading} />
 }

src/components/pages/History/Empty.tsx

@@ -1,6 +0,0 @@
-import React, { ReactElement } from 'react'
-import styles from './Empty.module.css'
-
-export default function Empty(): ReactElement {
-  return <div className={styles.empty}>No results found</div>
-}

src/components/pages/History/PoolTransactions.module.css

@@ -1,7 +0,0 @@
-.table div {
-  background-color: transparent !important;
-}
-
-.table [role='columnheader'] {
-  font-weight: var(--font-weight-bold);
-}

src/components/pages/History/PoolTransactions.tsx

@@ -1,14 +1,11 @@
 import { PoolTransaction } from '@oceanprotocol/lib/dist/node/balancer/OceanPool'
 import { useMetadata, useOcean } from '@oceanprotocol/react'
-import Loader from '../../atoms/Loader'
 import { Link } from 'gatsby'
 import React, { ReactElement, useEffect, useState } from 'react'
-import DataTable from 'react-data-table-component'
 import EtherscanLink from '../../atoms/EtherscanLink'
 import Time from '../../atoms/Time'
-import styles from './PoolTransactions.module.css'
-import Empty from './Empty'
 import Dotdotdot from 'react-dotdotdot'
+import Table from '../../atoms/Table'
 
 function AssetTitle({ did }: { did: string }): ReactElement {
   const { title } = useMetadata(did)
@@ -91,17 +88,5 @@ export default function PoolTransactions(): ReactElement {
     getLogs()
   }, [ocean, accountId])
 
-  return isLoading ? (
-    <Loader />
-  ) : (
-    <DataTable
-      columns={columns}
-      data={logs}
-      className={styles.table}
-      noHeader
-      pagination={logs?.length >= 9}
-      paginationPerPage={10}
-      noDataComponent={<Empty />}
-    />
-  )
+  return <Table columns={columns} data={logs} isLoading={isLoading} />
 }