user assets list with new Asset component

src/components/molecules/AssetsUser.module.scss

@@ -11,6 +11,21 @@
     }
 }
 
+.assets {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: $spacer;
+    max-width: 100%;
+
+    @media (min-width: $break-point--small) {
+        grid-template-columns: 2fr 2fr;
+    }
+
+    @media (min-width: $break-point--medium) {
+        grid-template-columns: 2fr 2fr 2fr;
+    }
+}
+
 .subTitle {
     font-size: $font-size-h4;
     color: $brand-grey-light;

src/components/molecules/AssetsUser.tsx

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react'
 import { Link } from 'react-router-dom'
+import Asset from '../molecules/Asset'
 import styles from './AssetsUser.module.scss'
 
 export default class AssetsUser extends PureComponent {
@@ -16,7 +17,7 @@ export default class AssetsUser extends PureComponent {
             query: {
                 // TODO: query all assets published by current active account
                 $text: {
-                    $search: 'account ID'
+                    $search: 'zoid'
                 }
             }
         }
@@ -24,24 +25,17 @@ export default class AssetsUser extends PureComponent {
         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 className={styles.assets}>
+                        {this.state.results.map((asset, index) => (
+                            <Asset key={index} asset={asset} />
+                        ))}
+                    </div>
                 ) : (
                     <div>
                         <p>None yet.</p>