Fix pagination breaks on to many results (#831)

* handle to many results

* update search test

* get transaction history based on ddo chainId

* revert last commit

* changed title and description

* reduce paragraphs

* added constant for maximum number of pages

src/components/molecules/PageHeader.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react'
 import classNames from 'classnames/bind'
 import styles from './PageHeader.module.css'
+import Markdown from '../atoms/Markdown'
 
 const cx = classNames.bind(styles)
 
@@ -21,7 +22,9 @@ export default function PageHeader({
   return (
     <header className={styleClasses}>
       <h1 className={styles.title}>{title}</h1>
-      {description && <p className={styles.description}>{description}</p>}
+      {description && (
+        <Markdown text={description} className={styles.description} />
+      )}
     </header>
   )
 }

src/components/molecules/Pagination.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, ReactElement } from 'react'
 import ReactPaginate from 'react-paginate'
 import styles from './Pagination.module.css'
+import { MAXIMUM_NUMBER_OF_PAGES_WITH_RESULTS } from '../../utils/aquarius'
 import { ReactComponent as Arrow } from '../../images/arrow.svg'
 
 interface PaginationProps {
@@ -56,7 +57,11 @@ export default function Pagination({
 
   return totalPageNumbers && totalPageNumbers > 1 ? (
     <ReactPaginate
-      pageCount={totalPageNumbers}
+      pageCount={
+        totalPageNumbers > MAXIMUM_NUMBER_OF_PAGES_WITH_RESULTS
+          ? MAXIMUM_NUMBER_OF_PAGES_WITH_RESULTS
+          : totalPageNumbers
+      }
       // react-pagination starts counting at 0, we start at 1
       initialPage={currentPage ? currentPage - 1 : 0}
       // adapt based on media query match

src/components/templates/Search/index.tsx

@@ -14,10 +14,12 @@ import { useUserPreferences } from '../../../providers/UserPreferences'
 
 export default function SearchPage({
   location,
-  setTotalResults
+  setTotalResults,
+  setTotalPagesNumber
 }: {
   location: Location
   setTotalResults: (totalResults: number) => void
+  setTotalPagesNumber: (totalPagesNumber: number) => void
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
   const parsed = queryString.parse(location.search)
@@ -45,6 +47,7 @@ export default function SearchPage({
       )
       setQueryResult(queryResult)
       setTotalResults(queryResult.totalResults)
+      setTotalPagesNumber(queryResult.totalPages)
       setLoading(false)
     }
     initSearch()

src/pages/search.tsx

@@ -5,11 +5,13 @@ import Page from '../components/templates/Page'
 import queryString from 'query-string'
 import { accountTruncate } from '../utils/web3'
 import ethereumAddress from 'ethereum-address'
+import { MAXIMUM_NUMBER_OF_PAGES_WITH_RESULTS } from '../utils/aquarius'
 
 export default function PageGatsbySearch(props: PageProps): ReactElement {
   const parsed = queryString.parse(props.location.search)
   const { text, owner, tags, categories } = parsed
   const [totalResults, setTotalResults] = useState<number>()
+  const [totalPagesNumber, setTotalPagesNumber] = useState<number>()
 
   const isETHAddress = ethereumAddress.isAddress(text as string)
   const searchValue =
@@ -32,10 +34,23 @@ export default function PageGatsbySearch(props: PageProps): ReactElement {
       }`
 
   return (
-    <Page title={title} uri={props.uri}>
+    <Page
+      title={
+        totalPagesNumber > MAXIMUM_NUMBER_OF_PAGES_WITH_RESULTS
+          ? `>10000 results for ${searchValue}`
+          : title
+      }
+      description={
+        totalPagesNumber &&
+        totalPagesNumber > MAXIMUM_NUMBER_OF_PAGES_WITH_RESULTS &&
+        '**Results displayed are limited to the first 10k, please refine your search.**'
+      }
+      uri={props.uri}
+    >
       <PageSearch
         location={props.location}
         setTotalResults={(totalResults) => setTotalResults(totalResults)}
+        setTotalPagesNumber={(totalPages) => setTotalPagesNumber(totalPages)}
       />
     </Page>
   )

src/utils/aquarius.ts

@@ -14,6 +14,8 @@ import { PriceList, getAssetsPriceList } from './subgraph'
 import axios, { CancelToken, AxiosResponse } from 'axios'
 import { metadataCacheUri } from '../../app.config'
 
+export const MAXIMUM_NUMBER_OF_PAGES_WITH_RESULTS = 476
+
 function getQueryForAlgorithmDatasets(algorithmDid: string, chainId?: number) {
   return {
     query: {

tests/unit/pages/search.test.tsx

@@ -14,10 +14,15 @@ describe('Search', () => {
       const results = totalResults
     }
 
+    const setTotalPagesNumber = (totalPages: number) => {
+      const pages = totalPages
+    }
+
     const { container } = render(
       <LocationProvider history={history}>
         <Search
           location={{ search: '?text=water' } as any}
+          setTotalPagesNumber={(totalPages) => setTotalPagesNumber(totalPages)}
           setTotalResults={(totalResults) => setTotalResults(totalResults)}
         />
       </LocationProvider>