1
0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00

files reorganization

This commit is contained in:
Matthias Kretschmann 2019-02-08 14:22:40 +01:00
parent 117a5a3d2e
commit f834e2e42e
Signed by: m
GPG Key ID: 606EEEF3C479A91F
13 changed files with 69 additions and 84 deletions

View File

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

View File

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

View File

@ -1,19 +1,21 @@
import React from 'react'
import Helmet from 'react-helmet'
import Content from '../components/Content'
import styles from './Page.module.scss'
import meta from '../data/meta.json'
import Content from '../Content'
import styles from './Route.module.scss'
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

View File

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

View File

@ -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;
}
}

View File

@ -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>
}
}

View File

@ -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>
)
}
}

View File

@ -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%;
// }
}

View File

@ -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}>
<Content>
<Link to={'/styleguide'}>Styleguide</Link>
<div>
<Form onSubmit={this.searchAssets}>
<Input
type="search"
name="search"
label="Search"
value={this.state.search}
onChange={this.inputChange}
/>
<Button>Search</Button>
</Form>
</div>
</Content>
</div>
<Route title="Home" className={styles.home}>
<Form onSubmit={this.searchAssets}>
<Input
type="search"
name="search"
label="Search"
value={this.state.search}
onChange={this.inputChange}
/>
<Button>Search</Button>
</Form>
</Route>
)
}

View File

@ -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>
}
}

View File

@ -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>
)
}
}

View File

@ -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>
)
}
}

View File

@ -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>
)
}
}