From f10ca30c158b6f6468380fa97e9461c5fe6eeced Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 15 Feb 2019 15:23:13 +0100
Subject: [PATCH] hide input label, prepare user asset list as new component

---
 .../molecules/AssetsUser.module.scss          | 19 +++++++
 src/components/molecules/AssetsUser.tsx       | 54 +++++++++++++++++++
 src/routes/Home.module.scss                   | 20 ++-----
 src/routes/Home.tsx                           | 11 +---
 4 files changed, 79 insertions(+), 25 deletions(-)
 create mode 100644 src/components/molecules/AssetsUser.module.scss
 create mode 100644 src/components/molecules/AssetsUser.tsx

diff --git a/src/components/molecules/AssetsUser.module.scss b/src/components/molecules/AssetsUser.module.scss
new file mode 100644
index 0000000..73e708a
--- /dev/null
+++ b/src/components/molecules/AssetsUser.module.scss
@@ -0,0 +1,19 @@
+@import '../../styles/variables';
+
+.assetsUser {
+    margin-top: $spacer * 3;
+    margin-bottom: $spacer;
+
+    > div {
+        text-align: center;
+        margin-top: $spacer;
+        margin-bottom: $spacer;
+    }
+}
+
+.subTitle {
+    font-size: $font-size-h4;
+    color: $brand-grey-light;
+    border-bottom: 1px solid $brand-grey-lighter;
+    padding-bottom: $spacer / 2;
+}
diff --git a/src/components/molecules/AssetsUser.tsx b/src/components/molecules/AssetsUser.tsx
new file mode 100644
index 0000000..f99f042
--- /dev/null
+++ b/src/components/molecules/AssetsUser.tsx
@@ -0,0 +1,54 @@
+import React, { PureComponent } from 'react'
+import { Link } from 'react-router-dom'
+import styles from './AssetsUser.module.scss'
+
+export default class AssetsUser extends PureComponent {
+    public state = { results: [] }
+
+    public componentDidMount() {
+        this.searchOcean()
+    }
+
+    private async searchOcean() {
+        const queryRequest: any = {
+            offset: 100,
+            page: 0,
+            query: {
+                // TODO: query all assets published by current active account
+                $text: {
+                    $search: 'account ID'
+                }
+            }
+        }
+        const assets = await this.context.ocean.searchAssets(queryRequest)
+        this.setState({ results: assets })
+    }
+
+    // TODO: this should be removed and replaced by Asset.tsx component
+    private renderAssetBox = (asset: any) => {
+        const { metadata } = asset.findServiceByType('Metadata')
+        return (
+            <Link key={asset.id} to={`/asset/${asset.id}`}>
+                <div>{metadata.base.name}</div>
+                <div>{metadata.base.description}</div>
+            </Link>
+        )
+    }
+
+    public render() {
+        return (
+            <div className={styles.assetsUser}>
+                <h2 className={styles.subTitle}>Your Data Sets</h2>
+
+                {this.state.results.length ? (
+                    this.state.results.map(asset => this.renderAssetBox(asset))
+                ) : (
+                    <div>
+                        <p>None yet.</p>
+                        <Link to="/publish">+ Publish A Data Set</Link>
+                    </div>
+                )}
+            </div>
+        )
+    }
+}
diff --git a/src/routes/Home.module.scss b/src/routes/Home.module.scss
index da87cc8..472e6ca 100644
--- a/src/routes/Home.module.scss
+++ b/src/routes/Home.module.scss
@@ -2,22 +2,10 @@
 
 .home {
     display: block;
-}
 
-.published {
-    margin-top: $spacer * 3;
-    margin-bottom: $spacer;
-
-    > div {
-        text-align: center;
-        margin-top: $spacer;
-        margin-bottom: $spacer;
+    label {
+        height: 0;
+        margin: 0;
+        visibility: hidden;
     }
 }
-
-.subTitle {
-    font-size: $font-size-h4;
-    color: $brand-grey-light;
-    border-bottom: 1px solid $brand-grey-lighter;
-    padding-bottom: $spacer / 2;
-}
diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx
index 1804bf7..2e6fc8a 100644
--- a/src/routes/Home.tsx
+++ b/src/routes/Home.tsx
@@ -1,9 +1,9 @@
 import React, { ChangeEvent, Component, FormEvent } from 'react'
-import { Link } from 'react-router-dom'
 import Button from '../components/atoms/Button'
 import Form from '../components/atoms/Form/Form'
 import Input from '../components/atoms/Form/Input'
 import Route from '../components/templates/Route'
+import AssetsUser from '../components/molecules/AssetsUser'
 import styles from './Home.module.scss'
 
 import meta from '../data/meta.json'
@@ -38,14 +38,7 @@ class Home extends Component<HomeProps, HomeState> {
                     />
                 </Form>
 
-                <div className={styles.published}>
-                    <h2 className={styles.subTitle}>Your Data Sets</h2>
-
-                    <div>
-                        <p>None yet.</p>
-                        <Link to="/publish">+ Publish A Data Set</Link>
-                    </div>
-                </div>
+                <AssetsUser />
             </Route>
         )
     }