latest assets styling

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

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": {

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, {
+                                        id={slugify(option)}
-                                            lower: true
-                                        })}
                                         type={type}
                                         name={name}
-                                        value={slugify(option, {
+                                        value={slugify(option)}
-                                            lower: true
-                                        })}
                                     />
                                     <label
                                         className={styles.radioLabel}
-                                        htmlFor={slugify(option, {
+                                        htmlFor={slugify(option)}
-                                            lower: true
-                                        })}
                                     >
                                         {option}
                                     </label>

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;
+    }
+}

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

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

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

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: '',
+        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.'
-        }
     }
 
     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 { totalPages, currentPage } = this.state
-        const { match } = this.props
 
         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

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 {
+        const { categoryAssets, isLoadingCategory, search } = this.state
-            categoryAssets,
-            isLoadingCategory,
-            latestAssets,
-            isLoadingLatest,
-            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>
+                    <AssetsLatest />
-                    <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>
                 </Content>
 
                 <Content>