query for actual tags, channel teaser tweaks
This commit is contained in:
parent
64304644f4
commit
144fce56a3
GPG Key ID:
606EEEF3C479A91F
|
|
@ -29,13 +29,14 @@
|
|||
|
||||
.title {
|
||||
font-size: $font-size-h4;
|
||||
margin-top: $spacer * 3;
|
||||
text-align: center;
|
||||
margin-bottom: $spacer;
|
||||
color: $brand-grey-light;
|
||||
border-bottom: 1px solid $brand-grey-lighter;
|
||||
padding-bottom: $spacer / 4;
|
||||
margin-top: $spacer * 3;
|
||||
margin-bottom: $spacer / 2;
|
||||
|
||||
@media (min-width: $break-point--small) {
|
||||
text-align: left;
|
||||
margin-bottom: $spacer / 2;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
width: 100%;
|
||||
|
||||
@media (min-width: $break-point--medium) {
|
||||
padding-top: $spacer * 2;
|
||||
padding-top: $spacer / 2;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export default class ChannelTeaser extends Component<
|
|||
|
||||
// Get channel content
|
||||
public channel = channels.items
|
||||
.filter(({ slug }) => slug === this.props.channel)
|
||||
.filter(({ tag }) => tag === this.props.channel)
|
||||
.map(channel => channel)[0]
|
||||
|
||||
public state = {
|
||||
|
|
@ -44,9 +44,7 @@ export default class ChannelTeaser extends Component<
|
|||
offset: 4,
|
||||
page: 1,
|
||||
query: {
|
||||
// TODO: replace dummy category
|
||||
// categories: [this.channel.title],
|
||||
categories: ['Engineering'],
|
||||
tags: [this.channel.tag],
|
||||
price: [-1, 1]
|
||||
},
|
||||
sort: {
|
||||
|
|
@ -57,7 +55,8 @@ export default class ChannelTeaser extends Component<
|
|||
try {
|
||||
const search = await ocean.aquarius.queryMetadata(searchQuery)
|
||||
this.setState({
|
||||
channelAssets: search.results,
|
||||
// TODO: remove hacky way of getting the latest 2 assets
|
||||
channelAssets: search.results.splice(2, 2, ''),
|
||||
isLoadingChannel: false
|
||||
})
|
||||
} catch (error) {
|
||||
|
|
@ -68,13 +67,13 @@ export default class ChannelTeaser extends Component<
|
|||
|
||||
public render() {
|
||||
const { channelAssets, isLoadingChannel } = this.state
|
||||
const { title, slug, teaser } = this.channel
|
||||
const { title, tag, teaser } = this.channel
|
||||
|
||||
return (
|
||||
<div className={styles.channel}>
|
||||
<div>
|
||||
<header className={styles.channelHeader}>
|
||||
<Link to={`/channels/${slug}`}>
|
||||
<Link to={`/channels/${tag}`}>
|
||||
<h2 className={styles.channelTitle}>{title}</h2>
|
||||
<CategoryImage category={title} />
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ interface ChannelState {
|
|||
export default class Channel extends PureComponent<ChannelProps, ChannelState> {
|
||||
// get content data based on received channel param
|
||||
public channel = channels.items
|
||||
.filter(({ slug }) => slug === this.props.match.params.channel)
|
||||
.filter(({ tag }) => tag === this.props.match.params.channel)
|
||||
.map(channel => channel)[0]
|
||||
|
||||
public state = {
|
||||
|
|
@ -60,9 +60,7 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
|
|||
offset,
|
||||
page: currentPage,
|
||||
query: {
|
||||
// TODO: replace dummy category
|
||||
// categories: [this.state.title],
|
||||
categories: ['Engineering'],
|
||||
tags: [this.channel.tag],
|
||||
price: [-1, 1]
|
||||
},
|
||||
sort: {
|
||||
|
|
@ -88,9 +86,7 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
|
|||
// react-pagination starts counting at 0, we start at 1
|
||||
let toPage = data.selected + 1
|
||||
|
||||
this.props.history.push({
|
||||
search: `?page=${toPage}`
|
||||
})
|
||||
this.props.history.push({ search: `?page=${toPage}` })
|
||||
|
||||
await this.setState({ currentPage: toPage, isLoading: true })
|
||||
await this.getChannelAssets()
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
"items": [
|
||||
{
|
||||
"title": "AI For Good",
|
||||
"slug": "ai-for-good",
|
||||
"tag": "ai-for-good",
|
||||
"teaser": "AI for Good is an initiative to promote the use of artificial intelligence for good causes.",
|
||||
"description": "[AI for Good](https://ai4good.org) is an initiative to promote the use of artificial intelligence for taking action on the UN SDGs such as fighting poverty, climate change, improving healthcare, etc. The AI for Good Commons channel is aimed at helping scale AI for Good by enabling open datasets to be published and shared and connecting AI problem owners with problem solvers."
|
||||
},
|
||||
{
|
||||
"title": "Test Channel",
|
||||
"slug": "test-channel",
|
||||
"tag": "test-channel",
|
||||
"teaser": "Hello teaser.",
|
||||
"description": "Hello description."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ class Channels extends Component {
|
|||
{channels.items.map(channel => (
|
||||
<ChannelTeaser
|
||||
key={channel.title}
|
||||
channel={channel.slug}
|
||||
channel={channel.tag}
|
||||
/>
|
||||
))}
|
||||
</Content>
|
||||
|
|
|
|||
|
|
@ -16,14 +16,15 @@
|
|||
|
||||
.title {
|
||||
font-size: $font-size-h4;
|
||||
margin-top: $spacer * 3;
|
||||
text-align: center;
|
||||
margin-bottom: $spacer;
|
||||
color: $brand-grey-light;
|
||||
border-bottom: 1px solid $brand-grey-lighter;
|
||||
padding-bottom: $spacer / 4;
|
||||
margin-top: $spacer * 3;
|
||||
margin-bottom: $spacer / 2;
|
||||
|
||||
@media (min-width: $break-point--small) {
|
||||
text-align: left;
|
||||
margin-bottom: $spacer / $line-height;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@ export default class Home extends Component<HomeProps, HomeState> {
|
|||
</Content>
|
||||
|
||||
<Content wide>
|
||||
<h2 className={styles.title}>Featured Channel</h2>
|
||||
<ChannelTeaser channel="ai-for-good" />
|
||||
<AssetsLatest />
|
||||
</Content>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
},
|
||||
{
|
||||
"name": "aquarius",
|
||||
"version": "~0.2.2"
|
||||
"version": "~0.2.6"
|
||||
},
|
||||
{
|
||||
"name": "squid-js",
|
||||
|
|
|
|||
Loading…
Reference in New Issue