2020-05-07 08:03:30 +02:00
|
|
|
import AssetTeaser from '../molecules/AssetTeaser'
|
|
|
|
import React from 'react'
|
2020-10-13 17:05:57 +02:00
|
|
|
import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache'
|
2020-07-15 16:05:10 +02:00
|
|
|
import { useLocation, useNavigate } from '@reach/router'
|
2020-05-07 08:03:30 +02:00
|
|
|
import Pagination from '../molecules/Pagination'
|
|
|
|
import { updateQueryStringParameter } from '../../utils'
|
2020-10-29 15:12:05 +01:00
|
|
|
import styles from './AssetQueryList.module.css'
|
2020-07-14 13:01:24 +02:00
|
|
|
import { DDO } from '@oceanprotocol/lib'
|
2020-11-05 14:43:13 +01:00
|
|
|
import classNames from 'classnames/bind'
|
|
|
|
|
|
|
|
const cx = classNames.bind(styles)
|
2020-05-07 08:03:30 +02:00
|
|
|
|
2020-10-29 15:12:05 +01:00
|
|
|
declare type AssetQueryListProps = {
|
2020-05-07 08:03:30 +02:00
|
|
|
queryResult: QueryResult
|
2020-11-05 14:43:13 +01:00
|
|
|
className?: string
|
2020-05-07 08:03:30 +02:00
|
|
|
}
|
|
|
|
|
2020-11-05 14:43:13 +01:00
|
|
|
const AssetQueryList: React.FC<AssetQueryListProps> = ({
|
|
|
|
queryResult,
|
|
|
|
className
|
|
|
|
}) => {
|
2020-07-15 16:05:10 +02:00
|
|
|
const location = useLocation()
|
|
|
|
const navigate = useNavigate()
|
2020-07-15 13:48:43 +02:00
|
|
|
|
2020-05-07 08:03:30 +02:00
|
|
|
// Construct the urls on the pagination links. This is only for UX,
|
|
|
|
// since the links are no <Link> they will not work by itself.
|
2020-07-15 16:05:10 +02:00
|
|
|
function hrefBuilder(pageIndex: number) {
|
|
|
|
const newUrl = updateQueryStringParameter(
|
|
|
|
location.pathname + location.search,
|
|
|
|
'page',
|
|
|
|
`${pageIndex}`
|
|
|
|
)
|
|
|
|
return newUrl
|
|
|
|
}
|
2020-05-07 08:03:30 +02:00
|
|
|
|
2020-07-01 18:13:32 +02:00
|
|
|
// // This is what iniitates a new search with new `page`
|
|
|
|
// // url parameter
|
2020-07-15 16:05:10 +02:00
|
|
|
function onPageChange(selected: number) {
|
|
|
|
const newUrl = updateQueryStringParameter(
|
|
|
|
location.pathname + location.search,
|
|
|
|
'page',
|
|
|
|
`${selected + 1}`
|
|
|
|
)
|
|
|
|
return navigate(newUrl)
|
|
|
|
}
|
2020-05-07 08:03:30 +02:00
|
|
|
|
2020-11-05 14:43:13 +01:00
|
|
|
const styleClasses = cx({
|
|
|
|
assetList: true,
|
|
|
|
[className]: className
|
|
|
|
})
|
|
|
|
|
2020-05-07 08:03:30 +02:00
|
|
|
return (
|
|
|
|
<>
|
2020-11-05 14:43:13 +01:00
|
|
|
<div className={styleClasses}>
|
2020-10-01 13:13:33 +02:00
|
|
|
{queryResult?.results.length > 0 ? (
|
2020-11-05 14:43:13 +01:00
|
|
|
queryResult.results.map((ddo: DDO) => (
|
|
|
|
<AssetTeaser ddo={ddo} key={ddo.id} />
|
|
|
|
))
|
2020-07-15 13:48:43 +02:00
|
|
|
) : (
|
2020-10-29 12:00:10 +01:00
|
|
|
<div className={styles.empty}>No results found.</div>
|
2020-07-15 13:48:43 +02:00
|
|
|
)}
|
2020-05-07 08:03:30 +02:00
|
|
|
</div>
|
2020-07-15 16:05:10 +02:00
|
|
|
|
|
|
|
{/*
|
|
|
|
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}
|
|
|
|
/>
|
|
|
|
)}
|
2020-05-07 08:03:30 +02:00
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2020-10-29 15:12:05 +01:00
|
|
|
export default AssetQueryList
|