category search, make multiple layouts on one page possible

client/src/components/templates/Route.tsx

@@ -24,9 +24,9 @@ const Route = ({
             {description && <meta name="description" content={description} />}
         </Helmet>
 
-        <Content wide={wide}>
-            <article>
-                <header className={styles.header}>
+        <article>
+            <header className={styles.header}>
+                <Content wide={wide}>
                     <h1 className={styles.title}>{title}</h1>
                     {description && (
                         <p
@@ -36,11 +36,11 @@ const Route = ({
                             }}
                         />
                     )}
-                </header>
+                </Content>
+            </header>
 
-                {children}
-            </article>
-        </Content>
+            {children}
+        </article>
     </div>
 )
 

client/src/routes/About.tsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import Route from '../components/templates/Route'
+import Content from '../components/atoms/Content'
 
 class About extends Component {
     public render() {
@@ -8,28 +9,31 @@ class About extends Component {
                 title="About"
                 description="A marketplace to find and publish open data sets in the Ocean Network."
             >
-                <p>
-                    Commons is built on top of the Ocean{' '}
-                    <a href="https://docs.oceanprotocol.com/concepts/testnets/#the-nile-testnet">
-                        Nile test network
-                    </a>{' '}
-                    and is targeted at enthusiastic data scientists with some
-                    crypto experience. It can be used with any Web3-capable
-                    browser, like Firefox with MetaMask installed.
-                </p>
+                <Content>
+                    <p>
+                        Commons is built on top of the Ocean{' '}
+                        <a href="https://docs.oceanprotocol.com/concepts/testnets/#the-nile-testnet">
+                            Nile test network
+                        </a>{' '}
+                        and is targeted at enthusiastic data scientists with
+                        some crypto experience. It can be used with any
+                        Web3-capable browser, like Firefox with MetaMask
+                        installed.
+                    </p>
 
-                <ul>
-                    <li>
-                        <a href="https://blog.oceanprotocol.com/the-commons-marketplace-c57a44288314">
-                            Read the blog post →
-                        </a>
-                    </li>
-                    <li>
-                        <a href="https://github.com/oceanprotocol/commons">
-                            Check out oceanprotocol/commons on GitHub →
-                        </a>
-                    </li>
-                </ul>
+                    <ul>
+                        <li>
+                            <a href="https://blog.oceanprotocol.com/the-commons-marketplace-c57a44288314">
+                                Read the blog post →
+                            </a>
+                        </li>
+                        <li>
+                            <a href="https://github.com/oceanprotocol/commons">
+                                Check out oceanprotocol/commons on GitHub →
+                            </a>
+                        </li>
+                    </ul>
+                </Content>
             </Route>
         )
     }

client/src/routes/Details/index.tsx

@@ -5,6 +5,7 @@ import Spinner from '../../components/atoms/Spinner'
 import { User } from '../../context'
 import AssetDetails from './AssetDetails'
 import stylesApp from '../../App.module.scss'
+import Content from '../../components/atoms/Content'
 
 interface DetailsProps {
     location: Location
@@ -46,7 +47,9 @@ export default class Details extends Component<DetailsProps, DetailsState> {
 
         return metadata.base.name !== '' ? (
             <Route title={metadata.base.name}>
-                <AssetDetails metadata={metadata} ddo={ddo} />
+                <Content>
+                    <AssetDetails metadata={metadata} ddo={ddo} />
+                </Content>
             </Route>
         ) : (
             <div className={stylesApp.loader}>

client/src/routes/Faucet.tsx

@@ -6,6 +6,7 @@ import Spinner from '../components/atoms/Spinner'
 import { User } from '../context'
 import Web3message from '../components/organisms/Web3message'
 import styles from './Faucet.module.scss'
+import Content from '../components/atoms/Content'
 
 interface FaucetState {
     isLoading: boolean
@@ -101,19 +102,21 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
                 title="Faucet"
                 description="Shower yourself with some Ether for Ocean's Nile test network."
             >
-                <Web3message />
+                <Content>
+                    <Web3message />
 
-                <div className={styles.action}>
-                    {isLoading ? (
-                        <Spinner message="Getting Ether..." />
-                    ) : error ? (
-                        <this.Error />
-                    ) : success ? (
-                        <this.Success />
-                    ) : (
-                        isWeb3 && <this.Action />
-                    )}
-                </div>
+                    <div className={styles.action}>
+                        {isLoading ? (
+                            <Spinner message="Getting Ether..." />
+                        ) : error ? (
+                            <this.Error />
+                        ) : success ? (
+                            <this.Success />
+                        ) : (
+                            isWeb3 && <this.Action />
+                        )}
+                    </div>
+                </Content>
             </Route>
         )
     }

client/src/routes/History.tsx

@@ -3,16 +3,18 @@ import Route from '../components/templates/Route'
 import AssetsUser from '../components/organisms/AssetsUser'
 import Web3message from '../components/organisms/Web3message'
 import { User } from '../context'
+import Content from '../components/atoms/Content'
 
 export default class History extends Component {
     public render() {
         return (
             <Route title="History">
-                {(!this.context.isLogged || !this.context.isOceanNetwork) && (
-                    <Web3message />
-                )}
+                <Content>
+                    {(!this.context.isLogged ||
+                        !this.context.isOceanNetwork) && <Web3message />}
 
-                <AssetsUser list />
+                    <AssetsUser list />
+                </Content>
             </Route>
         )
     }

client/src/routes/Home.tsx

@@ -1,4 +1,5 @@
 import React, { ChangeEvent, Component, FormEvent } from 'react'
+import { Link } from 'react-router-dom'
 import { User } from '../context'
 import { Logger } from '@oceanprotocol/squid'
 import Spinner from '../components/atoms/Spinner'
@@ -11,7 +12,9 @@ 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'
 
 interface HomeProps {
     history: History
@@ -19,46 +22,15 @@ interface HomeProps {
 
 interface HomeState {
     search?: string
-    categoryAssets?: Array<any>
+    categoryAssets?: any[]
     isLoading?: boolean
 }
 
-const categories = [
-    'AI For Good',
-    'Image Recognition',
-    'Dataset Of Datasets',
-    'Language',
-    'Performing Arts',
-    'Visual Arts & Design',
-    'Philosophy',
-    'History',
-    'Theology',
-    'Anthropology & Archeology',
-    'Sociology',
-    'Psychology',
-    'Politics',
-    'Interdisciplinary',
-    'Economics & Finance',
-    'Demography',
-    'Biology',
-    'Chemistry',
-    'Physics & Energy',
-    'Earth & Climate',
-    'Space & Astronomy',
-    'Mathematics',
-    'Computer Technology',
-    'Engineering',
-    'Agriculture & Bio Engineering',
-    'Transportation',
-    'Urban Planning',
-    'Medicine',
-    'Business & Management',
-    'Sports & Recreation',
-    'Communication & Journalism',
-    'Deep Learning',
-    'Law',
-    'Other'
-]
+const categories =
+    (formPublish.steps[1].fields &&
+        formPublish.steps[1].fields.categories &&
+        formPublish.steps[1].fields.categories.options) ||
+    []
 
 class Home extends Component<HomeProps, HomeState> {
     public state = {
@@ -78,7 +50,7 @@ class Home extends Component<HomeProps, HomeState> {
             offset: 25,
             page: 1,
             query: {
-                categories: ["Economics & Finance"],
+                categories: ['Engineering'],
                 price: [-1, 1]
             },
             sort: {
@@ -99,55 +71,59 @@ class Home extends Component<HomeProps, HomeState> {
     }
 
     public render() {
+        const { categoryAssets, isLoading, search } = this.state
         return (
             <Route
                 title={meta.title}
                 description={meta.description}
                 className={styles.home}
-                wide
             >
-                <Form onSubmit={this.searchAssets} minimal>
-                    <Input
-                        type="search"
-                        name="search"
-                        label="Search for data sets"
-                        placeholder="e.g. shapes of plants"
-                        value={this.state.search}
-                        onChange={this.inputChange}
-                        group={
-                            <Button primary disabled={!this.state.search}>
-                                Search
-                            </Button>
-                        }
-                    />
-                </Form>
-                <div>
+                <Content>
+                    <Form onSubmit={this.searchAssets} minimal>
+                        <Input
+                            type="search"
+                            name="search"
+                            label="Search for data sets"
+                            placeholder="e.g. shapes of plants"
+                            value={search}
+                            onChange={this.inputChange}
+                            group={
+                                <Button primary disabled={!search}>
+                                    Search
+                                </Button>
+                            }
+                        />
+                    </Form>
+                </Content>
+
+                <Content wide>
                     <h4>AI for Good</h4>
                     <div>
-                        {
-                            this.state.isLoading ? (
-                                <Spinner message="Loading..." />
-                            ) : this.state.categoryAssets && this.state.categoryAssets.length ? (
-                                <div className={styles.results}>
-                                    {this.state.categoryAssets.map((asset: any) => (
-                                        <Asset key={asset.id} asset={asset} />
-                                    ))}
-                                </div>
-                            ) : (
-                                <div>No data sets found.</div>
-                            )
-                        }
+                        {isLoading ? (
+                            <Spinner message="Loading..." />
+                        ) : categoryAssets && categoryAssets.length ? (
+                            <div className={styles.results}>
+                                {categoryAssets.map((asset: any) => (
+                                    <Asset key={asset.id} asset={asset} />
+                                ))}
+                            </div>
+                        ) : (
+                            <div>No data sets found.</div>
+                        )}
                     </div>
                     <h4>Explore Categories</h4>
                     <div className={styles.categories}>
                         {categories.map((category: string) => (
-                            <div key={category}>
-                                <CategoryImage category={category}/>
+                            <Link
+                                to={`/search?categories=${category}`}
+                                key={category}
+                            >
+                                <CategoryImage category={category} />
                                 {category}
-                            </div>
+                            </Link>
                         ))}
                     </div>
-                </div>
+                </Content>
             </Route>
         )
     }

client/src/routes/NotFound.tsx

@@ -1,9 +1,14 @@
 import React, { Component } from 'react'
 import Route from '../components/templates/Route'
+import Content from '../components/atoms/Content'
 
 class NotFound extends Component {
     public render() {
-        return <Route title="404 - Not Found">Not Found</Route>
+        return (
+            <Route title="404 - Not Found">
+                <Content>Not Found</Content>
+            </Route>
+        )
     }
 }
 

client/src/routes/Publish/index.tsx

@@ -10,6 +10,7 @@ import Progress from './Progress'
 import ReactGA from 'react-ga'
 
 import { steps } from '../../data/form-publish.json'
+import Content from '../../components/atoms/Content'
 
 type AssetType = 'dataset' | 'algorithm' | 'container' | 'workflow' | 'other'
 
@@ -319,33 +320,37 @@ class Publish extends Component<{}, PublishState> {
                 title="Publish"
                 description="Publish a new data set into the Ocean Protocol Network."
             >
-                {(!this.context.isLogged || !this.context.isOceanNetwork) && (
-                    <Web3message />
-                )}
+                <Content>
+                    {(!this.context.isLogged ||
+                        !this.context.isOceanNetwork) && <Web3message />}
 
-                <Progress steps={steps} currentStep={this.state.currentStep} />
+                    <Progress
+                        steps={steps}
+                        currentStep={this.state.currentStep}
+                    />
 
-                <Form onSubmit={this.registerAsset}>
-                    {steps.map((step: any, index: number) => (
-                        <Step
-                            key={index}
-                            index={index}
-                            title={step.title}
-                            description={step.description}
-                            currentStep={this.state.currentStep}
-                            fields={step.fields}
-                            inputChange={this.inputChange}
-                            inputToArrayChange={this.inputToArrayChange}
-                            state={this.state}
-                            next={this.next}
-                            prev={this.prev}
-                            totalSteps={steps.length}
-                            tryAgain={this.tryAgain}
-                            toStart={this.toStart}
-                            content={step.content}
-                        />
-                    ))}
-                </Form>
+                    <Form onSubmit={this.registerAsset}>
+                        {steps.map((step: any, index: number) => (
+                            <Step
+                                key={index}
+                                index={index}
+                                title={step.title}
+                                description={step.description}
+                                currentStep={this.state.currentStep}
+                                fields={step.fields}
+                                inputChange={this.inputChange}
+                                inputToArrayChange={this.inputToArrayChange}
+                                state={this.state}
+                                next={this.next}
+                                prev={this.prev}
+                                totalSteps={steps.length}
+                                tryAgain={this.tryAgain}
+                                toStart={this.toStart}
+                                content={step.content}
+                            />
+                        ))}
+                    </Form>
+                </Content>
             </Route>
         )
     }

client/src/routes/Search.tsx

@@ -8,6 +8,7 @@ import { User } from '../context'
 import Asset from '../components/molecules/Asset'
 import Pagination from '../components/molecules/Pagination'
 import styles from './Search.module.scss'
+import Content from '../components/atoms/Content'
 
 interface SearchProps {
     location: Location
@@ -22,6 +23,7 @@ interface SearchState {
     currentPage: number
     isLoading: boolean
     searchTerm: string
+    searchCategories: string
 }
 
 export default class Search extends PureComponent<SearchProps, SearchState> {
@@ -32,17 +34,25 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
         totalPages: 1,
         currentPage: 1,
         isLoading: true,
-        searchTerm: ''
+        searchTerm: '',
+        searchCategories: ''
     }
 
     public async componentDidMount() {
         const searchTerm = await queryString.parse(this.props.location.search)
             .text
-        const searchPage = queryString.parse(this.props.location.search).page
+        const searchPage = await queryString.parse(this.props.location.search)
+            .page
+        const searchCategories = await queryString.parse(
+            this.props.location.search
+        ).categories
 
-        await this.setState({
-            searchTerm: encodeURIComponent(`${searchTerm}`)
-        })
+        if (searchTerm || searchCategories) {
+            await this.setState({
+                searchTerm: encodeURIComponent(`${searchTerm}`),
+                searchCategories: `${searchCategories}`
+            })
+        }
 
         // switch to respective page if query string is present
         if (searchPage) {
@@ -55,12 +65,14 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
 
     private searchAssets = async () => {
         const { ocean } = this.context
+        const { offset, currentPage, searchTerm, searchCategories } = this.state
 
         const searchQuery = {
-            offset: this.state.offset,
-            page: this.state.currentPage,
+            offset,
+            page: currentPage,
             query: {
-                text: [decodeURIComponent(this.state.searchTerm)],
+                text: [decodeURIComponent(searchTerm)],
+                categories: [decodeURIComponent(searchCategories)],
                 price: [-1, 1]
             },
             sort: {
@@ -113,6 +125,7 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
 
         return (
             <Route title="Search" wide>
+                <Content wide>
                 {totalResults > 0 && (
                     <h2
                         className={styles.resultsTitle}
@@ -120,16 +133,17 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
                             __html: `${totalResults} results for <span>${decodeURIComponent(
                                 this.state.searchTerm
                             )}</span>`
-                        }}
-                    />
-                )}
-                {this.renderResults()}
+                            }}
+                        />
+                    )}
+                    {this.renderResults()}
 
-                <Pagination
-                    totalPages={totalPages}
-                    currentPage={currentPage}
-                    handlePageClick={this.handlePageClick}
-                />
+                    <Pagination
+                        totalPages={totalPages}
+                        currentPage={currentPage}
+                        handlePageClick={this.handlePageClick}
+                    />
+                </Content>
             </Route>
         )
     }

client/src/routes/Styleguide.tsx

@@ -5,6 +5,7 @@ import Input from '../components/atoms/Form/Input'
 import Route from '../components/templates/Route'
 import styles from './Styleguide.module.scss'
 import form from '../data/form-styleguide.json'
+import Content from '../components/atoms/Content'
 
 class Styleguide extends Component {
     public formFields = (entries: any[]) =>
@@ -25,18 +26,22 @@ class Styleguide extends Component {
         const entries = Object.entries(form.fields)
         return (
             <Route title="Styleguide" className={styles.styleguide}>
-                <div className={styles.buttons}>
-                    <Button>I am a button</Button>
-                    <Button primary>I am a primary button</Button>
-                    <Button href="https://hello.com">
-                        I am a link disguised as a button
-                    </Button>
-                    <Button link>I am a button disguised as a text link</Button>
-                </div>
+                <Content>
+                    <div className={styles.buttons}>
+                        <Button>I am a button</Button>
+                        <Button primary>I am a primary button</Button>
+                        <Button href="https://hello.com">
+                            I am a link disguised as a button
+                        </Button>
+                        <Button link>
+                            I am a button disguised as a text link
+                        </Button>
+                    </div>
 
-                <Form title={form.title} description={form.description}>
-                    {this.formFields(entries)}
-                </Form>
+                    <Form title={form.title} description={form.description}>
+                        {this.formFields(entries)}
+                    </Form>
+                </Content>
             </Route>
         )
     }