2019-05-23 17:47:13 +02:00
|
|
|
import React, { Component } from 'react'
|
|
|
|
import { Link } from 'react-router-dom'
|
|
|
|
import { User } from '../../context'
|
2019-12-13 12:22:52 +01:00
|
|
|
import { Logger, DDO } from '@oceanprotocol/squid'
|
|
|
|
import CategoryImage from '../atoms/CategoryImage'
|
|
|
|
import SearchResults from '../molecules/SearchResults'
|
2019-05-23 17:47:13 +02:00
|
|
|
import styles from './ChannelTeaser.module.scss'
|
|
|
|
import channels from '../../data/channels.json'
|
|
|
|
|
|
|
|
interface ChannelTeaserProps {
|
|
|
|
channel: string
|
|
|
|
}
|
|
|
|
|
|
|
|
interface ChannelTeaserState {
|
2019-12-13 12:22:52 +01:00
|
|
|
channelAssets?: DDO[]
|
2019-05-23 17:47:13 +02:00
|
|
|
isLoadingChannel?: boolean
|
|
|
|
}
|
|
|
|
|
|
|
|
export default class ChannelTeaser extends Component<
|
|
|
|
ChannelTeaserProps,
|
|
|
|
ChannelTeaserState
|
|
|
|
> {
|
|
|
|
public static contextType = User
|
|
|
|
|
|
|
|
// Get channel content
|
|
|
|
public channel = channels.items
|
2019-05-24 18:31:01 +02:00
|
|
|
.filter(({ tag }) => tag === this.props.channel)
|
2020-05-19 10:36:18 +02:00
|
|
|
.map((channel) => channel)[0]
|
2019-05-23 17:47:13 +02:00
|
|
|
|
|
|
|
public state = {
|
|
|
|
channelAssets: [],
|
|
|
|
isLoadingChannel: true
|
|
|
|
}
|
|
|
|
|
|
|
|
public async componentDidMount() {
|
|
|
|
this.getChannelAssets()
|
|
|
|
}
|
|
|
|
|
|
|
|
private getChannelAssets = async () => {
|
|
|
|
const { ocean } = this.context
|
|
|
|
|
|
|
|
const searchQuery = {
|
2019-05-27 17:53:48 +02:00
|
|
|
offset: 2,
|
2019-05-23 17:47:13 +02:00
|
|
|
page: 1,
|
|
|
|
query: {
|
2019-05-27 14:54:07 +02:00
|
|
|
tags: [this.channel.tag]
|
2019-05-23 17:47:13 +02:00
|
|
|
},
|
|
|
|
sort: {
|
2019-05-27 17:53:48 +02:00
|
|
|
created: -1
|
2019-05-23 17:47:13 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
try {
|
2019-11-14 13:16:53 +01:00
|
|
|
const search = await ocean.assets.query(searchQuery)
|
2019-05-23 17:47:13 +02:00
|
|
|
this.setState({
|
2019-05-27 17:53:48 +02:00
|
|
|
channelAssets: search.results,
|
2019-05-23 17:47:13 +02:00
|
|
|
isLoadingChannel: false
|
|
|
|
})
|
|
|
|
} catch (error) {
|
|
|
|
Logger.error(error.message)
|
|
|
|
this.setState({ isLoadingChannel: false })
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
public render() {
|
|
|
|
const { channelAssets, isLoadingChannel } = this.state
|
2019-05-24 18:31:01 +02:00
|
|
|
const { title, tag, teaser } = this.channel
|
2019-05-23 17:47:13 +02:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={styles.channel}>
|
|
|
|
<div>
|
2019-05-23 19:42:57 +02:00
|
|
|
<header className={styles.channelHeader}>
|
2019-05-24 18:31:01 +02:00
|
|
|
<Link to={`/channels/${tag}`}>
|
2019-05-24 13:29:31 +02:00
|
|
|
<h2 className={styles.channelTitle}>{title}</h2>
|
2019-05-23 19:42:57 +02:00
|
|
|
<CategoryImage category={title} />
|
2019-05-24 13:29:31 +02:00
|
|
|
|
|
|
|
<p className={styles.channelTeaser}>{teaser}</p>
|
|
|
|
<p>Browse the channel →</p>
|
2019-05-23 19:42:57 +02:00
|
|
|
</Link>
|
|
|
|
</header>
|
2019-05-23 17:47:13 +02:00
|
|
|
</div>
|
|
|
|
<div>
|
2019-12-13 12:22:52 +01:00
|
|
|
<SearchResults
|
|
|
|
isLoading={isLoadingChannel}
|
|
|
|
results={channelAssets}
|
|
|
|
simpleGrid
|
|
|
|
/>
|
2019-05-23 17:47:13 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|