make AssetsUser component more usable

client/src/components/molecules/Asset.module.scss

@@ -31,11 +31,12 @@
 
 .assetList {
     > a {
-        display: block;
         color: $brand-grey-dark;
         border-bottom: 1px solid $brand-grey-lighter;
         padding-top: $spacer / 2;
         padding-bottom: $spacer / 2;
+        display: flex;
+        justify-content: space-between;
 
         &:hover,
         &:focus {
@@ -51,6 +52,11 @@
     }
 }
 
+.date {
+    font-size: $font-size-small;
+    color: $brand-grey-light;
+}
+
 .assetFooter {
     border-top: 1px solid $brand-grey-lighter;
     padding-top: $spacer / 2;

client/src/components/molecules/Asset.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
+import moment from 'moment'
 import styles from './Asset.module.scss'
 
 const AssetLink = ({ asset, list }: { asset: any; list?: boolean }) => {
@@ -10,6 +11,9 @@ const AssetLink = ({ asset, list }: { asset: any; list?: boolean }) => {
         <article className={styles.assetList}>
             <Link to={`/asset/${asset.id}`}>
                 <h1>{base.name}</h1>
+                <div className={styles.date} title={base.dateCreated}>
+                    {moment(base.dateCreated, 'YYYYMMDD').fromNow()}
+                </div>
             </Link>
         </article>
     ) : (

client/src/components/molecules/AssetsUser.module.scss

@@ -1,15 +1,8 @@
 @import '../../styles/variables';
 
 .assetsUser {
-    margin-top: $spacer * 3;
+    margin-top: $spacer;
     margin-bottom: $spacer;
-
-    > div {
-        margin-bottom: $spacer;
-    }
-}
-
-.assets {
 }
 
 .subTitle {
@@ -19,3 +12,8 @@
     padding-bottom: $spacer / 2;
     margin-bottom: 0;
 }
+
+.link {
+    display: block;
+    margin-top: $spacer / 2;
+}

client/src/components/molecules/AssetsUser.tsx

@@ -1,12 +1,15 @@
 import React, { PureComponent } from 'react'
 import { Link } from 'react-router-dom'
+import { Logger } from '@oceanprotocol/squid'
 import { User } from '../../context/User'
 import Spinner from '../atoms/Spinner'
-import Asset from '../molecules/Asset'
+import Asset from './Asset'
 import styles from './AssetsUser.module.scss'
-import { Logger } from '@oceanprotocol/squid'
 
-export default class AssetsUser extends PureComponent {
+export default class AssetsUser extends PureComponent<
+    { list?: boolean; recent?: boolean },
+    { results: any[]; isLoading: boolean }
+> {
     public state = { results: [], isLoading: true }
 
     public componentDidMount() {
@@ -42,21 +45,33 @@ export default class AssetsUser extends PureComponent {
     public render() {
         return (
             <div className={styles.assetsUser}>
-                <h2 className={styles.subTitle}>Your Data Sets</h2>
+                {this.props.recent && (
+                    <h2 className={styles.subTitle}>Your Latest Data Sets</h2>
+                )}
 
                 {this.state.isLoading ? (
                     <Spinner />
                 ) : this.state.results.length ? (
-                    <div className={styles.assets}>
+                    <>
                         {this.state.results
+                            .slice(0, this.props.recent ? 5 : undefined)
                             .filter(asset => !!asset)
                             .map((asset: any) => (
-                            <Asset key={asset.id} asset={asset} list />
-                        ))}
-                    </div>
+                                <Asset
+                                    list={this.props.list}
+                                    key={asset.id}
+                                    asset={asset}
+                                />
+                            ))}
+                        {this.props.recent && (
+                            <Link className={styles.link} to={'/history'}>
+                                All Data Sets
+                            </Link>
+                        )}
+                    </>
                 ) : (
                     <div>
-                        <p>None yet.</p>
+                        <p>No Data Sets Yet.</p>
                         <Link to="/publish">+ Publish A Data Set</Link>
                     </div>
                 )}

client/src/routes/History.tsx

@@ -1,56 +1,13 @@
 import React, { Component } from 'react'
 import Route from '../components/templates/Route'
-import { User } from '../context/User'
-import Asset from '../components/molecules/Asset'
-import { Logger } from '@oceanprotocol/squid'
-
-interface InvoicesState {
-    results: any[]
-}
-
-export default class Invoices extends Component<{}, InvoicesState> {
-    public state = { results: [] }
-
-    public async componentDidMount() {
-        // this is currently my published assets
-        this.context.ocean.keeper.didRegistry.contract.getPastEvents(
-            'DIDAttributeRegistered',
-            {
-                filter: { _owner: this.context.account },
-                fromBlock: 0,
-                toBlock: 'latest'
-            },
-            async (error: any, events: any) => {
-                if (error) {
-                    Logger.log('error retrieving', error)
-                } else {
-                    const results = []
-                    for (const event of events) {
-                        const ddo = await this.context.ocean.assets.resolve(
-                            `did:op:${event.returnValues._did.substring(2)}`
-                        )
-                        results.push(ddo)
-                    }
-                    this.setState({ results })
-                }
-            }
-        )
-    }
-
-    public renderResults = () =>
-        this.state.results.length ? (
-            this.state.results
-                .filter(asset => !!asset)
-                .map((asset, index) => (
-                    <Asset key={index} asset={asset} list />
-            ))
-        ) : (
-            <div>No invoices yet</div>
-        )
+import AssetsUser from '../components/molecules/AssetsUser'
 
+export default class History extends Component {
     public render() {
-        return <Route title="History">{this.renderResults()}</Route>
+        return (
+            <Route title="History">
+                <AssetsUser list />
+            </Route>
+        )
     }
 }
-
-Invoices.contextType = User

client/src/routes/Home.module.scss

@@ -3,6 +3,10 @@
 .home {
     display: block;
 
+    form {
+        margin-bottom: $spacer * 3;
+    }
+
     label {
         height: 0;
         margin: 0;

client/src/routes/Home.tsx

@@ -41,7 +41,7 @@ class Home extends Component<HomeProps, HomeState> {
                         }
                     />
                 </Form>
-                <AssetsUser />
+                <AssetsUser recent list />
             </Route>
         )
     }