From d4c8d054779ea7a85a58fa7ccb1e706d84d2cb48 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 25 Mar 2019 17:31:32 +0100 Subject: [PATCH] make AssetsUser component more usable --- .../components/molecules/Asset.module.scss | 8 ++- client/src/components/molecules/Asset.tsx | 4 ++ .../molecules/AssetsUser.module.scss | 14 ++--- .../src/components/molecules/AssetsUser.tsx | 33 ++++++++--- client/src/routes/History.tsx | 57 +++---------------- client/src/routes/Home.module.scss | 4 ++ client/src/routes/Home.tsx | 2 +- 7 files changed, 53 insertions(+), 69 deletions(-) diff --git a/client/src/components/molecules/Asset.module.scss b/client/src/components/molecules/Asset.module.scss index 6bbcd08..5b9a2f1 100644 --- a/client/src/components/molecules/Asset.module.scss +++ b/client/src/components/molecules/Asset.module.scss @@ -31,11 +31,12 @@ .assetList { > a { - display: block; color: $brand-grey-dark; border-bottom: 1px solid $brand-grey-lighter; padding-top: $spacer / 2; padding-bottom: $spacer / 2; + display: flex; + justify-content: space-between; &:hover, &:focus { @@ -51,6 +52,11 @@ } } +.date { + font-size: $font-size-small; + color: $brand-grey-light; +} + .assetFooter { border-top: 1px solid $brand-grey-lighter; padding-top: $spacer / 2; diff --git a/client/src/components/molecules/Asset.tsx b/client/src/components/molecules/Asset.tsx index dec576a..d3a2922 100644 --- a/client/src/components/molecules/Asset.tsx +++ b/client/src/components/molecules/Asset.tsx @@ -1,5 +1,6 @@ import React from 'react' import { Link } from 'react-router-dom' +import moment from 'moment' import styles from './Asset.module.scss' const AssetLink = ({ asset, list }: { asset: any; list?: boolean }) => { @@ -10,6 +11,9 @@ const AssetLink = ({ asset, list }: { asset: any; list?: boolean }) => {

{base.name}

+
+ {moment(base.dateCreated, 'YYYYMMDD').fromNow()} +
) : ( diff --git a/client/src/components/molecules/AssetsUser.module.scss b/client/src/components/molecules/AssetsUser.module.scss index 7456609..ec2d705 100644 --- a/client/src/components/molecules/AssetsUser.module.scss +++ b/client/src/components/molecules/AssetsUser.module.scss @@ -1,15 +1,8 @@ @import '../../styles/variables'; .assetsUser { - margin-top: $spacer * 3; + margin-top: $spacer; margin-bottom: $spacer; - - > div { - margin-bottom: $spacer; - } -} - -.assets { } .subTitle { @@ -19,3 +12,8 @@ padding-bottom: $spacer / 2; margin-bottom: 0; } + +.link { + display: block; + margin-top: $spacer / 2; +} diff --git a/client/src/components/molecules/AssetsUser.tsx b/client/src/components/molecules/AssetsUser.tsx index 318b246..2b798e4 100644 --- a/client/src/components/molecules/AssetsUser.tsx +++ b/client/src/components/molecules/AssetsUser.tsx @@ -1,12 +1,15 @@ import React, { PureComponent } from 'react' import { Link } from 'react-router-dom' +import { Logger } from '@oceanprotocol/squid' import { User } from '../../context/User' import Spinner from '../atoms/Spinner' -import Asset from '../molecules/Asset' +import Asset from './Asset' import styles from './AssetsUser.module.scss' -import { Logger } from '@oceanprotocol/squid' -export default class AssetsUser extends PureComponent { +export default class AssetsUser extends PureComponent< + { list?: boolean; recent?: boolean }, + { results: any[]; isLoading: boolean } +> { public state = { results: [], isLoading: true } public componentDidMount() { @@ -42,21 +45,33 @@ export default class AssetsUser extends PureComponent { public render() { return (
-

Your Data Sets

+ {this.props.recent && ( +

Your Latest Data Sets

+ )} {this.state.isLoading ? ( ) : this.state.results.length ? ( -
+ <> {this.state.results + .slice(0, this.props.recent ? 5 : undefined) .filter(asset => !!asset) .map((asset: any) => ( - - ))} -
+ + ))} + {this.props.recent && ( + + All Data Sets + + )} + ) : (
-

None yet.

+

No Data Sets Yet.

+ Publish A Data Set
)} diff --git a/client/src/routes/History.tsx b/client/src/routes/History.tsx index 66ac858..0dc0e97 100644 --- a/client/src/routes/History.tsx +++ b/client/src/routes/History.tsx @@ -1,56 +1,13 @@ import React, { Component } from 'react' import Route from '../components/templates/Route' -import { User } from '../context/User' -import Asset from '../components/molecules/Asset' -import { Logger } from '@oceanprotocol/squid' - -interface InvoicesState { - results: any[] -} - -export default class Invoices extends Component<{}, InvoicesState> { - public state = { results: [] } - - public async componentDidMount() { - // this is currently my published assets - this.context.ocean.keeper.didRegistry.contract.getPastEvents( - 'DIDAttributeRegistered', - { - filter: { _owner: this.context.account }, - fromBlock: 0, - toBlock: 'latest' - }, - async (error: any, events: any) => { - if (error) { - Logger.log('error retrieving', error) - } else { - const results = [] - for (const event of events) { - const ddo = await this.context.ocean.assets.resolve( - `did:op:${event.returnValues._did.substring(2)}` - ) - results.push(ddo) - } - this.setState({ results }) - } - } - ) - } - - public renderResults = () => - this.state.results.length ? ( - this.state.results - .filter(asset => !!asset) - .map((asset, index) => ( - - )) - ) : ( -
No invoices yet
- ) +import AssetsUser from '../components/molecules/AssetsUser' +export default class History extends Component { public render() { - return {this.renderResults()} + return ( + + + + ) } } - -Invoices.contextType = User diff --git a/client/src/routes/Home.module.scss b/client/src/routes/Home.module.scss index 472e6ca..2376841 100644 --- a/client/src/routes/Home.module.scss +++ b/client/src/routes/Home.module.scss @@ -3,6 +3,10 @@ .home { display: block; + form { + margin-bottom: $spacer * 3; + } + label { height: 0; margin: 0; diff --git a/client/src/routes/Home.tsx b/client/src/routes/Home.tsx index 3f7885c..f62f0bf 100644 --- a/client/src/routes/Home.tsx +++ b/client/src/routes/Home.tsx @@ -41,7 +41,7 @@ class Home extends Component { } /> - + ) }