From f10ca30c158b6f6468380fa97e9461c5fe6eeced Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 15 Feb 2019 15:23:13 +0100 Subject: [PATCH 1/3] hide input label, prepare user asset list as new component --- .../molecules/AssetsUser.module.scss | 19 +++++++ src/components/molecules/AssetsUser.tsx | 54 +++++++++++++++++++ src/routes/Home.module.scss | 20 ++----- src/routes/Home.tsx | 11 +--- 4 files changed, 79 insertions(+), 25 deletions(-) create mode 100644 src/components/molecules/AssetsUser.module.scss create mode 100644 src/components/molecules/AssetsUser.tsx diff --git a/src/components/molecules/AssetsUser.module.scss b/src/components/molecules/AssetsUser.module.scss new file mode 100644 index 0000000..73e708a --- /dev/null +++ b/src/components/molecules/AssetsUser.module.scss @@ -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; +} diff --git a/src/components/molecules/AssetsUser.tsx b/src/components/molecules/AssetsUser.tsx new file mode 100644 index 0000000..f99f042 --- /dev/null +++ b/src/components/molecules/AssetsUser.tsx @@ -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 ( + +
{metadata.base.name}
+
{metadata.base.description}
+ + ) + } + + public render() { + return ( +
+

Your Data Sets

+ + {this.state.results.length ? ( + this.state.results.map(asset => this.renderAssetBox(asset)) + ) : ( +
+

None yet.

+ + Publish A Data Set +
+ )} +
+ ) + } +} diff --git a/src/routes/Home.module.scss b/src/routes/Home.module.scss index da87cc8..472e6ca 100644 --- a/src/routes/Home.module.scss +++ b/src/routes/Home.module.scss @@ -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; -} diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx index 1804bf7..2e6fc8a 100644 --- a/src/routes/Home.tsx +++ b/src/routes/Home.tsx @@ -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 { /> -
-

Your Data Sets

- -
-

None yet.

- + Publish A Data Set -
-
+ ) } From 409d13b961bdfdef2f59b77f91ffda86a6dfa302 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 15 Feb 2019 16:48:43 +0100 Subject: [PATCH 2/3] user assets list with new Asset component --- .../molecules/AssetsUser.module.scss | 15 ++++++++++++++ src/components/molecules/AssetsUser.tsx | 20 +++++++------------ 2 files changed, 22 insertions(+), 13 deletions(-) diff --git a/src/components/molecules/AssetsUser.module.scss b/src/components/molecules/AssetsUser.module.scss index 73e708a..1266f66 100644 --- a/src/components/molecules/AssetsUser.module.scss +++ b/src/components/molecules/AssetsUser.module.scss @@ -11,6 +11,21 @@ } } +.assets { + display: grid; + grid-template-columns: 1fr; + grid-gap: $spacer; + max-width: 100%; + + @media (min-width: $break-point--small) { + grid-template-columns: 2fr 2fr; + } + + @media (min-width: $break-point--medium) { + grid-template-columns: 2fr 2fr 2fr; + } +} + .subTitle { font-size: $font-size-h4; color: $brand-grey-light; diff --git a/src/components/molecules/AssetsUser.tsx b/src/components/molecules/AssetsUser.tsx index f99f042..dfc1e82 100644 --- a/src/components/molecules/AssetsUser.tsx +++ b/src/components/molecules/AssetsUser.tsx @@ -1,5 +1,6 @@ import React, { PureComponent } from 'react' import { Link } from 'react-router-dom' +import Asset from '../molecules/Asset' import styles from './AssetsUser.module.scss' export default class AssetsUser extends PureComponent { @@ -16,7 +17,7 @@ export default class AssetsUser extends PureComponent { query: { // TODO: query all assets published by current active account $text: { - $search: 'account ID' + $search: 'zoid' } } } @@ -24,24 +25,17 @@ export default class AssetsUser extends PureComponent { 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 ( - -
{metadata.base.name}
-
{metadata.base.description}
- - ) - } - public render() { return (

Your Data Sets

{this.state.results.length ? ( - this.state.results.map(asset => this.renderAssetBox(asset)) +
+ {this.state.results.map((asset, index) => ( + + ))} +
) : (

None yet.

From 5cc31940f0610114a883f1d71d8a8a72468ab01e Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 15 Feb 2019 17:26:28 +0100 Subject: [PATCH 3/3] add loading state --- src/components/molecules/AssetsUser.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/components/molecules/AssetsUser.tsx b/src/components/molecules/AssetsUser.tsx index dfc1e82..7fb829a 100644 --- a/src/components/molecules/AssetsUser.tsx +++ b/src/components/molecules/AssetsUser.tsx @@ -1,10 +1,11 @@ import React, { PureComponent } from 'react' import { Link } from 'react-router-dom' +import Spinner from '../atoms/Spinner' import Asset from '../molecules/Asset' import styles from './AssetsUser.module.scss' export default class AssetsUser extends PureComponent { - public state = { results: [] } + public state = { results: [], isLoading: true } public componentDidMount() { this.searchOcean() @@ -21,8 +22,13 @@ export default class AssetsUser extends PureComponent { } } } - const assets = await this.context.ocean.searchAssets(queryRequest) - this.setState({ results: assets }) + + try { + const assets = await this.context.ocean.searchAssets(queryRequest) + this.setState({ results: assets, isLoading: false }) + } catch (error) { + this.setState({ isLoading: false }) + } } public render() { @@ -30,7 +36,9 @@ export default class AssetsUser extends PureComponent {

Your Data Sets

- {this.state.results.length ? ( + {this.state.isLoading ? ( + + ) : this.state.results.length ? (
{this.state.results.map((asset, index) => (