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

prepare retrieving and displaying files metadata

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-03-26 13:24:02 +01:00
parent 2715acb2fb
commit 1585a4a2f9
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 115 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
client/src/routes/Details/AssetDetails.tsx
View File

@ -1,18 +1,17 @@
import React, { PureComponent } from 'react'
import { Link } from 'react-router-dom'
import Button from '../../components/atoms/Button'
import Moment from 'react-moment'
import styles from './AssetDetails.module.scss'
import AssetFilesDetails from './AssetFilesDetails'
interface AssetDetailsProps {
metadata: any
ddo: any
purchaseAsset: any
}
export default class AssetDetails extends PureComponent<AssetDetailsProps> {
public render() {
const { metadata, ddo, purchaseAsset } = this.props
const { metadata, ddo } = this.props
const { base } = metadata
return (
@ -38,8 +37,9 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
) : (
<Link to={'search?q='}>Fake Category</Link>
)}
<span>fake json contentType</span>
<span>fake 18.5 MB</span>
<span>
{base.files ? base.files.length : 0} data files
</span>
</div>
</aside>
@ -58,18 +58,6 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
</span>
<span className={styles.metaValue}>{base.license}</span>
</li>
<li>
<span className={styles.metaLabel}>
<strong>File Encoding</strong>
</span>
<span className={styles.metaValue}>fake UTF-8</span>
</li>
<li>
<span className={styles.metaLabel}>
<strong>Compression</strong>
</span>
<span className={styles.metaValue}>fake None</span>
</li>
<li>
<span className={styles.metaLabel}>
<strong>DID</strong>
@ -80,9 +68,10 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
</li>
</ul>
<Button onClick={() => purchaseAsset(ddo)}>
Download asset
</Button>
<AssetFilesDetails
files={base.files ? base.files : []}
ddo={ddo}
/>
<pre>
<code>{JSON.stringify(metadata, null, 2)}</code>

105
client/src/routes/Details/AssetFilesDetails.tsx Normal file
View File

@ -0,0 +1,105 @@
import React, { PureComponent } from 'react'
import queryString from 'query-string'
import { Logger } from '@oceanprotocol/squid'
import Button from '../../components/atoms/Button'
import styles from './AssetDetails.module.scss'
interface AssetFilesDetailsProps {
files: any[]
ddo: string
}
export default class AssetFilesDetails extends PureComponent<
AssetFilesDetailsProps
> {
private purchaseAsset = async (ddo: any) => {
try {
const account = await this.context.ocean.getAccounts()
const service = ddo.findServiceByType('Access')
const serviceAgreementSignatureResult = await this.context.ocean.signServiceAgreement(
ddo.id,
service.serviceDefinitionId,
account[0]
)
await this.context.ocean.initializeServiceAgreement(
ddo.id,
service.serviceDefinitionId,
serviceAgreementSignatureResult.agreementId,
serviceAgreementSignatureResult.signature,
(files: any) => {
Logger.log('downloading files', files)
files.forEach((file: any) => {
const parsedUrl: any = queryString.parseUrl(file)
// setTimeout(() => {
// // eslint-disable-next-line
// window.open(parsedUrl.query.url)
// }, 100)
})
},
account[0]
)
} catch (e) {
Logger.log('error', e)
}
}
public render() {
const { files, ddo } = this.props
return (
<>
{files.forEach(file => {
const parsedUrl: any = queryString.parseUrl(file)
return (
<>
<h2>{file.name}</h2>
<ul>
<li>
<span className={styles.metaLabel}>
<strong>Content Type</strong>
</span>
<span className={styles.metaValue}>
{file.contentType}
</span>
</li>
<li>
<span className={styles.metaLabel}>
<strong>Size</strong>
</span>
<span className={styles.metaValue}>
{file.contentLength}
</span>
</li>
<li>
<span className={styles.metaLabel}>
<strong>File Encoding</strong>
</span>
<span className={styles.metaValue}>
{file.encoding}
</span>
</li>
<li>
<span className={styles.metaLabel}>
<strong>Compression</strong>
</span>
<span className={styles.metaValue}>
{file.compression}
</span>
</li>
</ul>
<Button href={parsedUrl.query.url}>
Download asset
</Button>
</>
)
})}
<Button onClick={() => this.purchaseAsset(ddo)}>
Get downloads
</Button>
</>
)
}
}

25
client/src/routes/Details/index.tsx
View File

@ -1,6 +1,4 @@
import React, { Component } from 'react'
import { Logger } from '@oceanprotocol/squid'
import queryString from 'query-string'
import Route from '../../components/templates/Route'
import Spinner from '../../components/atoms/Spinner'
import { User } from '../../context/User'
@ -28,23 +26,6 @@ export default class Details extends Component<DetailsProps, DetailsState> {
this.setState({ ddo, metadata: { base: metadata.base } })
}
private purchaseAsset = async (ddo: any) => {
try {
const account = await this.context.ocean.accounts.list()
const accessService = ddo.findServiceByType('Access')
const agreementId = await this.context.ocean.assets.order(
ddo.id,
accessService.serviceDefinitionId,
account[0]
)
const folder = ""
const path = await this.context.ocean.assets.consume(agreementId, ddo.id, accessService.serviceDefinitionId, account[0], folder)
Logger.log('path', path)
} catch (e) {
Logger.log('error', e)
}
}
public render() {
const { metadata, ddo } = this.state
@ -53,11 +34,7 @@ export default class Details extends Component<DetailsProps, DetailsState> {
title={metadata.base ? metadata.base.name : 'Loading Details'}
>
{metadata && metadata.base.name ? (
<AssetDetails
metadata={metadata}
ddo={ddo}
purchaseAsset={this.purchaseAsset}
/>
<AssetDetails metadata={metadata} ddo={ddo} />
) : (
<div className={stylesApp.loader}>
<Spinner message={'Loading asset...'} />