latest assets styling

2019-05-23 13:19:13 +02:00 · 2019-05-23 13:19:13 +02:00 · 3199d89d8d
parent aaf425477f
commit 3199d89d8d
9 changed files with 177 additions and 89 deletions
--- a/client/package-lock.json
+++ b/client/package-lock.json
@ -1332,6 +1332,15 @@
      "integrity": "sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q==",
      "dev": true
    },
+    "@sindresorhus/slugify": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-0.9.1.tgz",
+      "integrity": "sha512-b6heYM9dzZD13t2GOiEQTDE0qX+I1GyOotMwKh9VQqzuNiVdPVT8dM43fe9HNb/3ul+Qwd5oKSEDrDIfhq3bnQ==",
+      "requires": {
+        "escape-string-regexp": "^1.0.5",
+        "lodash.deburr": "^4.1.0"
+      }
+    },
    "@svgr/babel-plugin-add-jsx-attribute": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz",
@ -10234,6 +10243,11 @@
      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
    },
+    "lodash.deburr": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz",
+      "integrity": "sha1-3bG7s+8HRYwBd7oH3hRCLLAz/5s="
+    },
    "lodash.memoize": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@ -14524,11 +14538,6 @@
        }
      }
    },
-    "slugify": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.3.4.tgz",
-      "integrity": "sha512-KP0ZYk5hJNBS8/eIjGkFDCzGQIoZ1mnfQRYS5WM3273z+fxGWXeN0fkwf2ebEweydv9tioZIHGZKoF21U07/nw=="
-    },
    "snapdragon": {
      "version": "0.8.2",
      "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
--- a/client/package.json
+++ b/client/package.json
@ -15,6 +15,7 @@
    "@oceanprotocol/art": "^2.2.0",
    "@oceanprotocol/squid": "^0.5.11",
    "@oceanprotocol/typographies": "^0.1.0",
+    "@sindresorhus/slugify": "^0.9.1",
    "classnames": "^2.2.6",
    "ethereum-blockies": "MyEtherWallet/blockies",
    "filesize": "^4.1.2",
@ -34,7 +35,6 @@
    "react-popper": "^1.3.3",
    "react-router-dom": "^5.0.0",
    "react-transition-group": "^4.0.0",
-    "slugify": "^1.3.4",
    "web3": "1.0.0-beta.37"
  },
  "devDependencies": {
--- a/client/src/components/atoms/Form/Input.tsx
+++ b/client/src/components/atoms/Form/Input.tsx
@ -1,6 +1,6 @@
 import cx from 'classnames'
 import React, { PureComponent, FormEvent, ChangeEvent } from 'react'
-import slugify from 'slugify'
+import slugify from '@sindresorhus/slugify'
 import DatePicker from 'react-datepicker'
 import { ReactComponent as SearchIcon } from '../../../img/search.svg'
 import Help from './Help'
@ -131,20 +131,14 @@ export default class Input extends PureComponent<InputProps, InputState> {
                                <div className={styles.radioWrap} key={index}>
                                    <input
                                        className={styles.radio}
-                                        id={slugify(option, {
-                                            lower: true
-                                        })}
+                                        id={slugify(option)}
                                        type={type}
                                        name={name}
-                                        value={slugify(option, {
-                                            lower: true
-                                        })}
+                                        value={slugify(option)}
                                    />
                                    <label
                                        className={styles.radioLabel}
-                                        htmlFor={slugify(option, {
-                                            lower: true
-                                        })}
+                                        htmlFor={slugify(option)}
                                    >
                                        {option}
                                    </label>
--- a/client/src/components/organisms/AssetsLatest.module.scss
+++ b/client/src/components/organisms/AssetsLatest.module.scss
@ -0,0 +1,40 @@
+@import '../../styles/variables';
+
+.latestAssetsWrap {
+    // full width break out of container
+    margin-right: calc(-50vw + 50%);
+}
+
+.latestAssets {
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    display: grid;
+    grid-gap: $spacer;
+    grid-auto-flow: column;
+    padding: $spacer / 2 $spacer;
+    border-left: 1px solid $brand-grey-lighter;
+
+    &::-webkit-scrollbar,
+    &::-moz-scrollbar {
+        display: none;
+    }
+
+    > article {
+        min-width: calc(18rem + #{$spacer * 2.3});
+    }
+}
+
+.title {
+    font-size: $font-size-h3;
+    margin-top: $spacer * 2;
+    text-align: center;
+    margin-bottom: $spacer;
+
+    @media (min-width: $break-point--small) {
+        text-align: left;
+        margin-bottom: $spacer / 2;
+    }
+}
--- a/client/src/components/organisms/AssetsLatest.tsx
+++ b/client/src/components/organisms/AssetsLatest.tsx
@ -0,0 +1,77 @@
+import React, { PureComponent } from 'react'
+import { Logger } from '@oceanprotocol/squid'
+import { User } from '../../context'
+import Spinner from '../atoms/Spinner'
+import Asset from '../molecules/Asset'
+import styles from './AssetsLatest.module.scss'
+
+interface AssetsLatestState {
+    latestAssets?: any[]
+    isLoadingLatest?: boolean
+}
+
+export default class AssetsLatest extends PureComponent<{}, AssetsLatestState> {
+    public state = { latestAssets: [], isLoadingLatest: true }
+
+    public _isMounted: boolean = false
+
+    public componentDidMount() {
+        this._isMounted = true
+        this._isMounted && this.getLatestAssets()
+    }
+
+    public componentWillUnmount() {
+        this._isMounted = false
+    }
+
+    private getLatestAssets = async () => {
+        const { ocean } = this.context
+
+        const searchQuery = {
+            offset: 15,
+            page: 1,
+            query: {
+                price: [-1, 1]
+            },
+            sort: {
+                created: -1
+            }
+        }
+
+        try {
+            const search = await ocean.aquarius.queryMetadata(searchQuery)
+            this.setState({
+                latestAssets: search.results,
+                isLoadingLatest: false
+            })
+        } catch (error) {
+            Logger.error(error.message)
+            this.setState({ isLoadingLatest: false })
+        }
+    }
+
+    public render() {
+        const { latestAssets, isLoadingLatest } = this.state
+
+        return (
+            <>
+                <h2 className={styles.title}>Latest published assets</h2>
+                <div className={styles.latestAssetsWrap}>
+                    {isLoadingLatest ? (
+                        <Spinner message="Loading..." />
+                    ) : latestAssets && latestAssets.length ? (
+                        <div className={styles.latestAssets}>
+                            {latestAssets.map((asset: any) => (
+                                <Asset key={asset.id} asset={asset} />
+                            ))}
+                        </div>
+                    ) : (
+                        <div>No data sets found.</div>
+                    )}
+                </div>
+            </>
+        )
+    }
+}
+
+AssetsLatest.contextType = User
--- a/client/src/data/channels.json
+++ b/client/src/data/channels.json
@ -0,0 +1,6 @@
+[
+  {
+    "title": "AI for Good",
+    "description": "AI for Good is an initiative to promote the use of artificial intelligence for good causes, such as fighting poverty, climate change, improving healthcare, safer transportation, and so on. The AI for Good Global Summit is THE leading United Nations platform for global and inclusive dialogue on AI. The Summit is hosted each year in Geneva by the ITU in partnership wutg UN Suster agencies, XPRIZE Foundtation and ACM."
+  }
+]
--- a/client/src/routes/Channel.module.scss
+++ b/client/src/routes/Channel.module.scss
@ -0,0 +1,21 @@
+@import '../styles/variables';
+
+.results {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: $spacer;
+    max-width: calc(18rem + #{$spacer * 2});
+    margin: auto;
+    margin-top: $spacer * 2;
+
+    @media (min-width: $break-point--small) {
+        margin-left: 0;
+        margin-right: 0;
+        max-width: none;
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: $break-point--medium) {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
--- a/client/src/routes/Channel.tsx
+++ b/client/src/routes/Channel.tsx
@ -9,6 +9,9 @@ import Asset from '../components/molecules/Asset'
 import Pagination from '../components/molecules/Pagination'
 import styles from './Channel.module.scss'
 import Content from '../components/atoms/Content'
+import channels from '../data/channels.json'
+
+const { title, description } = channels[0]

 interface ChannelProps {
    location: Location
@ -27,10 +30,6 @@ interface ChannelState {
    isLoading: boolean
    searchTerm: string
    searchCategories: string
-    channel: {
-        title: string
-        description: string
-    }
 }

 export default class Channel extends PureComponent<ChannelProps, ChannelState> {
@ -42,12 +41,7 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
        currentPage: 1,
        isLoading: true,
        searchTerm: '',
-        searchCategories: '',
-        channel: {
-            title: 'AI for Good',
-            description:
-                'AI 4 Good is an initiative to promote the use of artificial intelligence for good causes, such as fighting poverty, climate change, improving healthcare, safer transportation, and so on. The AI for Good Global Summit is THE leading United Nations platform for global and inclusive dialogue on AI. The Summit is hosted each year in Geneva by the ITU in partnership wutg UN Suster agencies, XPRIZE Foundtation and ACM.'
-        }
+        searchCategories: ''
    }

    public async componentDidMount() {
@ -138,23 +132,11 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
        )

    public render() {
-        const { totalResults, totalPages, currentPage, channel } = this.state
-        const { match } = this.props
+        const { totalPages, currentPage } = this.state

        return (
-            <Route title={channel.title} wide>
+            <Route title={title} description={description}>
                <Content wide>
-                    <div>{channel.description}</div>
-                    {totalResults > 0 && (
-                        <h2
-                            className={styles.resultsTitle}
-                            dangerouslySetInnerHTML={{
-                                __html: `${totalResults} results for <span>${decodeURIComponent(
-                                    '' // this.state.channelName
-                                )}</span>`
-                            }}
-                        />
-                    )}
                    {this.renderResults()}

                    <Pagination
--- a/client/src/routes/Home.tsx
+++ b/client/src/routes/Home.tsx
@ -1,5 +1,6 @@
 import React, { ChangeEvent, Component, FormEvent } from 'react'
 import { Link } from 'react-router-dom'
+import slugify from '@sindresorhus/slugify'
 import { User } from '../context'
 import { Logger } from '@oceanprotocol/squid'
 import Spinner from '../components/atoms/Spinner'
@ -15,6 +16,10 @@ import meta from '../data/meta.json'
 import formPublish from '../data/form-publish.json'
 import { History } from 'history'
 import Content from '../components/atoms/Content'
+import channels from '../data/channels.json'
+import AssetsLatest from '../components/organisms/AssetsLatest'
+
+const { title, description } = channels[0]

 interface HomeProps {
    history: History
@ -47,7 +52,6 @@ export default class Home extends Component<HomeProps, HomeState> {

    public async componentDidMount() {
        this.getCategoryAssets()
-        this.getLatestAssets()
    }

    private getCategoryAssets = async () => {
@ -77,32 +81,6 @@ export default class Home extends Component<HomeProps, HomeState> {
        }
    }

-    private getLatestAssets = async () => {
-        const { ocean } = this.context
-
-        const searchQuery = {
-            offset: 3,
-            page: 1,
-            query: {
-                price: [-1, 1]
-            },
-            sort: {
-                created: -1
-            }
-        }
-
-        try {
-            const search = await ocean.aquarius.queryMetadata(searchQuery)
-            this.setState({
-                latestAssets: search.results,
-                isLoadingLatest: false
-            })
-        } catch (error) {
-            Logger.error(error.message)
-            this.setState({ isLoadingLatest: false })
-        }
-    }
-
    private inputChange = (event: ChangeEvent<HTMLInputElement>) => {
        this.setState({
            [event.target.name]: event.target.value
@ -115,13 +93,7 @@ export default class Home extends Component<HomeProps, HomeState> {
    }

    public render() {
-        const {
-            categoryAssets,
-            isLoadingCategory,
-            latestAssets,
-            isLoadingLatest,
-            search
-        } = this.state
+        const { categoryAssets, isLoadingCategory, search } = this.state

        return (
            <Route
@ -149,7 +121,7 @@ export default class Home extends Component<HomeProps, HomeState> {

                <Content wide>
                    <h2 className={styles.title}>
-                        <Link to="/channels/ai-for-good">AI for Good</Link>
+                        <Link to={`/channels/${slugify(title)}`}>{title}</Link>
                    </h2>
                    <div>
                        {isLoadingCategory ? (
@ -165,20 +137,7 @@ export default class Home extends Component<HomeProps, HomeState> {
                        )}
                    </div>

-                    <h2 className={styles.title}>Latest published assets</h2>
-                    <div>
-                        {isLoadingLatest ? (
-                            <Spinner message="Loading..." />
-                        ) : latestAssets && latestAssets.length ? (
-                            <div className={styles.results}>
-                                {latestAssets.map((asset: any) => (
-                                    <Asset key={asset.id} asset={asset} />
-                                ))}
-                            </div>
-                        ) : (
-                            <div>No data sets found.</div>
-                        )}
-                    </div>
+                    <AssetsLatest />
                </Content>

                <Content>