From 144fce56a3845e6e448f6a04dfa53f862b22aaa3 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 24 May 2019 18:31:01 +0200 Subject: [PATCH] query for actual tags, channel teaser tweaks --- .../components/organisms/AssetsLatest.module.scss | 7 ++++--- .../components/organisms/ChannelTeaser.module.scss | 2 +- client/src/components/organisms/ChannelTeaser.tsx | 13 ++++++------- client/src/components/templates/Channel.tsx | 10 +++------- client/src/data/channels.json | 4 ++-- client/src/routes/Channels.tsx | 2 +- client/src/routes/Home.module.scss | 7 ++++--- client/src/routes/Home.tsx | 1 + library.json | 2 +- 9 files changed, 23 insertions(+), 25 deletions(-) diff --git a/client/src/components/organisms/AssetsLatest.module.scss b/client/src/components/organisms/AssetsLatest.module.scss index ebc5e07..153efb8 100644 --- a/client/src/components/organisms/AssetsLatest.module.scss +++ b/client/src/components/organisms/AssetsLatest.module.scss @@ -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; } } diff --git a/client/src/components/organisms/ChannelTeaser.module.scss b/client/src/components/organisms/ChannelTeaser.module.scss index 1dcd54c..955dc5f 100644 --- a/client/src/components/organisms/ChannelTeaser.module.scss +++ b/client/src/components/organisms/ChannelTeaser.module.scss @@ -4,7 +4,7 @@ width: 100%; @media (min-width: $break-point--medium) { - padding-top: $spacer * 2; + padding-top: $spacer / 2; display: flex; } diff --git a/client/src/components/organisms/ChannelTeaser.tsx b/client/src/components/organisms/ChannelTeaser.tsx index 53a2619..3c87b6b 100644 --- a/client/src/components/organisms/ChannelTeaser.tsx +++ b/client/src/components/organisms/ChannelTeaser.tsx @@ -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 (
- +

{title}

diff --git a/client/src/components/templates/Channel.tsx b/client/src/components/templates/Channel.tsx index 7b9d8f0..8a0eb81 100644 --- a/client/src/components/templates/Channel.tsx +++ b/client/src/components/templates/Channel.tsx @@ -34,7 +34,7 @@ interface ChannelState { export default class Channel extends PureComponent { // 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 { 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 { // 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() diff --git a/client/src/data/channels.json b/client/src/data/channels.json index 500ad78..cfd5dc3 100644 --- a/client/src/data/channels.json +++ b/client/src/data/channels.json @@ -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." } diff --git a/client/src/routes/Channels.tsx b/client/src/routes/Channels.tsx index 7565d20..c42a38a 100644 --- a/client/src/routes/Channels.tsx +++ b/client/src/routes/Channels.tsx @@ -12,7 +12,7 @@ class Channels extends Component { {channels.items.map(channel => ( ))} diff --git a/client/src/routes/Home.module.scss b/client/src/routes/Home.module.scss index 6b29924..4629ce5 100644 --- a/client/src/routes/Home.module.scss +++ b/client/src/routes/Home.module.scss @@ -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; } } diff --git a/client/src/routes/Home.tsx b/client/src/routes/Home.tsx index 8c957d5..b5a5946 100644 --- a/client/src/routes/Home.tsx +++ b/client/src/routes/Home.tsx @@ -68,6 +68,7 @@ export default class Home extends Component { +

Featured Channel

 diff --git a/library.json b/library.json index f05484f..577346e 100644 --- a/library.json +++ b/library.json @@ -15,7 +15,7 @@ }, { "name": "aquarius", - "version": "~0.2.2" + "version": "~0.2.6" }, { "name": "squid-js",