diff --git a/src/components/molecules/AssetTeaser.tsx b/src/components/molecules/AssetTeaser.tsx index 3c0a07c0a..1354ec3e5 100644 --- a/src/components/molecules/AssetTeaser.tsx +++ b/src/components/molecules/AssetTeaser.tsx @@ -14,6 +14,8 @@ const AssetTeaser: React.FC = ({ did, metadata }: AssetTeaserProps) => { + if (!metadata.additionalInformation) return null + const { name, price } = metadata.main const { description, access } = metadata.additionalInformation diff --git a/src/components/molecules/Pagination.module.css b/src/components/molecules/Pagination.module.css index 3d33fb773..47efdc81a 100644 --- a/src/components/molecules/Pagination.module.css +++ b/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; } diff --git a/src/components/molecules/Pagination.tsx b/src/components/molecules/Pagination.tsx index 0d68a06a5..cc822a15e 100644 --- a/src/components/molecules/Pagination.tsx +++ b/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 ( - ) : null + ) } diff --git a/src/components/organisms/AssetList.tsx b/src/components/organisms/AssetList.tsx index f13d17c37..bd7eb3f82 100644 --- a/src/components/organisms/AssetList.tsx +++ b/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 = ({ 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 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 ( <>
{queryResult && queryResult.totalResults > 0 ? ( queryResult.results.map((ddo: DDO) => { - const { attributes }: MetaDataMarket = new DDO( - ddo - ).findServiceByType('metadata') + const { attributes }: MetaDataMarket = ddo.findServiceByType( + 'metadata' + ) return ( @@ -57,12 +59,19 @@ const AssetList: React.FC = ({ queryResult }) => {
)} - {/* */} + + {/* + Little hack cause the pagination navigation only works + on the search page right now. + */} + {location.pathname === '/search' && queryResult && ( + + )} ) } diff --git a/src/components/templates/Search/index.tsx b/src/components/templates/Search/index.tsx index 9683c8a6c..309b7bb2a 100644 --- a/src/components/templates/Search/index.tsx +++ b/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() const [loading, setLoading] = useState() @@ -33,7 +32,7 @@ export default function SearchPage({ setLoading(false) } initSearch() - }, [text, tag]) + }, [text, tag, page]) return (