new channel termplate, channels route, use json data for everything

client/src/Routes.tsx

@@ -10,12 +10,14 @@ import Publish from './routes/Publish/'
 import Search from './routes/Search'
 import Faucet from './routes/Faucet'
 import History from './routes/History'
-import Channel from './routes/Channel'
+import Channels from './routes/Channels'
 import Styleguide from './routes/Styleguide'
 
+import Channel from './components/templates/Channel'
+
 const Routes = () => (
     <Switch>
-        <Route exact component={withTracker(Home)} path="/" />
+        <Route component={withTracker(Home)} exact path="/" />
         <Route component={withTracker(Styleguide)} path="/styleguide" />
         <Route component={withTracker(About)} path="/about" />
         <Route component={withTracker(Publish)} path="/publish" />
@@ -23,6 +25,7 @@ const Routes = () => (
         <Route component={withTracker(Details)} path="/asset/:did" />
         <Route component={withTracker(Faucet)} path="/faucet" />
         <Route component={withTracker(History)} path="/history" />
+        <Route component={withTracker(Channels)} exact path="/channels" />
         <Route component={withTracker(Channel)} path="/channels/:channel" />
         <Route component={withTracker(NotFound)} />
     </Switch>

client/src/components/templates/Channel.module.scss

@@ -1,4 +1,4 @@
-@import '../styles/variables';
+@import '../../styles/variables';
 
 .results {
     display: grid;

client/src/components/templates/Channel.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from 'react-testing-library'
 import Channel from './Channel'
-import { User } from '../context'
+import { User } from '../../context'
 import { createMemoryHistory } from 'history'
 
 describe('Channel', () => {
@@ -36,11 +36,8 @@ describe('Channel', () => {
                 }}
             >
                 <Channel
-                    location={{
+                    match={{
-                        search: '',
+                        params: { channel: 'ai-for-good' }
-                        pathname: '/channel/AI for Good',
-                        state: '',
-                        hash: ''
                     }}
                     history={history}
                 />

client/src/components/templates/Channel.tsx

@@ -1,23 +1,21 @@
 import React, { PureComponent } from 'react'
-import queryString from 'query-string'
-import { History, Location } from 'history'
 import { Logger } from '@oceanprotocol/squid'
-import Spinner from '../components/atoms/Spinner'
+import { History } from 'history'
-import Route from '../components/templates/Route'
+import Spinner from '../../components/atoms/Spinner'
-import { User } from '../context'
+import Route from '../../components/templates/Route'
-import Asset from '../components/molecules/Asset'
+import { User } from '../../context'
-import Pagination from '../components/molecules/Pagination'
+import Asset from '../../components/molecules/Asset'
+import Pagination from '../../components/molecules/Pagination'
 import styles from './Channel.module.scss'
-import Content from '../components/atoms/Content'
+import Content from '../../components/atoms/Content'
-import channels from '../data/channels.json'
+import channels from '../../data/channels.json'
-
-const { title, description } = channels[0]
 
 interface ChannelProps {
-    location: Location
     history: History
     match: {
-        params: any
+        params: {
+            channel: string
+        }
     }
 }
 
@@ -28,8 +26,8 @@ interface ChannelState {
     totalPages: number
     currentPage: number
     isLoading: boolean
-    searchTerm: string
+    title: string
-    searchCategories: string
+    description: string
 }
 
 export default class Channel extends PureComponent<ChannelProps, ChannelState> {
@@ -40,50 +38,30 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
         totalPages: 1,
         currentPage: 1,
         isLoading: true,
-        searchTerm: '',
+        // get content data based on received channel param
-        searchCategories: ''
+        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
     }
 
     public async componentDidMount() {
-        const { match } = this.props
-
-        // TODO: use next line to use channel name
-        // const category = match.params.channel
-        const category = 'Engineering'
-
-        const { page } = queryString.parse(this.props.location.search)
-
-        if (category) {
-            await this.setState({
-                searchCategories: encodeURIComponent(`${category}`)
-            })
-        }
-
-        // switch to respective page if query string is present
-        if (page) {
-            const currentPage = Number(page)
-            await this.setState({ currentPage })
-        }
-
         this.getChannelAssets()
     }
 
     private getChannelAssets = async () => {
         const { ocean } = this.context
-        const { offset, currentPage, searchTerm, searchCategories } = this.state
+        const { offset, currentPage } = this.state
-
-        const queryValues =
-            searchCategories !== '' && searchTerm !== ''
-                ? { text: [searchTerm], categories: [searchCategories] }
-                : searchCategories !== '' && searchTerm === ''
-                ? { categories: [searchCategories] }
-                : { text: [searchTerm] }
 
         const searchQuery = {
             offset,
             page: currentPage,
             query: {
-                ...queryValues,
+                // TODO: replace dummy category
+                // categories: [this.state.title],
+                categories: ['Engineering'],
                 price: [-1, 1]
             },
             sort: {
@@ -110,8 +88,7 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
         let toPage = data.selected + 1
 
         this.props.history.push({
-            pathname: this.props.location.pathname,
+            search: `?page=${toPage}`
-            search: `?text=${this.state.searchTerm}&page=${toPage}`
         })
 
         await this.setState({ currentPage: toPage, isLoading: true })
@@ -132,7 +109,7 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
         )
 
     public render() {
-        const { totalPages, currentPage } = this.state
+        const { title, description, totalPages, currentPage } = this.state
 
         return (
             <Route title={title} description={description}>

client/src/data/channels.json

@@ -1,6 +1,12 @@
 [
   {
     "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."
   }
 ]

client/src/data/menu.json

@@ -1,4 +1,8 @@
 [
+  {
+    "title": "Channels",
+    "link": "/channels"
+  },
   {
     "title": "Publish",
     "link": "/publish"

client/src/routes/Channels.tsx

@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+import Route from '../components/templates/Route'
+import Content from '../components/atoms/Content'
+import channels from '../data/channels.json'
+import { Link } from 'react-router-dom'
+
+class Channels extends Component {
+    public render() {
+        return (
+            <Route title="Channels" description="All the Channels.">
+                <Content>
+                    <ul>
+                        {channels.map(channel => (
+                            <li key={channel.title}>
+                                <Link to={`/channels/${channel.slug}`}>
+                                    {channel.title}
+                                </Link>
+                            </li>
+                        ))}
+                    </ul>
+                </Content>
+            </Route>
+        )
+    }
+}
+
+export default Channels

client/src/routes/Home.tsx

@@ -1,6 +1,5 @@
 import React, { ChangeEvent, Component, FormEvent } from 'react'
 import { Link } from 'react-router-dom'
-import slugify from '@sindresorhus/slugify'
 import { User } from '../context'
 import { Logger } from '@oceanprotocol/squid'
 import Spinner from '../components/atoms/Spinner'
@@ -19,7 +18,8 @@ import Content from '../components/atoms/Content'
 import channels from '../data/channels.json'
 import AssetsLatest from '../components/organisms/AssetsLatest'
 
-const { title, description } = channels[0]
+// AI for Good channel
+const { title, slug } = channels[0]
 
 interface HomeProps {
     history: History
@@ -121,7 +121,7 @@ export default class Home extends Component<HomeProps, HomeState> {
 
                 <Content wide>
                     <h2 className={styles.title}>
-                        <Link to={`/channels/${slugify(title)}`}>{title}</Link>
+                        <Link to={`/channels/${slug}`}>{title}</Link>
                     </h2>
                     <div>
                         {isLoadingCategory ? (