From 838757f5e832973f54540b0bd78fd7b6ec3fcafe Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 18 Jun 2019 14:35:18 +0200
Subject: [PATCH] collapse contracts by default

---
 client/package-lock.json                      |   9 ++
 client/package.json                           |   1 +
 client/src/@types/react-collapsed/index.d.ts  |   1 +
 .../VersionNumbers/VersionTable.module.scss   |  17 +++
 .../molecules/VersionNumbers/VersionTable.tsx | 119 +++++++++++-------
 .../molecules/VersionNumbers/index.tsx        |  26 ++--
 6 files changed, 120 insertions(+), 53 deletions(-)
 create mode 100644 client/src/@types/react-collapsed/index.d.ts

diff --git a/client/package-lock.json b/client/package-lock.json
index 92179ec..539084e 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -12982,6 +12982,15 @@
         }
       }
     },
+    "react-collapsed": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/react-collapsed/-/react-collapsed-2.0.1.tgz",
+      "integrity": "sha512-ullymRST/C5iy0szhxpYmIaLUhi+IC8EpFySmUjttoc+ErotaKAx+z1ff0d2PCJF7ksW8crTiOrIwGtFqYw3Tg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "raf": "^3.4.0"
+      }
+    },
     "react-datepicker": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-2.6.0.tgz",
diff --git a/client/package.json b/client/package.json
index 2186d8b..b093d2f 100644
--- a/client/package.json
+++ b/client/package.json
@@ -25,6 +25,7 @@
     "moment": "^2.24.0",
     "query-string": "^6.5.0",
     "react": "^16.8.6",
+    "react-collapsed": "^2.0.1",
     "react-datepicker": "^2.5.0",
     "react-dom": "^16.8.6",
     "react-dotdotdot": "^1.3.0",
diff --git a/client/src/@types/react-collapsed/index.d.ts b/client/src/@types/react-collapsed/index.d.ts
new file mode 100644
index 0000000..cde8d94
--- /dev/null
+++ b/client/src/@types/react-collapsed/index.d.ts
@@ -0,0 +1 @@
+declare module 'react-collapsed'
diff --git a/client/src/components/molecules/VersionNumbers/VersionTable.module.scss b/client/src/components/molecules/VersionNumbers/VersionTable.module.scss
index 348288e..bbdb0c3 100644
--- a/client/src/components/molecules/VersionNumbers/VersionTable.module.scss
+++ b/client/src/components/molecules/VersionNumbers/VersionTable.module.scss
@@ -10,6 +10,10 @@
     display: table;
     border-top: 1px solid $brand-grey-lighter;
 
+    tr {
+        position: relative;
+    }
+
     table {
         display: table;
         margin-left: $spacer;
@@ -57,3 +61,16 @@
     composes: spinner, small from '../../atoms/Spinner.module.scss';
     margin-right: $spacer;
 }
+
+.handle {
+    display: inline-block;
+    border: 0;
+    background: none;
+    box-shadow: none;
+    padding: 0;
+    margin: 0;
+    margin-left: -1rem;
+    padding-right: .5rem;
+    cursor: pointer;
+    color: $brand-grey-light;
+}
diff --git a/client/src/components/molecules/VersionNumbers/VersionTable.tsx b/client/src/components/molecules/VersionNumbers/VersionTable.tsx
index 495c2e7..9124a37 100644
--- a/client/src/components/molecules/VersionNumbers/VersionTable.tsx
+++ b/client/src/components/molecules/VersionNumbers/VersionTable.tsx
@@ -1,8 +1,9 @@
-import React, { Fragment } from 'react'
+import React, { Fragment, useState } from 'react'
 import { OceanPlatformTechStatus } from '@oceanprotocol/squid'
+import slugify from '@sindresorhus/slugify'
+import useCollapse from 'react-collapsed'
 import { VersionNumbersState } from '.'
 import styles from './VersionTable.module.scss'
-import slugify from '@sindresorhus/slugify'
 
 const VersionTableContracts = ({
     contracts,
@@ -71,48 +72,78 @@ const VersionNumber = ({
         <span>{status || 'Could not get version'}</span>
     )
 
-const VersionTable = ({ data }: { data: VersionNumbersState }) => (
-    <div className={styles.tableWrap}>
-        <table className={styles.table}>
-            <tbody>
-                {Object.entries(data)
-                    .filter(([key, value]) => key !== 'status')
-                    .map(([key, value]) => (
-                        <Fragment key={key}>
-                            <tr>
-                                <td>
-                                    <a
-                                        href={`https://github.com/oceanprotocol/${slugify(
-                                            value.name || value.software
-                                        )}`}
-                                    >
-                                        <strong>{value.name}</strong>
-                                    </a>
-                                </td>
-                                <td>
-                                    <VersionNumber
-                                        name={value.name || value.software}
-                                        version={value.version}
-                                        status={value.status}
-                                        network={value.network}
-                                    />
-                                </td>
-                            </tr>
-                            {value.contracts && (
-                                <tr>
-                                    <td colSpan={2}>
-                                        <VersionTableContracts
-                                            contracts={value.contracts}
-                                            network={value.network || ''}
-                                        />
-                                    </td>
-                                </tr>
+const VersionRow = ({ value }: { value: any }) => {
+    const collapseStyles = {
+        transitionDuration: '0.1s'
+    }
+
+    const expandStyles = {
+        transitionDuration: '0.1s'
+    }
+
+    const { getCollapseProps, getToggleProps, isOpen } = useCollapse({
+        collapseStyles,
+        expandStyles
+    })
+
+    return (
+        <>
+            <tr>
+                <td>
+                    {value.contracts && (
+                        <button className={styles.handle} {...getToggleProps()}>
+                            {isOpen ? (
+                                <span>&#9660;</span>
+                            ) : (
+                                <span>&#9658;</span>
                             )}
-                        </Fragment>
-                    ))}
-            </tbody>
-        </table>
-    </div>
-)
+                        </button>
+                    )}
+                    <a
+                        href={`https://github.com/oceanprotocol/${slugify(
+                            value.name || value.software
+                        )}`}
+                    >
+                        <strong>{value.name}</strong>
+                    </a>
+                </td>
+                <td>
+                    <VersionNumber
+                        name={value.name || value.software}
+                        version={value.version}
+                        status={value.status}
+                        network={value.network}
+                    />
+                </td>
+            </tr>
+            {value.contracts && (
+                <tr {...getCollapseProps()}>
+                    <td colSpan={2}>
+                        <VersionTableContracts
+                            contracts={value.contracts}
+                            network={value.network || ''}
+                        />
+                    </td>
+                </tr>
+            )}
+        </>
+    )
+}
+
+const VersionTable = ({ data }: { data: VersionNumbersState }) => {
+    return (
+        <div className={styles.tableWrap}>
+            <table className={styles.table}>
+                <tbody>
+                    {Object.entries(data)
+                        .filter(([key, value]) => key !== 'status')
+                        .map(([key, value]) => (
+                            <VersionRow key={key} value={value} />
+                        ))}
+                </tbody>
+            </table>
+        </div>
+    )
+}
 
 export default VersionTable
diff --git a/client/src/components/molecules/VersionNumbers/index.tsx b/client/src/components/molecules/VersionNumbers/index.tsx
index 1529f16..6f48074 100644
--- a/client/src/components/molecules/VersionNumbers/index.tsx
+++ b/client/src/components/molecules/VersionNumbers/index.tsx
@@ -120,20 +120,28 @@ export default class VersionNumbers extends PureComponent<
         }
     }
 
-    public render() {
-        const { minimal } = this.props
+    private MinimalOutput = () => {
         const { commons, squid, brizo, aquarius } = this.state
 
-        const mimimalOutput = `${squid.name} v${squid.version}\n${
-            brizo.name
-        } v${brizo.version}\n${aquarius.name} v${aquarius.version}`
-
-        return minimal ? (
+        return (
             <p className={styles.versionsMinimal}>
-                <a title={mimimalOutput} href={'/about'}>
-                    v{commons.version} {brizo.network && `(${brizo.network})`}
+                <a
+                    title={`${squid.name} v${squid.version}\n${brizo.name} v${
+                        brizo.version
+                    }\n${aquarius.name} v${aquarius.version}`}
+                    href={'/about'}
+                >
+                    v{commons.version} {squid.network && `(${squid.network})`}
                 </a>
             </p>
+        )
+    }
+
+    public render() {
+        const { minimal } = this.props
+
+        return minimal ? (
+            <this.MinimalOutput />
         ) : (
             <div className={styles.versions} id="#oceanversions">
                 <h2 className={styles.versionsTitle}>