AI for good frontpage, cleanup

client/src/components/templates/Channel.tsx

@@ -31,6 +31,11 @@ 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)
+        .map(channel => channel)[0]
+
     public state = {
         results: [],
         totalResults: 0,
@@ -38,13 +43,8 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
         totalPages: 1,
         currentPage: 1,
         isLoading: true,
-        // get content data based on received channel param
-        title: channels
-            .filter(({ slug }) => slug === this.props.match.params.channel)
-            .map(channel => channel)[0].title,
-        description: channels
-            .filter(({ slug }) => slug === this.props.match.params.channel)
-            .map(channel => channel)[0].description
+        title: this.channel.title,
+        description: this.channel.description
     }
 
     public async componentDidMount() {

client/src/components/templates/Route.tsx

@@ -3,6 +3,7 @@ import Helmet from 'react-helmet'
 import Content from '../atoms/Content'
 import styles from './Route.module.scss'
 import meta from '../../data/meta.json'
+import Markdown from '../atoms/Markdown'
 
 const Route = ({
     title,
@@ -29,11 +30,9 @@ const Route = ({
                 <Content wide={wide}>
                     <h1 className={styles.title}>{title}</h1>
                     {description && (
-                        <p
+                        <Markdown
+                            text={description}
                             className={styles.description}
-                            dangerouslySetInnerHTML={{
-                                __html: description
-                            }}
                         />
                     )}
                 </Content>

client/src/context/MarketProvider.tsx

@@ -1,6 +1,13 @@
 import React, { PureComponent } from 'react'
 import { Logger, Ocean } from '@oceanprotocol/squid'
 import { Market } from '.'
+import formPublish from '../data/form-publish.json'
+
+const categories =
+    (formPublish.steps[1].fields &&
+        formPublish.steps[1].fields.categories &&
+        formPublish.steps[1].fields.categories.options) ||
+    []
 
 interface MarketProviderProps {
     ocean: Ocean
@@ -8,6 +15,7 @@ interface MarketProviderProps {
 
 interface MarketProviderState {
     totalAssets: number
+    categories: string[]
 }
 
 export default class MarketProvider extends PureComponent<
@@ -15,7 +23,8 @@ export default class MarketProvider extends PureComponent<
     MarketProviderState
 > {
     public state = {
-        totalAssets: 0
+        totalAssets: 0,
+        categories
     }
 
     public async componentDidMount() {}

client/src/context/index.tsx

@@ -22,4 +22,4 @@ export const User = React.createContext({
     message: ''
 })
 
-export const Market = React.createContext({ totalAssets: 0 })
+export const Market = React.createContext({ totalAssets: 0, categories: [''] })

client/src/data/channels.json

@@ -1,12 +1,17 @@
-[
-  {
-    "title": "AI for Good",
-    "slug": "ai-for-good",
-    "description": "AI for Good is an initiative to promote the use of artificial intelligence for good causes, such as fighting poverty, climate change, improving healthcare, safer transportation, and so on. The AI for Good Global Summit is THE leading United Nations platform for global and inclusive dialogue on AI. The Summit is hosted each year in Geneva by the ITU in partnership wutg UN Suster agencies, XPRIZE Foundtation and ACM."
-  },
-  {
-    "title": "Test Channel",
-    "slug": "test-channel",
-    "description": "Hello description."
-  }
-]
+{
+  "title": "Channels",
+  "description": "Channels are... You can do this with them... They're cool because...",
+  "items": [
+    {
+      "title": "AI for Good",
+      "slug": "ai-for-good",
+      "teaser": "AI for Good is an initiative to promote the use of artificial intelligence for good causes.",
+      "description": "AI for Good is an initiative to promote the use of artificial intelligence for good causes, such as fighting poverty, climate change, improving healthcare, safer transportation, and so on. The [AI for Good Global Summit](https://aiforgood.itu.int) is the leading United Nations platform for global and inclusive dialogue on AI. The Summit is hosted each year in Geneva by the ITU in partnership with UN Sister agencies, XPRIZE Foundation and ACM."
+    },
+    {
+      "title": "Test Channel",
+      "slug": "test-channel",
+      "description": "Hello description."
+    }
+  ]
+}

client/src/routes/Channels.tsx

@@ -7,10 +7,10 @@ import { Link } from 'react-router-dom'
 class Channels extends Component {
     public render() {
         return (
-            <Route title="Channels" description="All the Channels.">
+            <Route title={channels.title} description={channels.description}>
                 <Content>
                     <ul>
-                        {channels.map(channel => (
+                        {channels.items.map(channel => (
                             <li key={channel.title}>
                                 <Link to={`/channels/${channel.slug}`}>
                                     {channel.title}

client/src/routes/Home.module.scss

@@ -14,21 +14,53 @@
     }
 }
 
-.results {
+.channel {
+    width: 100%;
+    padding-top: $spacer * 2;
+
+    @media (min-width: $break-point--medium) {
+        display: flex;
+    }
+
+    > div {
+        &:first-child {
+            margin-right: $spacer;
+            margin-bottom: $spacer;
+
+            p {
+                margin-bottom: 0;
+            }
+        }
+
+        @media (min-width: $break-point--medium) {
+            flex: 1;
+
+            &:first-child {
+                flex: 0 0 24.5rem;
+            }
+        }
+    }
+
+    h3 {
+        font-size: $font-size-h4;
+    }
+}
+
+.channelTitle {
+    margin-top: $spacer * 2;
+}
+
+.channelResults {
     display: grid;
     grid-template-columns: 1fr;
     grid-gap: $spacer;
-    max-width: calc(18rem + #{$spacer * 2});
-    margin: auto;
 
     @media (min-width: $break-point--small) {
-        margin: 0;
-        max-width: none;
         grid-template-columns: repeat(2, 1fr);
     }
 
-    @media (min-width: $break-point--medium) {
-        grid-template-columns: repeat(3, 1fr);
+    > article {
+        min-width: calc(18rem + #{$spacer * 2.3});
     }
 }
 

client/src/routes/Home.tsx

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, Component, FormEvent } from 'react'
 import { Link } from 'react-router-dom'
-import { User } from '../context'
+import { User, Market } from '../context'
 import { Logger } from '@oceanprotocol/squid'
 import Spinner from '../components/atoms/Spinner'
 import Asset from '../components/molecules/Asset'
@@ -12,14 +12,16 @@ import Route from '../components/templates/Route'
 import styles from './Home.module.scss'
 
 import meta from '../data/meta.json'
-import formPublish from '../data/form-publish.json'
 import { History } from 'history'
 import Content from '../components/atoms/Content'
 import channels from '../data/channels.json'
 import AssetsLatest from '../components/organisms/AssetsLatest'
 
 // AI for Good channel
-const { title, slug } = channels[0]
+const channel = channels.items
+    .filter(({ slug }) => slug === 'ai-for-good')
+    .map(channel => channel)[0]
+const { title, slug, teaser } = channel
 
 interface HomeProps {
     history: History
@@ -27,40 +29,32 @@ interface HomeProps {
 
 interface HomeState {
     search?: string
-    categoryAssets?: any[]
-    isLoadingCategory?: boolean
-    latestAssets?: any[]
-    isLoadingLatest?: boolean
+    channelAssets?: any[]
+    isLoadingChannel?: boolean
 }
 
-const categories =
-    (formPublish.steps[1].fields &&
-        formPublish.steps[1].fields.categories &&
-        formPublish.steps[1].fields.categories.options) ||
-    []
-
 export default class Home extends Component<HomeProps, HomeState> {
     public static contextType = User
 
     public state = {
         search: '',
-        categoryAssets: [],
-        isLoadingCategory: true,
-        latestAssets: [],
-        isLoadingLatest: true
+        channelAssets: [],
+        isLoadingChannel: true
     }
 
     public async componentDidMount() {
-        this.getCategoryAssets()
+        this.getChannelAssets()
     }
 
-    private getCategoryAssets = async () => {
+    private getChannelAssets = async () => {
         const { ocean } = this.context
 
         const searchQuery = {
-            offset: 25,
+            offset: 4,
             page: 1,
             query: {
+                // TODO: remove dummy category
+                // categories: [title],
                 categories: ['Engineering'],
                 price: [-1, 1]
             },
@@ -72,12 +66,12 @@ export default class Home extends Component<HomeProps, HomeState> {
         try {
             const search = await ocean.aquarius.queryMetadata(searchQuery)
             this.setState({
-                categoryAssets: search.results,
-                isLoadingCategory: false
+                channelAssets: search.results,
+                isLoadingChannel: false
             })
         } catch (error) {
             Logger.error(error.message)
-            this.setState({ isLoadingCategory: false })
+            this.setState({ isLoadingChannel: false })
         }
     }
 
@@ -93,7 +87,7 @@ export default class Home extends Component<HomeProps, HomeState> {
     }
 
     public render() {
-        const { categoryAssets, isLoadingCategory, search } = this.state
+        const { channelAssets, isLoadingChannel, search } = this.state
 
         return (
             <Route
@@ -120,21 +114,30 @@ export default class Home extends Component<HomeProps, HomeState> {
                 </Content>
 
                 <Content wide>
-                    <h2 className={styles.title}>
-                        <Link to={`/channels/${slug}`}>{title}</Link>
-                    </h2>
-                    <div>
-                        {isLoadingCategory ? (
-                            <Spinner message="Loading..." />
-                        ) : categoryAssets && categoryAssets.length ? (
-                            <div className={styles.results}>
-                                {categoryAssets.map((asset: any) => (
-                                    <Asset key={asset.id} asset={asset} />
-                                ))}
+                    <div className={styles.channel}>
+                        <div>
+                            <div>
+                                <h2 className={styles.channelTitle}>
+                                    <Link to={`/channels/${slug}`}>
+                                        {title} →
+                                    </Link>
+                                </h2>
+                                <p>{teaser}</p>
                             </div>
-                        ) : (
-                            <div>No data sets found.</div>
-                        )}
+                        </div>
+                        <div>
+                            {isLoadingChannel ? (
+                                <Spinner message="Loading..." />
+                            ) : channelAssets && channelAssets.length ? (
+                                <div className={styles.channelResults}>
+                                    {channelAssets.map((asset: any) => (
+                                        <Asset key={asset.id} asset={asset} />
+                                    ))}
+                                </div>
+                            ) : (
+                                <div>No data sets found.</div>
+                            )}
+                        </div>
                     </div>
 
                     <AssetsLatest />
@@ -143,19 +146,27 @@ export default class Home extends Component<HomeProps, HomeState> {
                 <Content>
                     <h2 className={styles.title}>Explore Categories</h2>
                     <div className={styles.categories}>
-                        {categories
-                            .filter(category => category !== 'AI For Good')
-                            .sort((a, b) => a.localeCompare(b))
-                            .map((category: string) => (
-                                <Link
-                                    to={`/search?categories=${category}`}
-                                    key={category}
-                                    className={styles.category}
-                                >
-                                    <CategoryImage category={category} />
-                                    <h3>{category}</h3>
-                                </Link>
-                            ))}
+                        <Market.Consumer>
+                            {({ categories }) =>
+                                categories
+                                    .filter(
+                                        category => category !== 'AI For Good'
+                                    )
+                                    .sort((a, b) => a.localeCompare(b)) // sort alphabetically
+                                    .map((category: string) => (
+                                        <Link
+                                            to={`/search?categories=${category}`}
+                                            key={category}
+                                            className={styles.category}
+                                        >
+                                            <CategoryImage
+                                                category={category}
+                                            />
+                                            <h3>{category}</h3>
+                                        </Link>
+                                    ))
+                            }
+                        </Market.Consumer>
                     </div>
                 </Content>
             </Route>