From 273025d8efb70c7d63bdb586cb7eb7b685b5daa4 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 13 Feb 2019 17:03:26 +0100
Subject: [PATCH 01/10] search results grid & asset tile

---
 src/components/molecules/Asset.module.scss | 36 ++++++++++++++++++++++
 src/components/molecules/Asset.tsx         | 22 +++++++++++++
 src/data/form-publish.json                 |  2 --
 src/routes/Search.module.scss              | 16 ++++++++++
 src/routes/Search.tsx                      | 27 ++++++++--------
 5 files changed, 86 insertions(+), 17 deletions(-)
 create mode 100644 src/components/molecules/Asset.module.scss
 create mode 100644 src/components/molecules/Asset.tsx
 create mode 100644 src/routes/Search.module.scss

diff --git a/src/components/molecules/Asset.module.scss b/src/components/molecules/Asset.module.scss
new file mode 100644
index 0000000..c3e5755
--- /dev/null
+++ b/src/components/molecules/Asset.module.scss
@@ -0,0 +1,36 @@
+@import '../../styles/variables';
+
+.asset {
+    > a {
+        display: block;
+        padding: $spacer;
+        border: 1px solid $brand-grey-lighter;
+        border-radius: $border-radius;
+        background: $brand-white;
+        color: inherit;
+
+        &:hover,
+        &:focus {
+            color: inherit;
+            border-color: $brand-pink;
+            transform: none;
+        }
+    }
+
+    h1 {
+        font-size: $font-size-large;
+        margin-top: 0;
+    }
+
+    p {
+        margin-bottom: 0;
+        font-size: $font-size-small;
+    }
+}
+
+.assetFooter {
+    border-top: 1px solid $brand-grey-lighter;
+    padding-top: $spacer / 2;
+    margin-top: $spacer / 2;
+    font-size: $font-size-small;
+}
diff --git a/src/components/molecules/Asset.tsx b/src/components/molecules/Asset.tsx
new file mode 100644
index 0000000..5785afa
--- /dev/null
+++ b/src/components/molecules/Asset.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import styles from './Asset.module.scss'
+
+const AssetLink = ({ asset }: { asset: any }) => {
+    const { metadata } = asset.findServiceByType('Metadata')
+
+    return (
+        <article className={styles.asset}>
+            <Link to={`/asset/${asset.id}`}>
+                <h1>{metadata.base.name}</h1>
+                <p>{metadata.base.description.substring(0, 140)}</p>
+
+                <footer className={styles.assetFooter}>
+                    <div>{metadata.base.category}</div>
+                </footer>
+            </Link>
+        </article>
+    )
+}
+
+export default AssetLink
diff --git a/src/data/form-publish.json b/src/data/form-publish.json
index 7fcb152..c758b98 100644
--- a/src/data/form-publish.json
+++ b/src/data/form-publish.json
@@ -26,7 +26,6 @@
     "type": {
       "label": "Type",
       "type": "select",
-      "required": true,
       "options": ["Data set", "Algorithm", "Container", "Workflow", "Other"]
     },
     "author": {
@@ -58,7 +57,6 @@
     "categories": {
       "label": "Categories",
       "type": "select",
-      "required": true,
       "options": [
         "Image Recognition",
         "Dataset Of Datasets",
diff --git a/src/routes/Search.module.scss b/src/routes/Search.module.scss
new file mode 100644
index 0000000..41304db
--- /dev/null
+++ b/src/routes/Search.module.scss
@@ -0,0 +1,16 @@
+@import '../styles/variables';
+
+.results {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: $spacer * 2;
+    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;
+    }
+}
diff --git a/src/routes/Search.tsx b/src/routes/Search.tsx
index 05e0bbd..901437f 100644
--- a/src/routes/Search.tsx
+++ b/src/routes/Search.tsx
@@ -1,8 +1,9 @@
 import queryString from 'query-string'
 import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
 import Route from '../components/templates/Route'
 import { User } from '../context/User'
+import Asset from '../components/molecules/Asset'
+import styles from './Search.module.scss'
 
 interface SearchState {
     results: any[]
@@ -31,25 +32,21 @@ export default class Search extends Component<SearchProps, SearchState> {
         this.setState({ results: assets })
     }
 
-    private renderAssetBox = (asset: any) => {
-        const { metadata } = asset.findServiceByType('Metadata')
-        return (
-            <Link key={asset.id} to={`/asset/${asset.id}`}>
-                <div>{asset.id}</div>
-                <div>{metadata.base.name}</div>
-                <div>{metadata.base.description}</div>
-            </Link>
+    public renderResults = () =>
+        this.state.results.length ? (
+            <div className={styles.results}>
+                {this.state.results.map(asset => (
+                    <Asset key={asset} asset={asset} />
+                ))}
+            </div>
+        ) : (
+            <div>No data sets yet</div>
         )
-    }
 
     public render() {
         return (
             <Route title="Search Results" wide>
-                {this.state.results.length ? (
-                    this.state.results.map(asset => this.renderAssetBox(asset))
-                ) : (
-                    <div>No data sets yet</div>
-                )}
+                {this.renderResults()}
             </Route>
         )
     }

From 1d01d0edf2f3b14567746c82d34319e32b3e1c4b Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 14 Feb 2019 13:33:21 +0100
Subject: [PATCH 02/10] asset full view styling

---
 src/Routes.tsx                                |  2 +-
 src/components/templates/Route.module.scss    |  2 +-
 src/components/templates/Route.tsx            | 12 +--
 src/routes/Details/AssetDetails.module.scss   | 88 +++++++++++++++++++
 src/routes/Details/AssetDetails.tsx           | 82 +++++++++++++++++
 src/routes/{Details.tsx => Details/index.tsx} | 33 +++----
 6 files changed, 193 insertions(+), 26 deletions(-)
 create mode 100644 src/routes/Details/AssetDetails.module.scss
 create mode 100644 src/routes/Details/AssetDetails.tsx
 rename src/routes/{Details.tsx => Details/index.tsx} (76%)

diff --git a/src/Routes.tsx b/src/Routes.tsx
index 0009c32..84fef08 100644
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Route, Switch } from 'react-router-dom'
 
 import About from './routes/About'
-import Details from './routes/Details'
+import Details from './routes/Details/'
 import Home from './routes/Home'
 import NotFound from './routes/NotFound'
 import Publish from './routes/Publish/'
diff --git a/src/components/templates/Route.module.scss b/src/components/templates/Route.module.scss
index 00280f8..323783f 100644
--- a/src/components/templates/Route.module.scss
+++ b/src/components/templates/Route.module.scss
@@ -2,7 +2,7 @@
 
 .header {
     margin-top: $spacer;
-    margin-bottom: $spacer * 2;
+    margin-bottom: $spacer;
 
     h1 {
         margin: 0;
diff --git a/src/components/templates/Route.tsx b/src/components/templates/Route.tsx
index 5153158..f5aa93f 100644
--- a/src/components/templates/Route.tsx
+++ b/src/components/templates/Route.tsx
@@ -24,12 +24,14 @@ const Route = ({
         </Helmet>
 
         <Content wide={wide}>
-            <header className={styles.header}>
-                <h1>{title}</h1>
-                {description && <p>{description}</p>}
-            </header>
+            <article>
+                <header className={styles.header}>
+                    <h1>{title}</h1>
+                    {description && <p>{description}</p>}
+                </header>
 
-            {children}
+                {children}
+            </article>
         </Content>
     </div>
 )
diff --git a/src/routes/Details/AssetDetails.module.scss b/src/routes/Details/AssetDetails.module.scss
new file mode 100644
index 0000000..b8f6e48
--- /dev/null
+++ b/src/routes/Details/AssetDetails.module.scss
@@ -0,0 +1,88 @@
+@import '../../styles/variables';
+
+.metaPrimary {
+    margin-bottom: $spacer;
+}
+
+.copyrightHolder {
+    color: $brand-grey-light;
+    font-size: $font-size-large;
+    border-bottom: 1px solid $brand-grey-lighter;
+    margin-bottom: $spacer / 2;
+    padding-bottom: $spacer / 2;
+}
+
+.metaPrimaryData {
+    font-size: $font-size-small;
+
+    span {
+        display: block;
+        white-space: nowrap;
+    }
+
+    @media (min-width: $break-point--small) {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+
+        span {
+            flex: 0 0 48%;
+        }
+    }
+
+    @media (min-width: $break-point--medium) {
+        span {
+            flex: 0;
+        }
+    }
+}
+
+.meta {
+    border-top: 1px solid $brand-grey-lighter;
+    border-bottom: 1px solid $brand-grey-lighter;
+    padding-top: $spacer;
+    padding-bottom: $spacer;
+    margin-top: $spacer;
+    margin-bottom: $spacer;
+    list-style: none;
+    padding-left: 0;
+
+    li {
+        width: 100%;
+        margin-bottom: $spacer;
+
+        @media (min-width: $break-point--small) {
+            display: flex;
+            margin-bottom: 0;
+        }
+
+        &:before {
+            display: none;
+        }
+    }
+}
+
+.metaLabel {
+    display: block;
+
+    @media (min-width: $break-point--small) {
+        width: 30%;
+    }
+}
+
+.metaValue {
+    display: block;
+
+    &,
+    code {
+        overflow-wrap: break-word;
+    }
+
+    code {
+        display: inline;
+    }
+
+    @media (min-width: $break-point--small) {
+        width: 70%;
+    }
+}
diff --git a/src/routes/Details/AssetDetails.tsx b/src/routes/Details/AssetDetails.tsx
new file mode 100644
index 0000000..6fbb152
--- /dev/null
+++ b/src/routes/Details/AssetDetails.tsx
@@ -0,0 +1,82 @@
+import React, { PureComponent } from 'react'
+import Button from '../../components/atoms/Button'
+import styles from './AssetDetails.module.scss'
+
+interface AssetDetailsProps {
+    metadata: any
+    ddo: any
+    purchaseAsset: any
+}
+
+export default class AssetDetails extends PureComponent<AssetDetailsProps> {
+    public render() {
+        const { metadata, ddo, purchaseAsset } = this.props
+
+        return (
+            <>
+                <aside className={styles.metaPrimary}>
+                    <h2 className={styles.copyrightHolder}>
+                        {metadata.base.copyrightHolder}
+                    </h2>
+                    <div className={styles.metaPrimaryData}>
+                        <span>{metadata.base.dateCreated}</span>
+                        <span>json</span>
+                        <span>18.5 MB</span>
+                        {metadata.base.categories && (
+                            <span>{metadata.base.categories[0]}</span>
+                        )}
+                    </div>
+                </aside>
+
+                <div>{metadata.base.description}</div>
+
+                <ul className={styles.meta}>
+                    <li>
+                        <span className={styles.metaLabel}>
+                            <strong>Author</strong>
+                        </span>
+                        <span className={styles.metaValue}>
+                            {metadata.base.author}
+                        </span>
+                    </li>
+                    <li>
+                        <span className={styles.metaLabel}>
+                            <strong>License</strong>
+                        </span>
+                        <span className={styles.metaValue}>
+                            {metadata.base.license}
+                        </span>
+                    </li>
+                    <li>
+                        <span className={styles.metaLabel}>
+                            <strong>File Encoding</strong>
+                        </span>
+                        <span className={styles.metaValue}>UTF-8</span>
+                    </li>
+                    <li>
+                        <span className={styles.metaLabel}>
+                            <strong>Compression</strong>
+                        </span>
+                        <span className={styles.metaValue}>None</span>
+                    </li>
+                    <li>
+                        <span className={styles.metaLabel}>
+                            <strong>DID</strong>
+                        </span>
+                        <span className={styles.metaValue}>
+                            <code>{ddo.id}</code>
+                        </span>
+                    </li>
+                </ul>
+
+                <Button onClick={() => purchaseAsset(ddo)}>
+                    Purchase asset
+                </Button>
+
+                <pre>
+                    <code>{JSON.stringify(metadata, null, 2)}</code>
+                </pre>
+            </>
+        )
+    }
+}
diff --git a/src/routes/Details.tsx b/src/routes/Details/index.tsx
similarity index 76%
rename from src/routes/Details.tsx
rename to src/routes/Details/index.tsx
index 4a8fcf1..8680ac2 100644
--- a/src/routes/Details.tsx
+++ b/src/routes/Details/index.tsx
@@ -1,9 +1,9 @@
 import { Logger } from '@oceanprotocol/squid'
 import React, { Component } from 'react'
-import Route from '../components/templates/Route'
-import Button from '../components/atoms/Button'
-import { User } from '../context/User'
+import Route from '../../components/templates/Route'
+import { User } from '../../context/User'
 import quertString from 'query-string'
+import AssetDetails from './AssetDetails'
 
 interface DetailsState {
     ddo: any
@@ -16,7 +16,7 @@ interface DetailsProps {
 }
 
 export default class Details extends Component<DetailsProps, DetailsState> {
-    public state = { ddo: null, metadata: null }
+    public state = { ddo: {}, metadata: {} }
 
     public async componentDidMount() {
         const ddo = await this.context.ocean.resolveDID(
@@ -56,23 +56,18 @@ export default class Details extends Component<DetailsProps, DetailsState> {
         }
     }
 
-    private showDetails = (ddo: any) => {
-        return (
-            <>
-                <div>{JSON.stringify(this.state.metadata)}</div>
-
-                <Button onClick={() => this.purchaseAsset(ddo)}>
-                    Purchase asset
-                </Button>
-            </>
-        )
-    }
-
     public render() {
+        const { metadata, ddo } = this.state
+        const { base } = metadata
+
         return (
-            <Route title={'Details'}>
-                {this.state.metadata ? (
-                    this.showDetails(this.state.ddo)
+            <Route title={metadata && base ? base.name : 'Loading Details'}>
+                {metadata ? (
+                    <AssetDetails
+                        metadata={metadata}
+                        ddo={ddo}
+                        purchaseAsset={this.purchaseAsset}
+                    />
                 ) : (
                     <div>Loading</div>
                 )}

From e1228fa471b985c815cf57fb898f0cd77529911c Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 15 Feb 2019 13:10:57 +0100
Subject: [PATCH 03/10] asset details rendering fix

---
 src/routes/Details/AssetDetails.tsx | 19 +++++++------------
 src/routes/Details/index.tsx        | 22 ++++++++++++----------
 tsconfig.json                       | 10 ++--------
 3 files changed, 21 insertions(+), 30 deletions(-)

diff --git a/src/routes/Details/AssetDetails.tsx b/src/routes/Details/AssetDetails.tsx
index 6fbb152..bfc2617 100644
--- a/src/routes/Details/AssetDetails.tsx
+++ b/src/routes/Details/AssetDetails.tsx
@@ -11,41 +11,36 @@ interface AssetDetailsProps {
 export default class AssetDetails extends PureComponent<AssetDetailsProps> {
     public render() {
         const { metadata, ddo, purchaseAsset } = this.props
+        const { base } = metadata
 
         return (
             <>
                 <aside className={styles.metaPrimary}>
                     <h2 className={styles.copyrightHolder}>
-                        {metadata.base.copyrightHolder}
+                        {base.copyrightHolder}
                     </h2>
                     <div className={styles.metaPrimaryData}>
-                        <span>{metadata.base.dateCreated}</span>
+                        <span>{base.dateCreated}</span>
                         <span>json</span>
                         <span>18.5 MB</span>
-                        {metadata.base.categories && (
-                            <span>{metadata.base.categories[0]}</span>
-                        )}
+                        {base.categories && <span>{base.categories[0]}</span>}
                     </div>
                 </aside>
 
-                <div>{metadata.base.description}</div>
+                <div>{base.description}</div>
 
                 <ul className={styles.meta}>
                     <li>
                         <span className={styles.metaLabel}>
                             <strong>Author</strong>
                         </span>
-                        <span className={styles.metaValue}>
-                            {metadata.base.author}
-                        </span>
+                        <span className={styles.metaValue}>{base.author}</span>
                     </li>
                     <li>
                         <span className={styles.metaLabel}>
                             <strong>License</strong>
                         </span>
-                        <span className={styles.metaValue}>
-                            {metadata.base.license}
-                        </span>
+                        <span className={styles.metaValue}>{base.license}</span>
                     </li>
                     <li>
                         <span className={styles.metaLabel}>
diff --git a/src/routes/Details/index.tsx b/src/routes/Details/index.tsx
index 8680ac2..176d4f5 100644
--- a/src/routes/Details/index.tsx
+++ b/src/routes/Details/index.tsx
@@ -1,13 +1,14 @@
-import { Logger } from '@oceanprotocol/squid'
 import React, { Component } from 'react'
+import { Logger } from '@oceanprotocol/squid'
+import queryString from 'query-string'
 import Route from '../../components/templates/Route'
+import Spinner from '../../components/atoms/Spinner'
 import { User } from '../../context/User'
-import quertString from 'query-string'
 import AssetDetails from './AssetDetails'
 
 interface DetailsState {
     ddo: any
-    metadata: any
+    metadata: { base: { name: string } }
 }
 
 interface DetailsProps {
@@ -16,14 +17,14 @@ interface DetailsProps {
 }
 
 export default class Details extends Component<DetailsProps, DetailsState> {
-    public state = { ddo: {}, metadata: {} }
+    public state = { ddo: {}, metadata: { base: { name: '' } } }
 
     public async componentDidMount() {
         const ddo = await this.context.ocean.resolveDID(
             this.props.match.params.did
         )
         const { metadata } = ddo.findServiceByType('Metadata')
-        this.setState({ ddo, metadata })
+        this.setState({ ddo, metadata: { base: metadata.base } })
     }
 
     private purchaseAsset = async (ddo: any) => {
@@ -42,7 +43,7 @@ export default class Details extends Component<DetailsProps, DetailsState> {
                 serviceAgreementSignatureResult.serviceAgreementSignature,
                 (files: any) => {
                     files.forEach((file: any) => {
-                        const parsedUrl: any = quertString.parseUrl(file)
+                        const parsedUrl: any = queryString.parseUrl(file)
                         setTimeout(() => {
                             // eslint-disable-next-line
                             window.open(parsedUrl.query.url)
@@ -58,18 +59,19 @@ export default class Details extends Component<DetailsProps, DetailsState> {
 
     public render() {
         const { metadata, ddo } = this.state
-        const { base } = metadata
 
         return (
-            <Route title={metadata && base ? base.name : 'Loading Details'}>
-                {metadata ? (
+            <Route
+                title={metadata.base ? metadata.base.name : 'Loading Details'}
+            >
+                {metadata && metadata.base.name ? (
                     <AssetDetails
                         metadata={metadata}
                         ddo={ddo}
                         purchaseAsset={this.purchaseAsset}
                     />
                 ) : (
-                    <div>Loading</div>
+                    <Spinner message={'Loading asset...'} />
                 )}
             </Route>
         )
diff --git a/tsconfig.json b/tsconfig.json
index 0980b23..2f4d2c3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -19,7 +15,5 @@
     "noEmit": true,
     "jsx": "preserve"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }

From c7c070732128419ea06541d5c459af64cae686da Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 15 Feb 2019 13:11:08 +0100
Subject: [PATCH 04/10] asset tile tweaks

---
 src/components/molecules/Asset.module.scss | 1 +
 src/components/molecules/Asset.tsx         | 2 +-
 src/routes/Search.module.scss              | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/molecules/Asset.module.scss b/src/components/molecules/Asset.module.scss
index c3e5755..7919de0 100644
--- a/src/components/molecules/Asset.module.scss
+++ b/src/components/molecules/Asset.module.scss
@@ -3,6 +3,7 @@
 .asset {
     > a {
         display: block;
+        height: 100%;
         padding: $spacer;
         border: 1px solid $brand-grey-lighter;
         border-radius: $border-radius;
diff --git a/src/components/molecules/Asset.tsx b/src/components/molecules/Asset.tsx
index 5785afa..b624ba9 100644
--- a/src/components/molecules/Asset.tsx
+++ b/src/components/molecules/Asset.tsx
@@ -9,7 +9,7 @@ const AssetLink = ({ asset }: { asset: any }) => {
         <article className={styles.asset}>
             <Link to={`/asset/${asset.id}`}>
                 <h1>{metadata.base.name}</h1>
-                <p>{metadata.base.description.substring(0, 140)}</p>
+                <p>{metadata.base.description.substring(0, 90)}</p>
 
                 <footer className={styles.assetFooter}>
                     <div>{metadata.base.category}</div>
diff --git a/src/routes/Search.module.scss b/src/routes/Search.module.scss
index 41304db..7d1d86a 100644
--- a/src/routes/Search.module.scss
+++ b/src/routes/Search.module.scss
@@ -3,7 +3,7 @@
 .results {
     display: grid;
     grid-template-columns: 1fr;
-    grid-gap: $spacer * 2;
+    grid-gap: $spacer;
     max-width: 100%;
 
     @media (min-width: $break-point--small) {

From d421986a500286dfc7018b7ec75696aa8e90a410 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 15 Feb 2019 13:36:18 +0100
Subject: [PATCH 05/10] layout tweaks

---
 src/components/atoms/Content.module.scss | 2 +-
 src/routes/Details/AssetDetails.tsx      | 2 +-
 src/routes/Details/index.tsx             | 5 ++++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/atoms/Content.module.scss b/src/components/atoms/Content.module.scss
index 2c0860d..64662ba 100644
--- a/src/components/atoms/Content.module.scss
+++ b/src/components/atoms/Content.module.scss
@@ -2,7 +2,7 @@
 
 .content {
     padding: 0 $spacer / 1.5;
-    max-width: $break-point--small;
+    max-width: 47rem;
     margin: 0 auto;
 
     @media (min-width: $break-point--small) {
diff --git a/src/routes/Details/AssetDetails.tsx b/src/routes/Details/AssetDetails.tsx
index bfc2617..8a2c820 100644
--- a/src/routes/Details/AssetDetails.tsx
+++ b/src/routes/Details/AssetDetails.tsx
@@ -65,7 +65,7 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
                 </ul>
 
                 <Button onClick={() => purchaseAsset(ddo)}>
-                    Purchase asset
+                    Download asset
                 </Button>
 
                 <pre>
diff --git a/src/routes/Details/index.tsx b/src/routes/Details/index.tsx
index 176d4f5..aaa06c6 100644
--- a/src/routes/Details/index.tsx
+++ b/src/routes/Details/index.tsx
@@ -5,6 +5,7 @@ import Route from '../../components/templates/Route'
 import Spinner from '../../components/atoms/Spinner'
 import { User } from '../../context/User'
 import AssetDetails from './AssetDetails'
+import stylesApp from '../../App.module.scss'
 
 interface DetailsState {
     ddo: any
@@ -71,7 +72,9 @@ export default class Details extends Component<DetailsProps, DetailsState> {
                         purchaseAsset={this.purchaseAsset}
                     />
                 ) : (
-                    <Spinner message={'Loading asset...'} />
+                    <div className={stylesApp.loader}>
+                        <Spinner message={'Loading asset...'} />
+                    </div>
                 )}
             </Route>
         )

From 73be4ea6489aedef687945d2d993806d4f5f04a9 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 15 Feb 2019 14:22:35 +0100
Subject: [PATCH 06/10] date formatting, category display

---
 package-lock.json                           | 10 ++++++++
 package.json                                |  2 ++
 src/routes/Details/AssetDetails.module.scss | 11 +++++----
 src/routes/Details/AssetDetails.tsx         | 26 +++++++++++++++++----
 4 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 050c8cc..80d322c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11838,6 +11838,11 @@
       "resolved": "https://registry.npmjs.org/mock-fs/-/mock-fs-4.8.0.tgz",
       "integrity": "sha512-Gwj4KnJOW15YeTJKO5frFd/WDO5Mc0zxXqL9oHx3+e9rBqW8EVARqQHSaIXznUdljrD6pvbNGW2ZGXKPEfYJfw=="
     },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+    },
     "mout": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/mout/-/mout-0.11.1.tgz",
@@ -16602,6 +16607,11 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-moment": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-0.8.4.tgz",
+      "integrity": "sha512-QhI19OcfhiAn60/O6bMR0w8ApXrPFCjv6+eV0I/P9/AswzjgEAx4L7VxMBCpS/jrythLa12Q9v88req+ys4YpA=="
+    },
     "react-router": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
diff --git a/package.json b/package.json
index 4f8710e..9eedc16 100644
--- a/package.json
+++ b/package.json
@@ -23,10 +23,12 @@
     "classnames": "^2.2.6",
     "eslint": "^5.6.0",
     "is-url": "^1.2.4",
+    "moment": "^2.24.0",
     "query-string": "^6.2.0",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
     "react-helmet": "^5.2.0",
+    "react-moment": "^0.8.4",
     "react-router-dom": "^4.3.1",
     "react-transition-group": "^2.5.3",
     "slugify": "^1.3.4",
diff --git a/src/routes/Details/AssetDetails.module.scss b/src/routes/Details/AssetDetails.module.scss
index b8f6e48..f4f46f5 100644
--- a/src/routes/Details/AssetDetails.module.scss
+++ b/src/routes/Details/AssetDetails.module.scss
@@ -8,14 +8,14 @@
     color: $brand-grey-light;
     font-size: $font-size-large;
     border-bottom: 1px solid $brand-grey-lighter;
-    margin-bottom: $spacer / 2;
-    padding-bottom: $spacer / 2;
+    margin-bottom: $spacer / $line-height;
+    padding-bottom: $spacer / $line-height;
 }
 
 .metaPrimaryData {
     font-size: $font-size-small;
 
-    span {
+    > * {
         display: block;
         white-space: nowrap;
     }
@@ -25,13 +25,13 @@
         justify-content: space-between;
         flex-wrap: wrap;
 
-        span {
+        > * {
             flex: 0 0 48%;
         }
     }
 
     @media (min-width: $break-point--medium) {
-        span {
+        > * {
             flex: 0;
         }
     }
@@ -46,6 +46,7 @@
     margin-bottom: $spacer;
     list-style: none;
     padding-left: 0;
+    font-size: $font-size-small;
 
     li {
         width: 100%;
diff --git a/src/routes/Details/AssetDetails.tsx b/src/routes/Details/AssetDetails.tsx
index 8a2c820..85730ba 100644
--- a/src/routes/Details/AssetDetails.tsx
+++ b/src/routes/Details/AssetDetails.tsx
@@ -1,5 +1,7 @@
 import React, { PureComponent } from 'react'
+import { Link } from 'react-router-dom'
 import Button from '../../components/atoms/Button'
+import Moment from 'react-moment'
 import styles from './AssetDetails.module.scss'
 
 interface AssetDetailsProps {
@@ -16,14 +18,28 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
         return (
             <>
                 <aside className={styles.metaPrimary}>
-                    <h2 className={styles.copyrightHolder}>
+                    <h2
+                        className={styles.copyrightHolder}
+                        title="Copyright Holder"
+                    >
                         {base.copyrightHolder}
                     </h2>
                     <div className={styles.metaPrimaryData}>
-                        <span>{base.dateCreated}</span>
-                        <span>json</span>
-                        <span>18.5 MB</span>
-                        {base.categories && <span>{base.categories[0]}</span>}
+                        <span title="Date published">
+                            <Moment
+                                date={base.dateCreated}
+                                format="L"
+                                interval={0}
+                            />
+                        </span>
+                        {base.categories ? (
+                            // TODO: Make this link to search for respective category
+                            <Link to={'search?q='}>{base.categories[0]}</Link>
+                        ) : (
+                            <Link to={'search?q='}>Fake Category</Link>
+                        )}
+                        <span>fake json</span>
+                        <span>fake 18.5 MB</span>
                     </div>
                 </aside>
 

From aedfcd9ca08b26c2809fde70a91dce4df2ca5015 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 15 Feb 2019 14:22:51 +0100
Subject: [PATCH 07/10] allow extending button style classes

---
 src/components/atoms/Button.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/atoms/Button.tsx b/src/components/atoms/Button.tsx
index a309b7f..312565b 100644
--- a/src/components/atoms/Button.tsx
+++ b/src/components/atoms/Button.tsx
@@ -1,8 +1,10 @@
 import React, { PureComponent } from 'react'
+import cx from 'classnames'
 import styles from './Button.module.scss'
 
 interface ButtonProps {
     children: string
+    className?: string
     primary?: boolean
     link?: boolean
     href?: string
@@ -12,7 +14,14 @@ interface ButtonProps {
 export default class Button extends PureComponent<ButtonProps, any> {
     public render() {
         let classes
-        const { primary, link, href, children, ...props } = this.props
+        const {
+            primary,
+            link,
+            href,
+            children,
+            className,
+            ...props
+        } = this.props
 
         if (primary) {
             classes = styles.buttonPrimary
@@ -23,11 +32,11 @@ export default class Button extends PureComponent<ButtonProps, any> {
         }
 
         return href ? (
-            <a href={href} className={classes} {...props}>
+            <a href={href} className={cx(classes, className)} {...props}>
                 {children}
             </a>
         ) : (
-            <button className={classes} {...props}>
+            <button className={cx(classes, className)} {...props}>
                 {children}
             </button>
         )

From 0a5289be206eca7adf38a7e1d200be5582876846 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 15 Feb 2019 14:24:42 +0100
Subject: [PATCH 08/10] respect line breaks in description

---
 src/routes/Details/AssetDetails.module.scss | 5 +++++
 src/routes/Details/AssetDetails.tsx         | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/routes/Details/AssetDetails.module.scss b/src/routes/Details/AssetDetails.module.scss
index f4f46f5..c896777 100644
--- a/src/routes/Details/AssetDetails.module.scss
+++ b/src/routes/Details/AssetDetails.module.scss
@@ -37,6 +37,11 @@
     }
 }
 
+.description {
+    // respect line breaks from textarea
+    white-space: pre-line;
+}
+
 .meta {
     border-top: 1px solid $brand-grey-lighter;
     border-bottom: 1px solid $brand-grey-lighter;
diff --git a/src/routes/Details/AssetDetails.tsx b/src/routes/Details/AssetDetails.tsx
index 85730ba..8605b3a 100644
--- a/src/routes/Details/AssetDetails.tsx
+++ b/src/routes/Details/AssetDetails.tsx
@@ -43,7 +43,7 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
                     </div>
                 </aside>
 
-                <div>{base.description}</div>
+                <div className={styles.description}>{base.description}</div>
 
                 <ul className={styles.meta}>
                     <li>

From 8a707eaba57652866d070b6ead9cb0f0dab104b0 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 15 Feb 2019 14:43:15 +0100
Subject: [PATCH 09/10] more asset tile styling

---
 src/components/molecules/Asset.module.scss  |  1 +
 src/components/molecules/Asset.tsx          | 11 ++++++++---
 src/routes/Details/AssetDetails.module.scss |  1 +
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/molecules/Asset.module.scss b/src/components/molecules/Asset.module.scss
index 7919de0..855b840 100644
--- a/src/components/molecules/Asset.module.scss
+++ b/src/components/molecules/Asset.module.scss
@@ -34,4 +34,5 @@
     padding-top: $spacer / 2;
     margin-top: $spacer / 2;
     font-size: $font-size-small;
+    color: $brand-grey-light;
 }
diff --git a/src/components/molecules/Asset.tsx b/src/components/molecules/Asset.tsx
index b624ba9..fd2555b 100644
--- a/src/components/molecules/Asset.tsx
+++ b/src/components/molecules/Asset.tsx
@@ -4,15 +4,20 @@ import styles from './Asset.module.scss'
 
 const AssetLink = ({ asset }: { asset: any }) => {
     const { metadata } = asset.findServiceByType('Metadata')
+    const { base } = metadata
 
     return (
         <article className={styles.asset}>
             <Link to={`/asset/${asset.id}`}>
-                <h1>{metadata.base.name}</h1>
-                <p>{metadata.base.description.substring(0, 90)}</p>
+                <h1>{base.name}</h1>
+                <p>{base.description.substring(0, 90)}</p>
 
                 <footer className={styles.assetFooter}>
-                    <div>{metadata.base.category}</div>
+                    {base.categories ? (
+                        <div>{base.category}</div>
+                    ) : (
+                        <div>Fake Category</div>
+                    )}
                 </footer>
             </Link>
         </article>
diff --git a/src/routes/Details/AssetDetails.module.scss b/src/routes/Details/AssetDetails.module.scss
index c896777..de65a0c 100644
--- a/src/routes/Details/AssetDetails.module.scss
+++ b/src/routes/Details/AssetDetails.module.scss
@@ -14,6 +14,7 @@
 
 .metaPrimaryData {
     font-size: $font-size-small;
+    color: $brand-grey-light;
 
     > * {
         display: block;

From c1bf956e93332837879b0005a5e20b84f47c2a90 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 15 Feb 2019 14:49:19 +0100
Subject: [PATCH 10/10] mark more fake data

---
 src/routes/Details/AssetDetails.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/Details/AssetDetails.tsx b/src/routes/Details/AssetDetails.tsx
index 8605b3a..792a3ce 100644
--- a/src/routes/Details/AssetDetails.tsx
+++ b/src/routes/Details/AssetDetails.tsx
@@ -38,7 +38,7 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
                         ) : (
                             <Link to={'search?q='}>Fake Category</Link>
                         )}
-                        <span>fake json</span>
+                        <span>fake json contentType</span>
                         <span>fake 18.5 MB</span>
                     </div>
                 </aside>
@@ -62,13 +62,13 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
                         <span className={styles.metaLabel}>
                             <strong>File Encoding</strong>
                         </span>
-                        <span className={styles.metaValue}>UTF-8</span>
+                        <span className={styles.metaValue}>fake UTF-8</span>
                     </li>
                     <li>
                         <span className={styles.metaLabel}>
                             <strong>Compression</strong>
                         </span>
-                        <span className={styles.metaValue}>None</span>
+                        <span className={styles.metaValue}>fake None</span>
                     </li>
                     <li>
                         <span className={styles.metaLabel}>