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

hide input label, prepare user asset list as new component

This commit is contained in:
Matthias Kretschmann 2019-02-15 15:23:13 +01:00
parent 7abb3741fc
commit f10ca30c15
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 79 additions and 25 deletions

View File

@ -0,0 +1,19 @@
@import '../../styles/variables';
.assetsUser {
margin-top: $spacer * 3;
margin-bottom: $spacer;
> div {
text-align: center;
margin-top: $spacer;
margin-bottom: $spacer;
}
}
.subTitle {
font-size: $font-size-h4;
color: $brand-grey-light;
border-bottom: 1px solid $brand-grey-lighter;
padding-bottom: $spacer / 2;
}

View File

@ -0,0 +1,54 @@
import React, { PureComponent } from 'react'
import { Link } from 'react-router-dom'
import styles from './AssetsUser.module.scss'
export default class AssetsUser extends PureComponent {
public state = { results: [] }
public componentDidMount() {
this.searchOcean()
}
private async searchOcean() {
const queryRequest: any = {
offset: 100,
page: 0,
query: {
// TODO: query all assets published by current active account
$text: {
$search: 'account ID'
}
}
}
const assets = await this.context.ocean.searchAssets(queryRequest)
this.setState({ results: assets })
}
// TODO: this should be removed and replaced by Asset.tsx component
private renderAssetBox = (asset: any) => {
const { metadata } = asset.findServiceByType('Metadata')
return (
<Link key={asset.id} to={`/asset/${asset.id}`}>
<div>{metadata.base.name}</div>
<div>{metadata.base.description}</div>
</Link>
)
}
public render() {
return (
<div className={styles.assetsUser}>
<h2 className={styles.subTitle}>Your Data Sets</h2>
{this.state.results.length ? (
this.state.results.map(asset => this.renderAssetBox(asset))
) : (
<div>
<p>None yet.</p>
<Link to="/publish">+ Publish A Data Set</Link>
</div>
)}
</div>
)
}
}

View File

@ -2,22 +2,10 @@
.home { .home {
display: block; display: block;
}
.published { label {
margin-top: $spacer * 3; height: 0;
margin-bottom: $spacer; margin: 0;
visibility: hidden;
> div {
text-align: center;
margin-top: $spacer;
margin-bottom: $spacer;
} }
} }
.subTitle {
font-size: $font-size-h4;
color: $brand-grey-light;
border-bottom: 1px solid $brand-grey-lighter;
padding-bottom: $spacer / 2;
}

View File

@ -1,9 +1,9 @@
import React, { ChangeEvent, Component, FormEvent } from 'react' import React, { ChangeEvent, Component, FormEvent } from 'react'
import { Link } from 'react-router-dom'
import Button from '../components/atoms/Button' import Button from '../components/atoms/Button'
import Form from '../components/atoms/Form/Form' import Form from '../components/atoms/Form/Form'
import Input from '../components/atoms/Form/Input' import Input from '../components/atoms/Form/Input'
import Route from '../components/templates/Route' import Route from '../components/templates/Route'
import AssetsUser from '../components/molecules/AssetsUser'
import styles from './Home.module.scss' import styles from './Home.module.scss'
import meta from '../data/meta.json' import meta from '../data/meta.json'
@ -38,14 +38,7 @@ class Home extends Component<HomeProps, HomeState> {
/> />
</Form> </Form>
<div className={styles.published}> <AssetsUser />
<h2 className={styles.subTitle}>Your Data Sets</h2>
<div>
<p>None yet.</p>
<Link to="/publish">+ Publish A Data Set</Link>
</div>
</div>
</Route> </Route>
) )
} }