query for actual tags, channel teaser tweaks

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;
     }
 }

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;
     }
 

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 (
             <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} />
 

client/src/components/templates/Channel.tsx

@@ -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()

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."
     }

client/src/routes/Channels.tsx

@@ -12,7 +12,7 @@ class Channels extends Component {
                     {channels.items.map(channel => (
                         <ChannelTeaser
                             key={channel.title}
-                            channel={channel.slug}
+                            channel={channel.tag}
                         />
                     ))}
                 </Content>

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;
     }
 }
 

client/src/routes/Home.tsx

@@ -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>

library.json

@@ -15,7 +15,7 @@
     },
     {
       "name": "aquarius",
-      "version": "~0.2.2"
+      "version": "~0.2.6"
     },
     {
       "name": "squid-js",