58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import React, { useContext, useEffect, useState } from 'react'
|
|
import { DDO, Logger } from '@oceanprotocol/squid'
|
|
import { User } from '../../context'
|
|
import Spinner from '../atoms/Spinner'
|
|
import AssetTeaser from '../molecules/AssetTeaser'
|
|
import styles from './AssetsLatest.module.scss'
|
|
|
|
const AssetsLatest = () => {
|
|
const [latestAssets, setLatestAssets] = useState<DDO[]>([])
|
|
const [isLoadingLatest, setIsLoadingLatest] = useState(false)
|
|
const { ocean } = useContext(User)
|
|
|
|
const getLatestAssets = async () => {
|
|
const searchQuery = {
|
|
offset: 15,
|
|
page: 1,
|
|
query: {},
|
|
sort: {
|
|
created: -1
|
|
}
|
|
}
|
|
|
|
try {
|
|
const search = await ocean.assets.query(searchQuery)
|
|
setLatestAssets(search.results)
|
|
setIsLoadingLatest(false)
|
|
} catch (error) {
|
|
Logger.error(error.message)
|
|
setIsLoadingLatest(false)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
getLatestAssets()
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<h2 className={styles.title}>Latest published assets</h2>
|
|
<div className={styles.latestAssetsWrap}>
|
|
{isLoadingLatest ? (
|
|
<Spinner message="Loading..." />
|
|
) : latestAssets && latestAssets.length ? (
|
|
<div className={styles.latestAssets}>
|
|
{latestAssets.map(asset => (
|
|
<AssetTeaser key={asset.id} asset={asset} minimal />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div>No data sets found.</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default AssetsLatest
|