From 1f72fd39513336c0ee3c35aabd939d946fed7fbf Mon Sep 17 00:00:00 2001
From: Norby <37236152+KatunaNorbert@users.noreply.github.com>
Date: Fri, 5 Feb 2021 15:00:30 +0200
Subject: [PATCH] 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       |  3 -
 ...ryList.module.css => AssetList.module.css} |  0
 ...List.stories.tsx => AssetList.stories.tsx} |  6 +-
 src/components/organisms/AssetList.tsx        | 58 ++++++++++++++
 src/components/organisms/AssetQueryList.tsx   | 80 -------------------
 .../pages/History/PublishedList.tsx           |  6 +-
 src/components/pages/Home.tsx                 |  4 +-
 src/components/templates/Search/index.tsx     | 31 ++++++-
 8 files changed, 94 insertions(+), 94 deletions(-)
 rename src/components/organisms/{AssetQueryList.module.css => AssetList.module.css} (100%)
 rename src/components/organisms/{AssetQueryList.stories.tsx => AssetList.stories.tsx} (71%)
 create mode 100644 src/components/organisms/AssetList.tsx
 delete mode 100644 src/components/organisms/AssetQueryList.tsx

diff --git a/src/components/molecules/Pagination.tsx b/src/components/molecules/Pagination.tsx
index 47c2d842c..1a4961c30 100644
--- a/src/components/molecules/Pagination.tsx
+++ b/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="→"
diff --git a/src/components/organisms/AssetQueryList.module.css b/src/components/organisms/AssetList.module.css
similarity index 100%
rename from src/components/organisms/AssetQueryList.module.css
rename to src/components/organisms/AssetList.module.css
diff --git a/src/components/organisms/AssetQueryList.stories.tsx b/src/components/organisms/AssetList.stories.tsx
similarity index 71%
rename from src/components/organisms/AssetQueryList.stories.tsx
rename to src/components/organisms/AssetList.stories.tsx
index cd0d983f9..efb47ca1f 100644
--- a/src/components/organisms/AssetQueryList.stories.tsx
+++ b/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} />
+)
diff --git a/src/components/organisms/AssetList.tsx b/src/components/organisms/AssetList.tsx
new file mode 100644
index 000000000..62e5a9416
--- /dev/null
+++ b/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
diff --git a/src/components/organisms/AssetQueryList.tsx b/src/components/organisms/AssetQueryList.tsx
deleted file mode 100644
index 15c212df8..000000000
--- a/src/components/organisms/AssetQueryList.tsx
+++ /dev/null
@@ -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
diff --git a/src/components/pages/History/PublishedList.tsx b/src/components/pages/History/PublishedList.tsx
index 7543ffbf6..0cd116b8f 100644
--- a/src/components/pages/History/PublishedList.tsx
+++ b/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 ? (
-    <AssetQueryList queryResult={queryResult} />
+  ) : accountId && ocean && queryResult ? (
+    <AssetList assets={queryResult.results} showPagination={false} />
   ) : (
     <div>Connect your wallet to see your published data sets.</div>
   )
diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx
index 2acc3c7fd..84111a2a9 100644
--- a/src/components/pages/Home.tsx
+++ b/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>
diff --git a/src/components/templates/Search/index.tsx b/src/components/templates/Search/index.tsx
index 874bfee99..e1d43079a 100644
--- a/src/components/templates/Search/index.tsx
+++ b/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>
     </>
   )