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:
parent
7abb3741fc
commit
f10ca30c15
19
src/components/molecules/AssetsUser.module.scss
Normal file
19
src/components/molecules/AssetsUser.module.scss
Normal 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;
|
||||
}
|
54
src/components/molecules/AssetsUser.tsx
Normal file
54
src/components/molecules/AssetsUser.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
}
|
@ -2,22 +2,10 @@
|
||||
|
||||
.home {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.published {
|
||||
margin-top: $spacer * 3;
|
||||
margin-bottom: $spacer;
|
||||
|
||||
> div {
|
||||
text-align: center;
|
||||
margin-top: $spacer;
|
||||
margin-bottom: $spacer;
|
||||
label {
|
||||
height: 0;
|
||||
margin: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
font-size: $font-size-h4;
|
||||
color: $brand-grey-light;
|
||||
border-bottom: 1px solid $brand-grey-lighter;
|
||||
padding-bottom: $spacer / 2;
|
||||
}
|
||||
|
@ -1,9 +1,9 @@
|
||||
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 Route from '../components/templates/Route'
|
||||
import AssetsUser from '../components/molecules/AssetsUser'
|
||||
import styles from './Home.module.scss'
|
||||
|
||||
import meta from '../data/meta.json'
|
||||
@ -38,14 +38,7 @@ class Home extends Component<HomeProps, HomeState> {
|
||||
/>
|
||||
</Form>
|
||||
|
||||
<div className={styles.published}>
|
||||
<h2 className={styles.subTitle}>Your Data Sets</h2>
|
||||
|
||||
<div>
|
||||
<p>None yet.</p>
|
||||
<Link to="/publish">+ Publish A Data Set</Link>
|
||||
</div>
|
||||
</div>
|
||||
<AssetsUser />
|
||||
</Route>
|
||||
)
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user