diff --git a/client/src/components/templates/Channel.tsx b/client/src/components/templates/Channel.tsx index fbac7dc..0470185 100644 --- a/client/src/components/templates/Channel.tsx +++ b/client/src/components/templates/Channel.tsx @@ -31,6 +31,11 @@ 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) + .map(channel => channel)[0] + public state = { results: [], totalResults: 0, @@ -38,13 +43,8 @@ export default class Channel extends PureComponent { 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() { diff --git a/client/src/components/templates/Route.tsx b/client/src/components/templates/Route.tsx index 93732ed..48ce946 100644 --- a/client/src/components/templates/Route.tsx +++ b/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 = ({

{title}

{description && ( -

)} diff --git a/client/src/context/MarketProvider.tsx b/client/src/context/MarketProvider.tsx index 66bd57b..f896aba 100644 --- a/client/src/context/MarketProvider.tsx +++ b/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() {} diff --git a/client/src/context/index.tsx b/client/src/context/index.tsx index 5bb95ab..b2fc2c6 100644 --- a/client/src/context/index.tsx +++ b/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: [''] }) diff --git a/client/src/data/channels.json b/client/src/data/channels.json index b77e16d..39f6f9e 100644 --- a/client/src/data/channels.json +++ b/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." + } + ] +} diff --git a/client/src/routes/Channels.tsx b/client/src/routes/Channels.tsx index 13e6871..b60d957 100644 --- a/client/src/routes/Channels.tsx +++ b/client/src/routes/Channels.tsx @@ -7,10 +7,10 @@ import { Link } from 'react-router-dom' class Channels extends Component { public render() { return ( - +

    - {channels.map(channel => ( + {channels.items.map(channel => (
  • {channel.title} diff --git a/client/src/routes/Home.module.scss b/client/src/routes/Home.module.scss index 655c02e..6454896 100644 --- a/client/src/routes/Home.module.scss +++ b/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}); } } diff --git a/client/src/routes/Home.tsx b/client/src/routes/Home.tsx index 70d4444..33b0998 100644 --- a/client/src/routes/Home.tsx +++ b/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 { 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 { 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 { } public render() { - const { categoryAssets, isLoadingCategory, search } = this.state + const { channelAssets, isLoadingChannel, search } = this.state return ( { -

    - {title} -

    -
    - {isLoadingCategory ? ( - - ) : categoryAssets && categoryAssets.length ? ( -
    - {categoryAssets.map((asset: any) => ( - - ))} +
    +
    +
    +

    + + {title} → + +

    +

    {teaser}

    - ) : ( -
    No data sets found.
    - )} +
    +
    + {isLoadingChannel ? ( + + ) : channelAssets && channelAssets.length ? ( +
    + {channelAssets.map((asset: any) => ( + + ))} +
    + ) : ( +
    No data sets found.
    + )} +
    @@ -143,19 +146,27 @@ export default class Home extends Component {

    Explore Categories

    - {categories - .filter(category => category !== 'AI For Good') - .sort((a, b) => a.localeCompare(b)) - .map((category: string) => ( - - -

    {category}

    - - ))} + + {({ categories }) => + categories + .filter( + category => category !== 'AI For Good' + ) + .sort((a, b) => a.localeCompare(b)) // sort alphabetically + .map((category: string) => ( + + +

    {category}

    + + )) + } +