mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
files reorganization
This commit is contained in:
parent
117a5a3d2e
commit
f834e2e42e
@ -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>
|
||||
|
@ -1,4 +1,4 @@
|
||||
@import '../styles/variables';
|
||||
@import '../../styles/variables';
|
||||
|
||||
.header {
|
||||
margin-bottom: $spacer;
|
@ -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
|
@ -10,5 +10,9 @@
|
||||
{
|
||||
"title": "About",
|
||||
"link": "/about"
|
||||
},
|
||||
{
|
||||
"title": "Styleguide",
|
||||
"link": "/styleguide"
|
||||
}
|
||||
]
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
18
src/routes/Home.module.scss
Normal file
18
src/routes/Home.module.scss
Normal 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%;
|
||||
// }
|
||||
}
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user