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

asset details rendering fix

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-02-15 13:10:57 +01:00
parent 1d01d0edf2
commit e1228fa471
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 21 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/routes/Details/AssetDetails.tsx
View File

@ -11,41 +11,36 @@ interface AssetDetailsProps {
export default class AssetDetails extends PureComponent<AssetDetailsProps> { export default class AssetDetails extends PureComponent<AssetDetailsProps> {
public render() { public render() {
const { metadata, ddo, purchaseAsset } = this.props const { metadata, ddo, purchaseAsset } = this.props
const { base } = metadata
return ( return (
<> <>
<aside className={styles.metaPrimary}> <aside className={styles.metaPrimary}>
<h2 className={styles.copyrightHolder}> <h2 className={styles.copyrightHolder}>
{metadata.base.copyrightHolder} {base.copyrightHolder}
</h2> </h2>
<div className={styles.metaPrimaryData}> <div className={styles.metaPrimaryData}>
<span>{metadata.base.dateCreated}</span> <span>{base.dateCreated}</span>
<span>json</span> <span>json</span>
<span>18.5 MB</span> <span>18.5 MB</span>
{metadata.base.categories && ( {base.categories && <span>{base.categories[0]}</span>}
<span>{metadata.base.categories[0]}</span>
)}
</div> </div>
</aside> </aside>
<div>{metadata.base.description}</div> <div>{base.description}</div>
<ul className={styles.meta}> <ul className={styles.meta}>
<li> <li>
<span className={styles.metaLabel}> <span className={styles.metaLabel}>
<strong>Author</strong> <strong>Author</strong>
</span> </span>
<span className={styles.metaValue}> <span className={styles.metaValue}>{base.author}</span>
{metadata.base.author}
</span>
</li> </li>
<li> <li>
<span className={styles.metaLabel}> <span className={styles.metaLabel}>
<strong>License</strong> <strong>License</strong>
</span> </span>
<span className={styles.metaValue}> <span className={styles.metaValue}>{base.license}</span>
{metadata.base.license}
</span>
</li> </li>
<li> <li>
<span className={styles.metaLabel}> <span className={styles.metaLabel}>

22
src/routes/Details/index.tsx
View File

@ -1,13 +1,14 @@
import { Logger } from '@oceanprotocol/squid'
import React, { Component } from 'react' import React, { Component } from 'react'
import { Logger } from '@oceanprotocol/squid'
import queryString from 'query-string'
import Route from '../../components/templates/Route' import Route from '../../components/templates/Route'
import Spinner from '../../components/atoms/Spinner'
import { User } from '../../context/User' import { User } from '../../context/User'
import quertString from 'query-string'
import AssetDetails from './AssetDetails' import AssetDetails from './AssetDetails'
interface DetailsState { interface DetailsState {
ddo: any ddo: any
metadata: any metadata: { base: { name: string } }
} }
interface DetailsProps { interface DetailsProps {
@ -16,14 +17,14 @@ interface DetailsProps {
} }
export default class Details extends Component<DetailsProps, DetailsState> { export default class Details extends Component<DetailsProps, DetailsState> {
public state = { ddo: {}, metadata: {} } public state = { ddo: {}, metadata: { base: { name: '' } } }
public async componentDidMount() { public async componentDidMount() {
const ddo = await this.context.ocean.resolveDID( const ddo = await this.context.ocean.resolveDID(
this.props.match.params.did this.props.match.params.did
) )
const { metadata } = ddo.findServiceByType('Metadata') const { metadata } = ddo.findServiceByType('Metadata')
this.setState({ ddo, metadata }) this.setState({ ddo, metadata: { base: metadata.base } })
} }
private purchaseAsset = async (ddo: any) => { private purchaseAsset = async (ddo: any) => {
@ -42,7 +43,7 @@ export default class Details extends Component<DetailsProps, DetailsState> {
serviceAgreementSignatureResult.serviceAgreementSignature, serviceAgreementSignatureResult.serviceAgreementSignature,
(files: any) => { (files: any) => {
files.forEach((file: any) => { files.forEach((file: any) => {
const parsedUrl: any = quertString.parseUrl(file) const parsedUrl: any = queryString.parseUrl(file)
setTimeout(() => { setTimeout(() => {
// eslint-disable-next-line // eslint-disable-next-line
window.open(parsedUrl.query.url) window.open(parsedUrl.query.url)
@ -58,18 +59,19 @@ export default class Details extends Component<DetailsProps, DetailsState> {
public render() { public render() {
const { metadata, ddo } = this.state const { metadata, ddo } = this.state
const { base } = metadata
return ( return (
<Route title={metadata && base ? base.name : 'Loading Details'}> <Route
{metadata ? ( title={metadata.base ? metadata.base.name : 'Loading Details'}
>
{metadata && metadata.base.name ? (
<AssetDetails <AssetDetails
metadata={metadata} metadata={metadata}
ddo={ddo} ddo={ddo}
purchaseAsset={this.purchaseAsset} purchaseAsset={this.purchaseAsset}
/> />
) : ( ) : (
<div>Loading</div> <Spinner message={'Loading asset...'} />
)} )}
</Route> </Route>
) )

10
tsconfig.json
View File

@ -1,11 +1,7 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "es5",
"lib": [ "lib": ["dom", "dom.iterable", "esnext"],
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
"esModuleInterop": true, "esModuleInterop": true,
@ -19,7 +15,5 @@
"noEmit": true, "noEmit": true,
"jsx": "preserve" "jsx": "preserve"
}, },
"include": [ "include": ["src"]
"src"
]
} }