From d92c3e92f464e6ec53a9f741ac02f881f2dce72f Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 18 Jun 2019 13:28:35 +0200
Subject: [PATCH] wait for ocean object, sort contracts

---
 .../molecules/VersionNumbers/VersionTable.tsx | 111 +++++++++---------
 .../molecules/VersionNumbers/index.tsx        |  32 +++--
 2 files changed, 78 insertions(+), 65 deletions(-)

diff --git a/client/src/components/molecules/VersionNumbers/VersionTable.tsx b/client/src/components/molecules/VersionNumbers/VersionTable.tsx
index 5dd9913..412a24d 100644
--- a/client/src/components/molecules/VersionNumbers/VersionTable.tsx
+++ b/client/src/components/molecules/VersionNumbers/VersionTable.tsx
@@ -16,28 +16,31 @@ const VersionTableContracts = ({
     <table>
         <tbody>
             {contracts &&
-                Object.keys(contracts).map(key => {
-                    const submarineLink = `https://submarine${
-                        network === 'duero'
-                            ? '.duero'
-                            : network === 'pacific'
-                            ? '.pacific'
-                            : ''
-                    }.dev-ocean.com/address/${contracts[key]}`
+                Object.keys(contracts)
+                    // sort alphabetically
+                    .sort((a, b) => a.localeCompare(b))
+                    .map(key => {
+                        const submarineLink = `https://submarine${
+                            network === 'duero'
+                                ? '.duero'
+                                : network === 'pacific'
+                                ? '.pacific'
+                                : ''
+                        }.dev-ocean.com/address/${contracts[key]}`
 
-                    return (
-                        <tr key={key}>
-                            <td>
-                                <span className={styles.label}>{key}</span>
-                            </td>
-                            <td>
-                                <a href={submarineLink}>
-                                    <code>{contracts[key]}</code>
-                                </a>
-                            </td>
-                        </tr>
-                    )
-                })}
+                        return (
+                            <tr key={key}>
+                                <td>
+                                    <span className={styles.label}>{key}</span>
+                                </td>
+                                <td>
+                                    <a href={submarineLink}>
+                                        <code>{contracts[key]}</code>
+                                    </a>
+                                </td>
+                            </tr>
+                        )
+                    })}
         </tbody>
     </table>
 )
@@ -72,42 +75,44 @@ const VersionTable = ({ data }: { data: VersionNumbersState }) => (
     <div className={styles.tableWrap}>
         <table className={styles.table}>
             <tbody>
-                {Object.entries(data).map(([key, value]) => (
-                    <Fragment key={key}>
-                        <tr>
-                            <td>
-                                <a
-                                    href={
-                                        value.name &&
-                                        `https://github.com/oceanprotocol/${slugify(
-                                            value.name
-                                        )}`
-                                    }
-                                >
-                                    <strong>{value.name}</strong>
-                                </a>
-                            </td>
-                            <td>
-                                <VersionNumber
-                                    name={value.name}
-                                    version={value.version}
-                                    status={value.status}
-                                    // network={value.network}
-                                />
-                            </td>
-                        </tr>
-                        {/* {value.contracts && (
+                {Object.entries(data)
+                    .filter(([key, value]) => key !== 'status')
+                    .map(([key, value]) => (
+                        <Fragment key={key}>
                             <tr>
-                                <td colSpan={2}>
-                                    <VersionTableContracts
-                                        contracts={value.contracts}
-                                        network={value.network || ''}
+                                <td>
+                                    <a
+                                        href={
+                                            value.name &&
+                                            `https://github.com/oceanprotocol/${slugify(
+                                                value.name
+                                            )}`
+                                        }
+                                    >
+                                        <strong>{value.name}</strong>
+                                    </a>
+                                </td>
+                                <td>
+                                    <VersionNumber
+                                        name={value.name}
+                                        version={value.version}
+                                        status={value.status}
+                                        network={value.network}
                                     />
                                 </td>
                             </tr>
-                        )} */}
-                    </Fragment>
-                ))}
+                            {value.contracts && (
+                                <tr>
+                                    <td colSpan={2}>
+                                        <VersionTableContracts
+                                            contracts={value.contracts}
+                                            network={value.network || ''}
+                                        />
+                                    </td>
+                                </tr>
+                            )}
+                        </Fragment>
+                    ))}
             </tbody>
         </table>
     </div>
diff --git a/client/src/components/molecules/VersionNumbers/index.tsx b/client/src/components/molecules/VersionNumbers/index.tsx
index b1e27b2..8337fcb 100644
--- a/client/src/components/molecules/VersionNumbers/index.tsx
+++ b/client/src/components/molecules/VersionNumbers/index.tsx
@@ -8,7 +8,7 @@ import axios from 'axios'
 import { version } from '../../../../package.json'
 import styles from './index.module.scss'
 
-import { faucetUri } from '../../../config'
+// import { faucetUri } from '../../../config'
 import { User } from '../../../context'
 
 import VersionTable from './VersionTable'
@@ -43,11 +43,6 @@ export default class VersionNumbers extends PureComponent<
             name: 'Commons',
             version: commonsVersion
         },
-        faucet: {
-            name: 'Faucet',
-            version: '',
-            status: OceanPlatformTechStatus.Loading
-        },
         squid: {
             name: 'Squid-js',
             status: OceanPlatformTechStatus.Loading
@@ -58,7 +53,18 @@ export default class VersionNumbers extends PureComponent<
         },
         brizo: {
             name: 'Brizo',
+            network: 'Nile',
             status: OceanPlatformTechStatus.Loading
+        },
+        faucet: {
+            name: 'Faucet',
+            version: '',
+            status: OceanPlatformTechStatus.Loading
+        },
+        status: {
+            ok: false,
+            contracts: false,
+            network: false
         }
     }
 
@@ -75,10 +81,12 @@ export default class VersionNumbers extends PureComponent<
 
     private async getOceanVersions() {
         const { ocean } = this.context
-        const { versions } = ocean
-        const componentVersions = versions && (await versions.get())
-        const { squid, brizo, aquarius } = componentVersions
-        console.log(componentVersions)
+
+        // wait until ocean object is properly populated
+        if (ocean.versions === undefined) return
+
+        const response = await ocean.versions.get()
+        const { squid, brizo, aquarius, status } = response
 
         // const faucet = await this.getData(faucetUri)
 
@@ -86,10 +94,10 @@ export default class VersionNumbers extends PureComponent<
             commons: { ...this.state.commons },
             squid,
             brizo,
-            aquarius
+            aquarius,
+            status
             // faucet
         })
-        console.log(this.state)
     }
 
     private async getData(uri: string) {