Merge pull request #196 from oceanprotocol/fix/asset-detail-errors

fix error output on asset details loading

client/package-lock.json

@@ -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",

client/package.json

@@ -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",

client/src/components/organisms/WalletSelector.tsx

@@ -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 }) => (

client/src/components/templates/Asset/AssetDetails.tsx

@@ -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,18 +22,46 @@ export function datafilesLine(files: File[]) {
     return <span>{files.length} data files</span>
 }
 
-export default class AssetDetails extends PureComponent<AssetDetailsProps> {
+const MetaFixedItem = ({ name, value }: { name: string; value: string }) => (
-    public render() {
+    <li>
-        const { metadata, ddo } = this.props
+        <span className={styles.metaLabel}>
+            <strong>{name}</strong>
+        </span>
+        <span className={styles.metaValue}>{value}</span>
+    </li>
+)
+
+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
+                <h2 className={styles.copyrightHolder} title="Copyright Holder">
-                        className={styles.copyrightHolder}
-                        title="Copyright Holder"
-                    >
                     {base.copyrightHolder}
                 </h2>
                 <div className={styles.metaPrimaryData}>
@@ -71,53 +100,19 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
                     Fixed Metadata
                 </h2>
                 <ul>
-                        <li>
+                    {metaFixed
-                            <span className={styles.metaLabel}>
+                        .filter(item => item.show)
-                                <strong>Author</strong>
+                        .map(item => (
-                            </span>
+                            <MetaFixedItem
-                            <span className={styles.metaValue}>
+                                key={shortid.generate()}
-                                {base.author}
+                                name={item.name}
-                            </span>
+                                value={item.value}
-                        </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>
             </div>
 
-                <AssetFilesDetails
+            <AssetFilesDetails files={base.files ? base.files : []} ddo={ddo} />
-                    files={base.files ? base.files : []}
-                    ddo={ddo}
-                />
         </>
     )
-    }
 }

client/src/components/templates/Asset/index.test.tsx

@@ -16,6 +16,5 @@ describe('Details', () => {
             />
         )
         expect(container.firstChild).toBeInTheDocument()
-        expect(container.querySelector('.loader')).toBeInTheDocument()
     })
 })

client/src/components/templates/Asset/index.tsx

@@ -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