mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
|
import React, { PureComponent } from 'react'
|
||
|
import { Logger } from '@oceanprotocol/squid'
|
||
|
import { User } from '../../context'
|
||
|
import Spinner from '../atoms/Spinner'
|
||
|
import AssetTeaser from '../molecules/AssetTeaser'
|
||
|
import styles from './AssetsLatest.module.scss'
|
||
|
|
||
|
interface AssetsLatestState {
|
||
|
latestAssets?: any[]
|
||
|
isLoadingLatest?: boolean
|
||
|
}
|
||
|
|
||
|
export default class AssetsLatest extends PureComponent<{}, AssetsLatestState> {
|
||
|
public state = { latestAssets: [], isLoadingLatest: true }
|
||
|
|
||
|
public _isMounted: boolean = false
|
||
|
|
||
|
public componentDidMount() {
|
||
|
this._isMounted = true
|
||
|
this._isMounted && this.getLatestAssets()
|
||
|
}
|
||
|
|
||
|
public componentWillUnmount() {
|
||
|
this._isMounted = false
|
||
|
}
|
||
|
|
||
|
private getLatestAssets = async () => {
|
||
|
const { ocean } = this.context
|
||
|
|
||
|
const searchQuery = {
|
||
|
offset: 15,
|
||
|
page: 1,
|
||
|
query: {},
|
||
|
sort: {
|
||
|
created: -1
|
||
|
}
|
||
|
}
|
||
|
|
||
|
try {
|
||
|
const search = await ocean.aquarius.queryMetadata(searchQuery)
|
||
|
this.setState({
|
||
|
latestAssets: search.results,
|
||
|
isLoadingLatest: false
|
||
|
})
|
||
|
} catch (error) {
|
||
|
Logger.error(error.message)
|
||
|
this.setState({ isLoadingLatest: false })
|
||
|
}
|
||
|
}
|
||
|
|
||
|
public render() {
|
||
|
const { latestAssets, isLoadingLatest } = this.state
|
||
|
|
||
|
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: any) => (
|
||
|
<AssetTeaser
|
||
|
key={asset.id}
|
||
|
asset={asset}
|
||
|
minimal
|
||
|
/>
|
||
|
))}
|
||
|
</div>
|
||
|
) : (
|
||
|
<div>No data sets found.</div>
|
||
|
)}
|
||
|
</div>
|
||
|
</>
|
||
|
)
|
||
|
}
|
||
|
}
|
||
|
|
||
|
AssetsLatest.contextType = User
|