prepare retrieving and displaying files metadata

client/src/routes/Details/AssetDetails.tsx

@@ -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>
-                        <span>fake 18.5 MB</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)}>
+                <AssetFilesDetails
-                    Download asset
+                    files={base.files ? base.files : []}
-                </Button>
+                    ddo={ddo}
+                />
 
                 <pre>
                     <code>{JSON.stringify(metadata, null, 2)}</code>

client/src/routes/Details/AssetFilesDetails.tsx

@@ -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>
+            </>
+        )
+    }
+}

client/src/routes/Details/index.tsx

@@ -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
+                    <AssetDetails metadata={metadata} ddo={ddo} />
-                        metadata={metadata}
-                        ddo={ddo}
-                        purchaseAsset={this.purchaseAsset}
-                    />
                 ) : (
                     <div className={stylesApp.loader}>
                         <Spinner message={'Loading asset...'} />