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

fix error output on asset details loading

This commit is contained in:
Matthias Kretschmann 2019-09-12 11:11:47 +02:00
parent c4029b147c
commit c4e71173ba
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 79 additions and 94 deletions

View File

@ -21,103 +21,87 @@ export function datafilesLine(files: File[]) {
return <span>{files.length} data files</span>
}
export default class AssetDetails extends PureComponent<AssetDetailsProps> {
public render() {
const { metadata, ddo } = this.props
const { base } = metadata
const Pricing = ({ price }: { price: string }) => (
<li>
<span className={styles.metaLabel}>
<strong>Price</strong>
</span>
<span className={styles.metaValue}>
{price === '0' ? 0 : Web3.utils.fromWei(price.toString())} OCEAN
</span>
</li>
)
return (
<>
<aside className={styles.metaPrimary}>
<h2
className={styles.copyrightHolder}
title="Copyright Holder"
export default function AssetDetails({ metadata, ddo }: AssetDetailsProps) {
const { base } = metadata
return (
<>
<aside className={styles.metaPrimary}>
<h2 className={styles.copyrightHolder} title="Copyright Holder">
{base.copyrightHolder}
</h2>
<div className={styles.metaPrimaryData}>
<span
title={`Date created, published on ${base.datePublished}`}
>
{base.copyrightHolder}
</h2>
<div className={styles.metaPrimaryData}>
<span
title={`Date created, published on ${base.datePublished}`}
>
<Moment
date={base.dateCreated}
format="L"
interval={0}
/>
</span>
<Moment
date={base.dateCreated}
format="L"
interval={0}
/>
</span>
{base.categories && (
<CategoryLink category={base.categories[0]} />
)}
{base.categories && (
<CategoryLink category={base.categories[0]} />
)}
{base.files && datafilesLine(base.files)}
</div>
</aside>
{base.description && (
<Markdown
text={base.description}
className={styles.description}
/>
)}
<Report did={ddo.id} title={metadata.base.name} />
<div className={styles.metaFixed}>
<h2
className={styles.metaFixedTitle}
title="This metadata can not be changed because it is used to generate the checksums for the DDO, and to encrypt the file urls."
>
Fixed Metadata
</h2>
<ul>
<li>
<span className={styles.metaLabel}>
<strong>Author</strong>
</span>
<span className={styles.metaValue}>
{base.author}
</span>
</li>
<li>
<span className={styles.metaLabel}>
<strong>License</strong>
</span>
<span className={styles.metaValue}>
{base.license}
</span>
</li>
<li>
<span className={styles.metaLabel}>
<strong>DID</strong>
</span>
<span className={styles.metaValue}>
<code>{ddo.id}</code>
</span>
</li>
{allowPricing ? (
<li>
<span className={styles.metaLabel}>
<strong>Price</strong>
</span>
<span className={styles.metaValue}>
{base.price === '0'
? 0
: Web3.utils.fromWei(
base.price.toString()
)}{' '}
OCEAN
</span>
</li>
) : null}
</ul>
{base.files && datafilesLine(base.files)}
</div>
</aside>
<AssetFilesDetails
files={base.files ? base.files : []}
ddo={ddo}
{base.description && (
<Markdown
text={base.description}
className={styles.description}
/>
</>
)
}
)}
<Report did={ddo.id} title={metadata.base.name} />
<div className={styles.metaFixed}>
<h2
className={styles.metaFixedTitle}
title="This metadata can not be changed because it is used to generate the checksums for the DDO, and to encrypt the file urls."
>
Fixed Metadata
</h2>
<ul>
<li>
<span className={styles.metaLabel}>
<strong>Author</strong>
</span>
<span className={styles.metaValue}>{base.author}</span>
</li>
<li>
<span className={styles.metaLabel}>
<strong>License</strong>
</span>
<span className={styles.metaValue}>{base.license}</span>
</li>
<li>
<span className={styles.metaLabel}>
<strong>DID</strong>
</span>
<span className={styles.metaValue}>
<code>{ddo.id}</code>
</span>
</li>
{allowPricing ? <Pricing price={base.price} /> : null}
</ul>
</div>
<AssetFilesDetails files={base.files ? base.files : []} ddo={ddo} />
</>
)
}

View File

@ -54,12 +54,13 @@ class Asset extends Component<AssetProps, AssetState> {
public render() {
const { metadata, ddo, error } = this.state
const isLoading = metadata.base.name === ''
const hasError = error !== ''
return isLoading ? (
return isLoading && !hasError ? (
<div className={stylesApp.loader}>
<Spinner message="Loading asset..." />
</div>
) : error !== '' ? (
) : hasError ? (
<div className={styles.error}>{error}</div>
) : (
<Route