100 lines
2.9 KiB
TypeScript
100 lines
2.9 KiB
TypeScript
import React, { Component } from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import { User } from '../../context'
|
|
import { Logger } from '@oceanprotocol/squid'
|
|
import Spinner from '../atoms/Spinner'
|
|
import AssetTeaser from '../molecules/AssetTeaser'
|
|
import styles from './ChannelTeaser.module.scss'
|
|
import channels from '../../data/channels.json'
|
|
import CategoryImage from '../atoms/CategoryImage'
|
|
|
|
interface ChannelTeaserProps {
|
|
channel: string
|
|
}
|
|
|
|
interface ChannelTeaserState {
|
|
channelAssets?: any[]
|
|
isLoadingChannel?: boolean
|
|
}
|
|
|
|
export default class ChannelTeaser extends Component<
|
|
ChannelTeaserProps,
|
|
ChannelTeaserState
|
|
> {
|
|
public static contextType = User
|
|
|
|
// Get channel content
|
|
public channel = channels.items
|
|
.filter(({ tag }) => tag === this.props.channel)
|
|
.map(channel => channel)[0]
|
|
|
|
public state = {
|
|
channelAssets: [],
|
|
isLoadingChannel: true
|
|
}
|
|
|
|
public async componentDidMount() {
|
|
this.getChannelAssets()
|
|
}
|
|
|
|
private getChannelAssets = async () => {
|
|
const { ocean } = this.context
|
|
|
|
const searchQuery = {
|
|
offset: 2,
|
|
page: 1,
|
|
query: {
|
|
tags: [this.channel.tag]
|
|
},
|
|
sort: {
|
|
created: -1
|
|
}
|
|
}
|
|
|
|
try {
|
|
const search = await ocean.aquarius.queryMetadata(searchQuery)
|
|
this.setState({
|
|
channelAssets: search.results,
|
|
isLoadingChannel: false
|
|
})
|
|
} catch (error) {
|
|
Logger.error(error.message)
|
|
this.setState({ isLoadingChannel: false })
|
|
}
|
|
}
|
|
|
|
public render() {
|
|
const { channelAssets, isLoadingChannel } = this.state
|
|
const { title, tag, teaser } = this.channel
|
|
|
|
return (
|
|
<div className={styles.channel}>
|
|
<div>
|
|
<header className={styles.channelHeader}>
|
|
<Link to={`/channels/${tag}`}>
|
|
<h2 className={styles.channelTitle}>{title}</h2>
|
|
<CategoryImage category={title} />
|
|
|
|
<p className={styles.channelTeaser}>{teaser}</p>
|
|
<p>Browse the channel →</p>
|
|
</Link>
|
|
</header>
|
|
</div>
|
|
<div>
|
|
{isLoadingChannel ? (
|
|
<Spinner message="Loading..." />
|
|
) : channelAssets && channelAssets.length ? (
|
|
<div className={styles.channelResults}>
|
|
{channelAssets.map((asset: any) => (
|
|
<AssetTeaser key={asset.id} asset={asset} />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div>No data sets found.</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|