Feature/asset list isolated pagination (#356)

* isolated pagination using query

* made pagination hrefBuilder prop optional

* mad query prop optional, fixed TransactionHistoryPool import error

* removed pagination and url logic outsite AssetQueryList

* renamed AssetQueryList to AssetList, changed props

* used navigate from gatsby

src/components/molecules/Pagination.tsx

@@ -6,13 +6,11 @@ interface PaginationProps {
   totalPages: number
   currentPage: number
   onPageChange(selected: number): void
-  hrefBuilder(pageIndex: number): void
 }
 
 export default function Pagination({
   totalPages,
   currentPage,
-  hrefBuilder,
   onPageChange
 }: PaginationProps): ReactElement {
   const [smallViewport, setSmallViewport] = useState(true)
@@ -40,7 +38,6 @@ export default function Pagination({
       marginPagesDisplayed={smallViewport ? 0 : 1}
       pageRangeDisplayed={smallViewport ? 3 : 6}
       onPageChange={(data) => onPageChange(data.selected)}
-      hrefBuilder={(pageIndex) => hrefBuilder(pageIndex)}
       disableInitialCallback
       previousLabel="←"
       nextLabel="→"

src/components/organisms/AssetList.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { DDO } from '@oceanprotocol/lib'
-import AssetQueryList from './AssetQueryList'
+import AssetList from './AssetList'
 import asset from '../../../tests/unit/__fixtures__/ddo'
 
 const queryResult = {
@@ -16,4 +16,6 @@ export default {
   title: 'Organisms/Asset List'
 }
 
-export const Default = () => <AssetQueryList queryResult={queryResult} />
+export const Default = () => (
+  <AssetList assets={queryResult.results} showPagination={false} />
+)

src/components/organisms/AssetList.tsx

@@ -0,0 +1,58 @@
+import AssetTeaser from '../molecules/AssetTeaser'
+import React from 'react'
+import Pagination from '../molecules/Pagination'
+import styles from './AssetList.module.css'
+import { DDO } from '@oceanprotocol/lib'
+import classNames from 'classnames/bind'
+
+const cx = classNames.bind(styles)
+
+declare type AssetListProps = {
+  assets: Array<any>
+  showPagination: boolean
+  page?: number
+  totalPages?: number
+  onPageChange?: React.Dispatch<React.SetStateAction<number>>
+  className?: string
+}
+
+const AssetList: React.FC<AssetListProps> = ({
+  assets,
+  showPagination,
+  page,
+  totalPages,
+  onPageChange,
+  className
+}) => {
+  // // This changes the page field inside the query
+  function handlePageChange(selected: number) {
+    onPageChange(selected + 1)
+  }
+
+  const styleClasses = cx({
+    assetList: true,
+    [className]: className
+  })
+
+  return (
+    <>
+      <div className={styleClasses}>
+        {assets.length > 0 ? (
+          assets.map((ddo: DDO) => <AssetTeaser ddo={ddo} key={ddo.id} />)
+        ) : (
+          <div className={styles.empty}>No results found.</div>
+        )}
+      </div>
+
+      {showPagination && (
+        <Pagination
+          totalPages={totalPages}
+          currentPage={page}
+          onPageChange={handlePageChange}
+        />
+      )}
+    </>
+  )
+}
+
+export default AssetList

src/components/organisms/AssetQueryList.tsx

@@ -1,80 +0,0 @@
-import AssetTeaser from '../molecules/AssetTeaser'
-import React from 'react'
-import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache'
-import { useLocation } from '@reach/router'
-import { navigate } from 'gatsby'
-import Pagination from '../molecules/Pagination'
-import { updateQueryStringParameter } from '../../utils'
-import styles from './AssetQueryList.module.css'
-import { DDO } from '@oceanprotocol/lib'
-import classNames from 'classnames/bind'
-
-const cx = classNames.bind(styles)
-
-declare type AssetQueryListProps = {
-  queryResult: QueryResult
-  className?: string
-}
-
-const AssetQueryList: React.FC<AssetQueryListProps> = ({
-  queryResult,
-  className
-}) => {
-  const location = useLocation()
-
-  // Construct the urls on the pagination links. This is only for UX,
-  // since the links are no <Link> they will not work by itself.
-  function hrefBuilder(pageIndex: number) {
-    const newUrl = updateQueryStringParameter(
-      location.pathname + location.search,
-      'page',
-      `${pageIndex}`
-    )
-    return newUrl
-  }
-
-  // // This is what iniitates a new search with new `page`
-  // // url parameter
-  function onPageChange(selected: number) {
-    const newUrl = updateQueryStringParameter(
-      location.pathname + location.search,
-      'page',
-      `${selected + 1}`
-    )
-    return navigate(newUrl)
-  }
-
-  const styleClasses = cx({
-    assetList: true,
-    [className]: className
-  })
-
-  return (
-    <>
-      <div className={styleClasses}>
-        {queryResult?.results.length > 0 ? (
-          queryResult.results.map((ddo: DDO) => (
-            <AssetTeaser ddo={ddo} key={ddo.id} />
-          ))
-        ) : (
-          <div className={styles.empty}>No results found.</div>
-        )}
-      </div>
-
-      {/* 
-        Little hack cause the pagination navigation only works 
-        on the search page right now.
-      */}
-      {location.pathname === '/search' && queryResult && (
-        <Pagination
-          totalPages={queryResult.totalPages}
-          currentPage={queryResult.page}
-          hrefBuilder={hrefBuilder}
-          onPageChange={onPageChange}
-        />
-      )}
-    </>
-  )
-}
-
-export default AssetQueryList

src/components/pages/History/PublishedList.tsx

@@ -3,7 +3,7 @@ import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/Metadata
 import { useOcean } from '@oceanprotocol/react'
 import React, { ReactElement, useEffect, useState } from 'react'
 import Loader from '../../atoms/Loader'
-import AssetQueryList from '../../organisms/AssetQueryList'
+import AssetList from '../../organisms/AssetList'
 
 export default function PublishedList(): ReactElement {
   const { ocean, status, accountId } = useOcean()
@@ -29,8 +29,8 @@ export default function PublishedList(): ReactElement {
 
   return isLoading ? (
     <Loader />
-  ) : accountId && ocean ? (
+  ) : accountId && ocean && queryResult ? (
-    <AssetQueryList queryResult={queryResult} />
+    <AssetList assets={queryResult.results} showPagination={false} />
   ) : (
     <div>Connect your wallet to see your published data sets.</div>
   )

src/components/pages/Home.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import SearchBar from '../molecules/SearchBar'
 import styles from './Home.module.css'
-import AssetQueryList from '../organisms/AssetQueryList'
+import AssetList from '../organisms/AssetList'
 import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache'
 import Container from '../atoms/Container'
 import Loader from '../atoms/Loader'
@@ -84,7 +84,7 @@ function SectionQueryResult({
       {loading ? (
         <LoaderArea />
       ) : (
-        result && <AssetQueryList queryResult={result} />
+        result && <AssetList assets={result.results} showPagination={false} />
       )}
       {action && action}
     </section>

src/components/templates/Search/index.tsx

@@ -1,12 +1,14 @@
 import React, { ReactElement, useState, useEffect } from 'react'
 import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache'
 import SearchBar from '../../molecules/SearchBar'
-import AssetQueryList from '../../organisms/AssetQueryList'
+import AssetList from '../../organisms/AssetList'
 import styles from './index.module.css'
 import queryString from 'query-string'
 import PriceFilter from './filterPrice'
 import Sort from './sort'
-import { getResults, addExistingParamsToUrl } from './utils'
+import { getResults } from './utils'
+import { navigate } from 'gatsby'
+import { updateQueryStringParameter } from '../../../utils'
 import Loader from '../../atoms/Loader'
 import { useOcean } from '@oceanprotocol/react'
 
@@ -44,13 +46,22 @@ export default function SearchPage({
     text,
     owner,
     tags,
-    page,
     sort,
+    page,
     priceType,
     sortOrder,
     config.metadataCacheUri
   ])
 
+  function setPage(page: number) {
+    const newUrl = updateQueryStringParameter(
+      location.pathname + location.search,
+      'page',
+      `${page}`
+    )
+    return navigate(newUrl)
+  }
+
   return (
     <>
       <div className={styles.search}>
@@ -69,7 +80,19 @@ export default function SearchPage({
         </div>
       </div>
       <div className={styles.results}>
-        {loading ? <Loader /> : <AssetQueryList queryResult={queryResult} />}
+        {loading ? (
+          <Loader />
+        ) : queryResult ? (
+          <AssetList
+            assets={queryResult.results}
+            showPagination
+            page={queryResult.page}
+            totalPages={queryResult.totalPages}
+            onPageChange={setPage}
+          />
+        ) : (
+          ''
+        )}
       </div>
     </>
   )