mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
latest assets styling
This commit is contained in:
parent
aaf425477f
commit
3199d89d8d
19
client/package-lock.json
generated
19
client/package-lock.json
generated
@ -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",
|
||||
|
@ -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": {
|
||||
|
@ -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>
|
||||
|
40
client/src/components/organisms/AssetsLatest.module.scss
Normal file
40
client/src/components/organisms/AssetsLatest.module.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
77
client/src/components/organisms/AssetsLatest.tsx
Normal file
77
client/src/components/organisms/AssetsLatest.tsx
Normal file
@ -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
|
6
client/src/data/channels.json
Normal file
6
client/src/data/channels.json
Normal file
@ -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."
|
||||
}
|
||||
]
|
@ -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);
|
||||
}
|
||||
}
|
@ -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
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user