restore pagination

src/components/molecules/AssetTeaser.tsx

@@ -14,6 +14,8 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
   did,
   metadata
 }: AssetTeaserProps) => {
+  if (!metadata.additionalInformation) return null
+
   const { name, price } = metadata.main
   const { description, access } = metadata.additionalInformation
 

src/components/molecules/Pagination.module.css

@@ -15,7 +15,7 @@
   margin-top: -1px;
   display: inline-block;
   cursor: pointer;
-  border: 1px solid var(--brand-grey-light);
+  border: 1px solid var(--brand-grey-lighter);
   min-width: 3.5rem;
 }
 

src/components/molecules/Pagination.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, ReactElement } from 'react'
 import ReactPaginate from 'react-paginate'
 import styles from './Pagination.module.css'
 
@@ -14,7 +14,9 @@ export default function Pagination({
   currentPage,
   hrefBuilder,
   onPageChange
-}: PaginationProps) {
+}: PaginationProps): ReactElement {
+  if (!totalPages || totalPages < 2) return null
+
   const [smallViewport, setSmallViewport] = useState(true)
 
   function viewportChange(mq: { matches: boolean }) {
@@ -31,7 +33,7 @@ export default function Pagination({
     }
   }, [])
 
-  return totalPages > 1 ? (
+  return (
     <ReactPaginate
       pageCount={totalPages}
       // react-pagination starts counting at 0, we start at 1
@@ -53,5 +55,5 @@ export default function Pagination({
       disabledClassName={styles.prevNextDisabled}
       breakLinkClassName={styles.break}
     />
-  ) : null
+  )
 }

src/components/organisms/AssetList.tsx

@@ -1,6 +1,7 @@
 import AssetTeaser from '../molecules/AssetTeaser'
 import React from 'react'
 import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatastore/MetadataStore'
+import { useLocation, useNavigate } from '@reach/router'
 import Pagination from '../molecules/Pagination'
 import { updateQueryStringParameter } from '../../utils'
 import styles from './AssetList.module.css'
@@ -14,38 +15,39 @@ declare type AssetListProps = {
 
 const AssetList: React.FC<AssetListProps> = ({ queryResult }) => {
   const { appConfig } = useSiteMetadata()
-  // TODO: restore Pagination behavior
+  const location = useLocation()
+  const navigate = useNavigate()
 
   // 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(
-  //     router.asPath,
-  //     'page',
-  //     `${pageIndex}`
-  //   )
-  //   return newUrl
-  // }
+  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(
-  //     router.asPath,
-  //     'page',
-  //     `${selected + 1}`
-  //   )
-  //   return router.push(newUrl)
-  // }
+  function onPageChange(selected: number) {
+    const newUrl = updateQueryStringParameter(
+      location.pathname + location.search,
+      'page',
+      `${selected + 1}`
+    )
+    return navigate(newUrl)
+  }
 
   return (
     <>
       <div className={styles.assetList}>
         {queryResult && queryResult.totalResults > 0 ? (
           queryResult.results.map((ddo: DDO) => {
-            const { attributes }: MetaDataMarket = new DDO(
-              ddo
-            ).findServiceByType('metadata')
+            const { attributes }: MetaDataMarket = ddo.findServiceByType(
+              'metadata'
+            )
 
             return (
               <AssetTeaser did={ddo.id} metadata={attributes} key={ddo.id} />
@@ -57,12 +59,19 @@ const AssetList: React.FC<AssetListProps> = ({ queryResult }) => {
           </div>
         )}
       </div>
-      {/* <Pagination
+
+      {/* 
+        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}
-      /> */}
+        />
+      )}
     </>
   )
 }

src/components/templates/Search/index.tsx

@@ -3,7 +3,6 @@ import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatastore/Metadata
 import SearchBar from '../../molecules/SearchBar'
 import AssetList from '../../organisms/AssetList'
 import { SearchPriceFilter } from '../../molecules/SearchPriceFilter'
-
 import styles from './index.module.css'
 import queryString from 'query-string'
 import { getResults } from './utils'
@@ -21,7 +20,7 @@ export default function SearchPage({
   location: Location
 }): ReactElement {
   const parsed = queryString.parse(location.search)
-  const { text, tag } = parsed
+  const { text, tag, page } = parsed
   const [queryResult, setQueryResult] = useState<QueryResult>()
   const [loading, setLoading] = useState<boolean>()
 
@@ -33,7 +32,7 @@ export default function SearchPage({
       setLoading(false)
     }
     initSearch()
-  }, [text, tag])
+  }, [text, tag, page])
 
   return (
     <section className={styles.grid}>