mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
Merge pull request #196 from oceanprotocol/fix/asset-detail-errors
fix error output on asset details loading
This commit is contained in:
GitHub
commit
5f37adc420
19
client/package-lock.json
generated
19
client/package-lock.json
generated
@ -2382,6 +2382,12 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/shortid": {
|
||||
"version": "0.0.29",
|
||||
"resolved": "https://registry.npmjs.org/@types/shortid/-/shortid-0.0.29.tgz",
|
||||
"integrity": "sha1-gJPuBBam4r8qpjOBCRFLP7/6Dps=",
|
||||
"dev": true
|
||||
},
|
||||
"@types/stack-utils": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
|
||||
@ -11304,6 +11310,11 @@
|
||||
"resolved": "https://registry.npmjs.org/nano-json-stream-parser/-/nano-json-stream-parser-0.1.2.tgz",
|
||||
"integrity": "sha1-DMj20OK2IrR5xA1JnEbWS3Vcb18="
|
||||
},
|
||||
"nanoid": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.1.tgz",
|
||||
"integrity": "sha512-0YbJdaL4JFoejIOoawgLcYValFGJ2iyUuVDIWL3g8Es87SSOWFbWdRUMV3VMSiyPs3SQ3QxCIxFX00q5DLkMCw=="
|
||||
},
|
||||
"nanomatch": {
|
||||
"version": "1.2.13",
|
||||
"resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
|
||||
@ -15078,6 +15089,14 @@
|
||||
"integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
|
||||
"dev": true
|
||||
},
|
||||
"shortid": {
|
||||
"version": "2.2.15",
|
||||
"resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.15.tgz",
|
||||
"integrity": "sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==",
|
||||
"requires": {
|
||||
"nanoid": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"signal-exit": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
|
||||
|
||||
@ -40,6 +40,7 @@
|
||||
"react-popper": "^1.3.3",
|
||||
"react-router-dom": "^5.0.1",
|
||||
"react-transition-group": "^4.2.1",
|
||||
"shortid": "^2.2.15",
|
||||
"truffle-hdwallet-provider": "1.0.14",
|
||||
"web3": "1.2.0"
|
||||
},
|
||||
@ -60,6 +61,7 @@
|
||||
"@types/react-paginate": "^6.2.1",
|
||||
"@types/react-router-dom": "^4.3.4",
|
||||
"@types/react-transition-group": "^4.2.0",
|
||||
"@types/shortid": "0.0.29",
|
||||
"@types/web3": "^1.0.19",
|
||||
"jest-mock-axios": "^3.1.0",
|
||||
"node-sass": "^4.12.0",
|
||||
|
||||
@ -15,19 +15,20 @@ export default class WalletSelector extends PureComponent<
|
||||
isModalOpen: false
|
||||
}
|
||||
|
||||
private toggleModal = () => {
|
||||
private handleToggleModal = (e?: Event) => {
|
||||
e && e.preventDefault()
|
||||
this.setState({ isModalOpen: !this.state.isModalOpen })
|
||||
}
|
||||
|
||||
private loginBurnerWallet = () => {
|
||||
this.context.loginBurnerWallet()
|
||||
this.toggleModal()
|
||||
this.handleToggleModal()
|
||||
}
|
||||
|
||||
private loginMetamask = () => {
|
||||
this.context.loginMetamask()
|
||||
this.context.logoutBurnerWallet()
|
||||
this.toggleModal()
|
||||
this.handleToggleModal()
|
||||
}
|
||||
|
||||
private WalletButton = ({
|
||||
@ -80,7 +81,7 @@ export default class WalletSelector extends PureComponent<
|
||||
<Button
|
||||
link
|
||||
className={styles.openLink}
|
||||
onClick={this.toggleModal}
|
||||
onClick={this.handleToggleModal}
|
||||
data-action="wallet"
|
||||
>
|
||||
{content.title}
|
||||
@ -89,7 +90,7 @@ export default class WalletSelector extends PureComponent<
|
||||
title={content.title}
|
||||
description={content.description}
|
||||
isOpen={this.state.isModalOpen}
|
||||
toggleModal={this.toggleModal}
|
||||
toggleModal={this.handleToggleModal}
|
||||
>
|
||||
<div className={styles.info}>
|
||||
{content.buttons.map(({ title, description, icon }) => (
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import React from 'react'
|
||||
import Moment from 'react-moment'
|
||||
import { DDO, MetaData, File } from '@oceanprotocol/squid'
|
||||
import shortid from 'shortid'
|
||||
import Markdown from '../../atoms/Markdown'
|
||||
import CategoryLink from '../../atoms/CategoryLink'
|
||||
import styles from './AssetDetails.module.scss'
|
||||
@ -21,103 +22,97 @@ 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 MetaFixedItem = ({ name, value }: { name: string; value: string }) => (
|
||||
<li>
|
||||
<span className={styles.metaLabel}>
|
||||
<strong>{name}</strong>
|
||||
</span>
|
||||
<span className={styles.metaValue}>{value}</span>
|
||||
</li>
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
<aside className={styles.metaPrimary}>
|
||||
<h2
|
||||
className={styles.copyrightHolder}
|
||||
title="Copyright Holder"
|
||||
export default function AssetDetails({ metadata, ddo }: AssetDetailsProps) {
|
||||
const { base } = metadata
|
||||
const price = base.price && Web3.utils.fromWei(base.price.toString())
|
||||
|
||||
const metaFixed = [
|
||||
{
|
||||
name: 'Author',
|
||||
value: base.author,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
name: 'License',
|
||||
value: base.license,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
name: 'DID',
|
||||
value: ddo.id,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
name: 'Price',
|
||||
value: `${price} OCEAN`,
|
||||
show: price !== '0'
|
||||
}
|
||||
]
|
||||
|
||||
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>
|
||||
{metaFixed
|
||||
.filter(item => item.show)
|
||||
.map(item => (
|
||||
<MetaFixedItem
|
||||
key={shortid.generate()}
|
||||
name={item.name}
|
||||
value={item.value}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<AssetFilesDetails files={base.files ? base.files : []} ddo={ddo} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -16,6 +16,5 @@ describe('Details', () => {
|
||||
/>
|
||||
)
|
||||
expect(container.firstChild).toBeInTheDocument()
|
||||
expect(container.querySelector('.loader')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user