Merge branch 'master' into fix/metadata

2023-03-15 18:03:00 +01:00 · 2019-02-15 15:36:31 +01:00 · 2019-02-15 15:36:31 +01:00 · 45798fca23
commit 45798fca23
parent 01b268efaa 9536b4c2e2
16 changed files with 342 additions and 61 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -11800,6 +11800,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",
@ -16564,6 +16569,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",
--- 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",
--- 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/'
--- 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>
        )
--- 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) {
--- a/src/components/molecules/Asset.module.scss
+++ b/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;
+}
--- a/src/components/molecules/Asset.tsx
+++ b/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
--- 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;
--- 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>
 )
--- 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",
--- a/src/routes/Details/AssetDetails.module.scss
+++ b/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%;
+    }
+}
--- a/src/routes/Details/AssetDetails.tsx
+++ b/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>
+            </>
+        )
+    }
+}
--- a/src/routes/Details/index.tsx
+++ b/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) => {
@ -43,7 +45,7 @@ export default class Details extends Component<DetailsProps, DetailsState> {
                (files: any) => {
                    Logger.log('downloading files', files)
                    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)
@ -57,25 +59,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>
        )
--- a/src/routes/Search.module.scss
+++ b/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;
+    }
+}
--- 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>
        )
    }
--- 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"]
 }