files reorganization

src/Routes.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { Route, Switch } from 'react-router-dom'
 
-import About from './pages/About'
+import About from './routes/About'
-import Details from './pages/Details'
+import Details from './routes/Details'
-import Home from './pages/Home'
+import Home from './routes/Home'
-import NotFound from './pages/NotFound'
+import NotFound from './routes/NotFound'
-import Publish from './pages/Publish'
+import Publish from './routes/Publish'
-import Search from './pages/Search'
+import Search from './routes/Search'
-import Styleguide from './pages/Styleguide'
+import Styleguide from './routes/Styleguide'
 
 const Routes = () => (
     <Switch>

src/components/templates/Route.module.scss

@@ -1,4 +1,4 @@
-@import '../styles/variables';
+@import '../../styles/variables';
 
 .header {
     margin-bottom: $spacer;

src/components/templates/Route.tsx

@@ -1,19 +1,21 @@
 import React from 'react'
 import Helmet from 'react-helmet'
-import Content from '../components/Content'
+import Content from '../Content'
-import styles from './Page.module.scss'
+import styles from './Route.module.scss'
-import meta from '../data/meta.json'
+import meta from '../../data/meta.json'
 
-const Page = ({
+const Route = ({
     title,
     wide,
-    children
+    children,
+    className
 }: {
     title: string
     children: any
     wide?: boolean
+    className?: string
 }) => (
-    <>
+    <div className={className}>
         <Helmet defaultTitle={meta.title} titleTemplate={`%s - ${meta.title}`}>
             <title>{title}</title>
         </Helmet>
@@ -25,7 +27,7 @@ const Page = ({
 
             {children}
         </Content>
-    </>
+    </div>
 )
 
-export default Page
+export default Route

src/data/menu.json

@@ -10,5 +10,9 @@
   {
     "title": "About",
     "link": "/about"
+  },
+  {
+    "title": "Styleguide",
+    "link": "/styleguide"
   }
 ]

src/pages/Home.module.scss

@@ -1,32 +0,0 @@
-@import '../styles/variables';
-
-.home {
-    background: $brand-black;
-    color: $brand-white;
-    min-height: calc(100vh - #{$page-frame} * 2);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    padding-top: 4rem;
-    padding-bottom: 4rem;
-
-    > div {
-        text-align: center;
-        width: 100%;
-    }
-}
-
-.form {
-    width: 100%;
-    background: $brand-grey-lighter;
-    margin: 0 auto;
-    max-width: 40rem;
-    padding: $spacer;
-    margin-top: 4rem;
-
-    fieldset {
-        border: 0;
-        padding: 0;
-    }
-}

src/routes/About.tsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react'
-import Page from '../templates/Page'
+import Route from '../components/templates/Route'
 
 class About extends Component {
     public render() {
-        return <Page title="About">Hello About</Page>
+        return <Route title="About">Hello About</Route>
     }
 }
 

src/routes/Details.tsx

@@ -1,6 +1,6 @@
 import { Logger } from '@oceanprotocol/squid'
 import React, { Component } from 'react'
-import Page from '../templates/Page'
+import Route from '../components/templates/Route'
 import Button from '../components/atoms/Button'
 import { User } from '../context/User'
 
@@ -65,13 +65,13 @@ export default class Details extends Component<DetailsProps, DetailsState> {
 
     public render() {
         return (
-            <Page title={'Details'}>
+            <Route title={'Details'}>
                 {this.state.metadata ? (
                     this.showDetails(this.state.ddo)
                 ) : (
                     <div>Loading</div>
                 )}
-            </Page>
+            </Route>
         )
     }
 }

src/routes/Home.module.scss

@@ -0,0 +1,18 @@
+@import '../styles/variables';
+
+.home {
+    // background: $brand-black;
+    // color: $brand-white;
+    // min-height: calc(100vh - #{$page-frame} * 2);
+    // display: flex;
+    // align-items: center;
+    // justify-content: center;
+    // flex-wrap: wrap;
+    // padding-top: 4rem;
+    // padding-bottom: 4rem;
+
+    // > div {
+    //     text-align: center;
+    //     width: 100%;
+    // }
+}

src/routes/Home.tsx

@@ -1,9 +1,8 @@
 import React, { ChangeEvent, Component, FormEvent } from 'react'
-import { Link } from 'react-router-dom'
 import Button from '../components/atoms/Button'
 import Form from '../components/atoms/Form/Form'
 import Input from '../components/atoms/Form/Input'
-import Content from '../components/Content'
+import Route from '../components/templates/Route'
 import styles from './Home.module.scss'
 
 interface HomeState {
@@ -19,24 +18,18 @@ class Home extends Component<HomeProps, HomeState> {
 
     public render() {
         return (
-            <div className={styles.home}>
+            <Route title="Home" className={styles.home}>
-                <Content>
+                <Form onSubmit={this.searchAssets}>
-                    <Link to={'/styleguide'}>Styleguide</Link>
+                    <Input
-
+                        type="search"
-                    <div>
+                        name="search"
-                        <Form onSubmit={this.searchAssets}>
+                        label="Search"
-                            <Input
+                        value={this.state.search}
-                                type="search"
+                        onChange={this.inputChange}
-                                name="search"
+                    />
-                                label="Search"
+                    <Button>Search</Button>
-                                value={this.state.search}
+                </Form>
-                                onChange={this.inputChange}
+            </Route>
-                            />
-                            <Button>Search</Button>
-                        </Form>
-                    </div>
-                </Content>
-            </div>
         )
     }
 

src/routes/NotFound.tsx

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

src/routes/Publish.tsx

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, Component, FormEvent } from 'react'
-import Page from '../templates/Page'
+import Route from '../components/templates/Route'
 import Button from '../components/atoms/Button'
 import Form from '../components/atoms/Form/Form'
 import Input from '../components/atoms/Form/Input'
@@ -116,7 +116,7 @@ class Publish extends Component<{}, PublishState> {
         const entries = Object.entries(form.fields)
 
         return (
-            <Page title="Publish">
+            <Route title="Publish">
                 <Form
                     title={form.title}
                     description={form.description}
@@ -138,7 +138,7 @@ class Publish extends Component<{}, PublishState> {
                         }
                     </User.Consumer>
                 </Form>
-            </Page>
+            </Route>
         )
     }
 }

src/routes/Search.tsx

@@ -1,7 +1,7 @@
 import queryString from 'query-string'
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
-import Page from '../templates/Page'
+import Route from '../components/templates/Route'
 import { provideOcean } from '../ocean'
 
 interface SearchState {
@@ -46,13 +46,13 @@ export default class Search extends Component<SearchProps, SearchState> {
 
     public render() {
         return (
-            <Page title="Search Results" wide>
+            <Route title="Search Results" wide>
                 {this.state.results.length ? (
                     this.state.results.map(asset => this.renderAssetBox(asset))
                 ) : (
                     <div>No data sets yet</div>
                 )}
-            </Page>
+            </Route>
         )
     }
 }

src/routes/Styleguide.tsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import Button from '../components/atoms/Button'
 import Form from '../components/atoms/Form/Form'
 import Input from '../components/atoms/Form/Input'
-import Page from '../templates/Page'
+import Route from '../components/templates/Route'
 
 import form from '../data/form-styleguide.json'
 
@@ -24,7 +24,7 @@ class Styleguide extends Component {
     public render() {
         const entries = Object.entries(form.fields)
         return (
-            <Page title="Styleguide">
+            <Route title="Styleguide">
                 <Button>I am a button</Button>
                 <Button primary>I am a primary button</Button>
                 <Button href="https://hello.com">
@@ -34,7 +34,7 @@ class Styleguide extends Component {
                 <Form title={form.title} description={form.description}>
                     {this.formFields(entries)}
                 </Form>
-            </Page>
+            </Route>
         )
     }
 }