added pagination to Published list, used aquarius to get assets (#377)

* added pagination to Published list, used aquarius to get assets

* loading only when component mounts

* pagination style unification

* Auto stash before merge of "feature/add-pagination-to-published-section" and "origin/feature/add-pagination-to-published-section"

* removed unnecessary code

* fixed lint errors

* code climate fixes

* removed unused component

* added hook for network switch

* display bottom border for last table row

* trigger pagination calculation on network change

Co-authored-by: Matthias Kretschmann <m@kretschmann.io>

src/components/atoms/Table.module.css

@@ -23,15 +23,17 @@
   color: var(--color-secondary);
 }
 
-.table [role='row']:not(:last-of-type) {
+.table [role='row'] {
-  border-color: var(--border-color);
+  border-bottom: 1px solid var(--border-color) !important;
 }
 
 .table + div [class*='rdt_Pagination'] {
   font-size: var(--font-size-small);
+  font-weight: var(--font-weight-bold);
   color: var(--color-secondary);
   background: none;
   min-height: 0;
+  padding-top: calc(var(--spacer) / 2);
 }
 
 .table + div [class*='rdt_Pagination'] svg {
@@ -50,6 +52,11 @@
   fill: var(--brand-pink);
 }
 
+.table + div [class*='rdt_Pagination'] button[aria-label='First Page'],
+.table + div [class*='rdt_Pagination'] button[aria-label='Last Page'] {
+  display: none;
+}
+
 .empty {
   width: 100%;
   text-align: left;
@@ -57,3 +64,11 @@
   font-size: var(--font-size-small);
   font-style: italic;
 }
+
+.arrow {
+  composes: arrow from '../molecules/Pagination.module.css';
+}
+
+.previous {
+  composes: previous from '../molecules/Pagination.module.css';
+}

src/components/atoms/Table.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react'
 import DataTable, { IDataTableProps } from 'react-data-table-component'
 import Loader from './Loader'
+import Pagination from '../molecules/Pagination'
 import styles from './Table.module.css'
 
 interface TableProps extends IDataTableProps {
@@ -35,10 +36,10 @@ export default function Table({
       noHeader
       pagination={pagination || data?.length >= 9}
       paginationPerPage={paginationPerPage || 10}
-      paginationComponentOptions={{ noRowsPerPage: true }}
       noDataComponent={<Empty message={emptyMessage} />}
       progressPending={isLoading}
       progressComponent={<Loader />}
+      paginationComponent={Pagination}
       defaultSortField={sortField}
       defaultSortAsc={sortAsc}
       {...props}

src/components/molecules/Pagination.module.css

@@ -2,21 +2,25 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  margin-top: calc(var(--spacer) * 2);
+  margin-top: var(--spacer);
   margin-bottom: var(--spacer);
   padding-left: 0;
+  font-size: var(--font-size-small);
 }
 
 .number {
-  text-align: center;
   font-weight: var(--font-weight-bold);
   padding: calc(var(--spacer) / 4) calc(var(--spacer) / 2);
   margin-left: -1px;
   margin-top: -1px;
-  display: inline-block;
+  display: block;
   cursor: pointer;
-  border: 1px solid var(--border-color);
+  min-width: 3rem;
-  min-width: 3.5rem;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-secondary);
 }
 
 li:first-child .number,
@@ -39,8 +43,7 @@ li:last-child .number {
 }
 
 .number:hover {
-  background-color: var(--color-primary);
+  color: var(--brand-pink);
-  color: var(--brand-white);
 }
 
 .current,
@@ -59,7 +62,7 @@ li:last-child .number {
 .current:hover,
 .current:focus,
 .current:active {
-  color: var(--brand-grey);
+  color: var(--text-color);
 }
 
 .next {
@@ -69,3 +72,13 @@ li:last-child .number {
 .prevNextDisabled {
   opacity: 0;
 }
+
+.arrow {
+  width: 1rem;
+  height: 1rem;
+  fill: currentColor;
+}
+
+.arrow.previous {
+  transform: rotate(180deg);
+}

src/components/molecules/Pagination.tsx

@@ -1,24 +1,49 @@
 import React, { useState, useEffect, ReactElement } from 'react'
 import ReactPaginate from 'react-paginate'
 import styles from './Pagination.module.css'
+import { ReactComponent as Arrow } from '../../images/arrow.svg'
 
 interface PaginationProps {
-  totalPages: number
+  totalPages?: number
-  currentPage: number
+  currentPage?: number
-  onPageChange(selected: number): void
+  onChangePage?(selected: number): void
+  rowsPerPage?: number
+  rowCount?: number
 }
 
 export default function Pagination({
   totalPages,
   currentPage,
-  onPageChange
+  rowsPerPage,
+  rowCount,
+  onChangePage
 }: PaginationProps): ReactElement {
   const [smallViewport, setSmallViewport] = useState(true)
+  const [totalPageNumbers, setTotalPageNumbers] = useState<number>()
+
+  function getTotalPages() {
+    if (totalPages) return setTotalPageNumbers(totalPages)
+    const doublePageNumber = rowCount / rowsPerPage
+    const roundedPageNumber = Math.round(doublePageNumber)
+    const total =
+      roundedPageNumber < doublePageNumber
+        ? roundedPageNumber + 1
+        : roundedPageNumber
+    setTotalPageNumbers(total)
+  }
+
+  function onPageChange(page: number) {
+    totalPages ? onChangePage(page) : onChangePage(page + 1)
+  }
 
   function viewportChange(mq: { matches: boolean }) {
     setSmallViewport(!mq.matches)
   }
 
+  useEffect(() => {
+    getTotalPages()
+  }, [totalPages, rowCount])
+
   useEffect(() => {
     const mq = window.matchMedia('(min-width: 600px)')
     viewportChange(mq)
@@ -29,18 +54,18 @@ export default function Pagination({
     }
   }, [])
 
-  return totalPages && totalPages > 1 ? (
+  return totalPageNumbers && totalPageNumbers > 1 ? (
     <ReactPaginate
-      pageCount={totalPages}
+      pageCount={totalPageNumbers}
       // react-pagination starts counting at 0, we start at 1
-      initialPage={currentPage - 1}
+      initialPage={currentPage ? currentPage - 1 : 0}
       // adapt based on media query match
       marginPagesDisplayed={smallViewport ? 0 : 1}
       pageRangeDisplayed={smallViewport ? 3 : 6}
       onPageChange={(data) => onPageChange(data.selected)}
       disableInitialCallback
-      previousLabel="←"
+      previousLabel={<Arrow className={`${styles.arrow} ${styles.previous}`} />}
-      nextLabel="→"
+      nextLabel={<Arrow className={styles.arrow} />}
       breakLabel="..."
       containerClassName={styles.pagination}
       pageLinkClassName={styles.number}

src/components/organisms/AssetList.tsx

@@ -48,7 +48,7 @@ const AssetList: React.FC<AssetListProps> = ({
         <Pagination
           totalPages={totalPages}
           currentPage={page}
-          onPageChange={handlePageChange}
+          onChangePage={handlePageChange}
         />
       )}
     </>

src/components/pages/History/PublishedList.tsx

@@ -4,20 +4,39 @@ import { useOcean } from '@oceanprotocol/react'
 import React, { ReactElement, useEffect, useState } from 'react'
 import Loader from '../../atoms/Loader'
 import AssetList from '../../organisms/AssetList'
+import axios from 'axios'
+import { queryMetadata } from '../../../utils/aquarius'
 
 export default function PublishedList(): ReactElement {
-  const { ocean, status, accountId } = useOcean()
+  const { accountId } = useOcean()
   const [queryResult, setQueryResult] = useState<QueryResult>()
   const [isLoading, setIsLoading] = useState(false)
+  const { config } = useOcean()
+  const source = axios.CancelToken.source()
+  const [page, setPage] = useState<number>(1)
 
   useEffect(() => {
     async function getPublished() {
-      if (!accountId || !ocean) return
+      if (!accountId) return
-
+      const queryPublishedAssets = {
+        page: page,
+        offset: 9,
+        query: {
+          nativeSearch: 1,
+          query_string: {
+            query: `(publicKey.owner:${accountId})`
+          }
+        },
+        sort: { 'price.ocean': -1 }
+      }
       try {
-        setIsLoading(true)
+        queryResult || setIsLoading(true)
-        const queryResult = await ocean.assets.ownerAssets(accountId)
+        const result = await queryMetadata(
-        setQueryResult(queryResult)
+          queryPublishedAssets as any,
+          config.metadataCacheUri,
+          source.token
+        )
+        setQueryResult(result)
       } catch (error) {
         Logger.error(error.message)
       } finally {
@@ -25,12 +44,20 @@ export default function PublishedList(): ReactElement {
       }
     }
     getPublished()
-  }, [ocean, status, accountId])
+  }, [accountId, page, config.metadataCacheUri])
 
   return isLoading ? (
     <Loader />
-  ) : accountId && ocean && queryResult ? (
+  ) : accountId && queryResult ? (
-    <AssetList assets={queryResult.results} showPagination={false} />
+    <AssetList
+      assets={queryResult.results}
+      showPagination
+      page={queryResult.page}
+      totalPages={queryResult.totalPages}
+      onPageChange={(newPage) => {
+        setPage(newPage)
+      }}
+    />
   ) : (
     <div>Connect your wallet to see your published data sets.</div>
   )