From c4e71173bae546f4cfc8c55fd96c0aef09324951 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 12 Sep 2019 11:11:47 +0200
Subject: [PATCH] fix error output on asset details loading

---
 .../templates/Asset/AssetDetails.tsx          | 168 ++++++++----------
 .../src/components/templates/Asset/index.tsx  |   5 +-
 2 files changed, 79 insertions(+), 94 deletions(-)

diff --git a/client/src/components/templates/Asset/AssetDetails.tsx b/client/src/components/templates/Asset/AssetDetails.tsx
index 371d29e..ac9881a 100644
--- a/client/src/components/templates/Asset/AssetDetails.tsx
+++ b/client/src/components/templates/Asset/AssetDetails.tsx
@@ -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} />
+        </>
+    )
 }
diff --git a/client/src/components/templates/Asset/index.tsx b/client/src/components/templates/Asset/index.tsx
index f196668..5b10e2d 100644
--- a/client/src/components/templates/Asset/index.tsx
+++ b/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