Merge pull request #18 from oceanprotocol/feature/asset-styling

Asset styling

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",

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",

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/'

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>
         )

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) {

src/components/molecules/Asset.module.scss

@@ -0,0 +1,38 @@
+@import '../../styles/variables';
+
+.asset {
+    > a {
+        display: block;
+        height: 100%;
+        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;
+    color: $brand-grey-light;
+}

src/components/molecules/Asset.tsx

@@ -0,0 +1,27 @@
+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')
+    const { base } = metadata
+
+    return (
+        <article className={styles.asset}>
+            <Link to={`/asset/${asset.id}`}>
+                <h1>{base.name}</h1>
+                <p>{base.description.substring(0, 90)}</p>
+
+                <footer className={styles.assetFooter}>
+                    {base.categories ? (
+                        <div>{base.category}</div>
+                    ) : (
+                        <div>Fake Category</div>
+                    )}
+                </footer>
+            </Link>
+        </article>
+    )
+}
+
+export default AssetLink

src/components/templates/Route.module.scss

@@ -2,7 +2,7 @@
 
 .header {
     margin-top: $spacer;
-    margin-bottom: $spacer * 2;
+    margin-bottom: $spacer;
 
     h1 {
         margin: 0;

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>
 )

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",

src/routes/Details/AssetDetails.module.scss

@@ -0,0 +1,95 @@
+@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 / $line-height;
+    padding-bottom: $spacer / $line-height;
+}
+
+.metaPrimaryData {
+    font-size: $font-size-small;
+    color: $brand-grey-light;
+
+    > * {
+        display: block;
+        white-space: nowrap;
+    }
+
+    @media (min-width: $break-point--small) {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+
+        > * {
+            flex: 0 0 48%;
+        }
+    }
+
+    @media (min-width: $break-point--medium) {
+        > * {
+            flex: 0;
+        }
+    }
+}
+
+.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;
+    padding-top: $spacer;
+    padding-bottom: $spacer;
+    margin-top: $spacer;
+    margin-bottom: $spacer;
+    list-style: none;
+    padding-left: 0;
+    font-size: $font-size-small;
+
+    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%;
+    }
+}

src/routes/Details/AssetDetails.tsx

@@ -0,0 +1,93 @@
+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 {
+    metadata: any
+    ddo: any
+    purchaseAsset: any
+}
+
+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}
+                        title="Copyright Holder"
+                    >
+                        {base.copyrightHolder}
+                    </h2>
+                    <div className={styles.metaPrimaryData}>
+                        <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 contentType</span>
+                        <span>fake 18.5 MB</span>
+                    </div>
+                </aside>
+
+                <div className={styles.description}>{base.description}</div>
+
+                <ul className={styles.meta}>
+                    <li>
+                        <span className={styles.metaLabel}>
+                            <strong>Author</strong>
+                        </span>
+                        <span className={styles.metaValue}>{base.author}</span>
+                    </li>
+                    <li>
+                        <span className={styles.metaLabel}>
+                            <strong>License</strong>
+                        </span>
+                        <span className={styles.metaValue}>{base.license}</span>
+                    </li>
+                    <li>
+                        <span className={styles.metaLabel}>
+                            <strong>File Encoding</strong>
+                        </span>
+                        <span className={styles.metaValue}>fake UTF-8</span>
+                    </li>
+                    <li>
+                        <span className={styles.metaLabel}>
+                            <strong>Compression</strong>
+                        </span>
+                        <span className={styles.metaValue}>fake 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)}>
+                    Download asset
+                </Button>
+
+                <pre>
+                    <code>{JSON.stringify(metadata, null, 2)}</code>
+                </pre>
+            </>
+        )
+    }
+}

src/routes/Details/index.tsx

@@ -1,13 +1,15 @@
-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 quertString from 'query-string'
+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 AssetDetails from './AssetDetails'
+import stylesApp from '../../App.module.scss'
 
 interface DetailsState {
     ddo: any
-    metadata: any
+    metadata: { base: { name: string } }
 }
 
 interface DetailsProps {
@@ -16,14 +18,14 @@ interface DetailsProps {
 }
 
 export default class Details extends Component<DetailsProps, DetailsState> {
-    public state = { ddo: null, metadata: null }
+    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 +44,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)
@@ -56,25 +58,23 @@ 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
+
         return (
-            <Route title={'Details'}>
-                {this.state.metadata ? (
-                    this.showDetails(this.state.ddo)
+            <Route
+                title={metadata.base ? metadata.base.name : 'Loading Details'}
+            >
+                {metadata && metadata.base.name ? (
+                    <AssetDetails
+                        metadata={metadata}
+                        ddo={ddo}
+                        purchaseAsset={this.purchaseAsset}
+                    />
                 ) : (
-                    <div>Loading</div>
+                    <div className={stylesApp.loader}>
+                        <Spinner message={'Loading asset...'} />
+                    </div>
                 )}
             </Route>
         )

src/routes/Search.module.scss

@@ -0,0 +1,16 @@
+@import '../styles/variables';
+
+.results {
+    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;
+    }
+}

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>
         )
     }

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"]
 }