import AssetTeaser from '../molecules/AssetTeaser'
import React, { useEffect, useState } from 'react'
import Pagination from '../molecules/Pagination'
import styles from './AssetList.module.css'
import { DDO } from '@oceanprotocol/lib'
import classNames from 'classnames/bind'
import { getAssetsBestPrices, AssetListPrices } from '../../utils/subgraph'
import Loader from '../atoms/Loader'
import { useUserPreferences } from '../../providers/UserPreferences'
const cx = classNames.bind(styles)
function LoaderArea() {
return (
)
}
declare type AssetListProps = {
assets: DDO[]
showPagination: boolean
page?: number
totalPages?: number
isLoading?: boolean
onPageChange?: React.Dispatch>
className?: string
noPublisher?: boolean
}
const AssetList: React.FC = ({
assets,
showPagination,
page,
totalPages,
isLoading,
onPageChange,
className,
noPublisher
}) => {
const { chainIds } = useUserPreferences()
const [assetsWithPrices, setAssetWithPrices] = useState()
const [loading, setLoading] = useState(true)
useEffect(() => {
if (!assets) return
isLoading && setLoading(true)
getAssetsBestPrices(assets).then((asset) => {
setAssetWithPrices(asset)
setLoading(false)
})
}, [assets])
// // This changes the page field inside the query
function handlePageChange(selected: number) {
onPageChange(selected + 1)
}
const styleClasses = cx({
assetList: true,
[className]: className
})
return assetsWithPrices &&
!loading &&
(isLoading === undefined || isLoading === false) ? (
<>
{assetsWithPrices.length > 0 ? (
assetsWithPrices.map((assetWithPrice) => (
))
) : chainIds.length === 0 ? (
No network selected.
) : (
No results found.
)}
{showPagination && (
)}
>
) : (
)
}
export default AssetList