mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
categories styling
This commit is contained in:
parent
54e4dc7e5d
commit
feebf7fc0c
84
client/package-lock.json
generated
84
client/package-lock.json
generated
@ -3485,7 +3485,8 @@
|
|||||||
"ansi-regex": {
|
"ansi-regex": {
|
||||||
"version": "2.1.1",
|
"version": "2.1.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"aproba": {
|
"aproba": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
@ -3506,12 +3507,14 @@
|
|||||||
"balanced-match": {
|
"balanced-match": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"brace-expansion": {
|
"brace-expansion": {
|
||||||
"version": "1.1.11",
|
"version": "1.1.11",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"balanced-match": "^1.0.0",
|
"balanced-match": "^1.0.0",
|
||||||
"concat-map": "0.0.1"
|
"concat-map": "0.0.1"
|
||||||
@ -3526,17 +3529,20 @@
|
|||||||
"code-point-at": {
|
"code-point-at": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"concat-map": {
|
"concat-map": {
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"console-control-strings": {
|
"console-control-strings": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"core-util-is": {
|
"core-util-is": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
@ -3653,7 +3659,8 @@
|
|||||||
"inherits": {
|
"inherits": {
|
||||||
"version": "2.0.3",
|
"version": "2.0.3",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"ini": {
|
"ini": {
|
||||||
"version": "1.3.5",
|
"version": "1.3.5",
|
||||||
@ -3665,6 +3672,7 @@
|
|||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"number-is-nan": "^1.0.0"
|
"number-is-nan": "^1.0.0"
|
||||||
}
|
}
|
||||||
@ -3679,6 +3687,7 @@
|
|||||||
"version": "3.0.4",
|
"version": "3.0.4",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"brace-expansion": "^1.1.7"
|
"brace-expansion": "^1.1.7"
|
||||||
}
|
}
|
||||||
@ -3686,12 +3695,14 @@
|
|||||||
"minimist": {
|
"minimist": {
|
||||||
"version": "0.0.8",
|
"version": "0.0.8",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"minipass": {
|
"minipass": {
|
||||||
"version": "2.3.5",
|
"version": "2.3.5",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"safe-buffer": "^5.1.2",
|
"safe-buffer": "^5.1.2",
|
||||||
"yallist": "^3.0.0"
|
"yallist": "^3.0.0"
|
||||||
@ -3710,6 +3721,7 @@
|
|||||||
"version": "0.5.1",
|
"version": "0.5.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"minimist": "0.0.8"
|
"minimist": "0.0.8"
|
||||||
}
|
}
|
||||||
@ -3790,7 +3802,8 @@
|
|||||||
"number-is-nan": {
|
"number-is-nan": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"object-assign": {
|
"object-assign": {
|
||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
@ -3802,6 +3815,7 @@
|
|||||||
"version": "1.4.0",
|
"version": "1.4.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"wrappy": "1"
|
"wrappy": "1"
|
||||||
}
|
}
|
||||||
@ -3887,7 +3901,8 @@
|
|||||||
"safe-buffer": {
|
"safe-buffer": {
|
||||||
"version": "5.1.2",
|
"version": "5.1.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"safer-buffer": {
|
"safer-buffer": {
|
||||||
"version": "2.1.2",
|
"version": "2.1.2",
|
||||||
@ -3923,6 +3938,7 @@
|
|||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"code-point-at": "^1.0.0",
|
"code-point-at": "^1.0.0",
|
||||||
"is-fullwidth-code-point": "^1.0.0",
|
"is-fullwidth-code-point": "^1.0.0",
|
||||||
@ -3942,6 +3958,7 @@
|
|||||||
"version": "3.0.1",
|
"version": "3.0.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"ansi-regex": "^2.0.0"
|
"ansi-regex": "^2.0.0"
|
||||||
}
|
}
|
||||||
@ -3985,12 +4002,14 @@
|
|||||||
"wrappy": {
|
"wrappy": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"yallist": {
|
"yallist": {
|
||||||
"version": "3.0.3",
|
"version": "3.0.3",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -8717,7 +8736,8 @@
|
|||||||
"ansi-regex": {
|
"ansi-regex": {
|
||||||
"version": "2.1.1",
|
"version": "2.1.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"aproba": {
|
"aproba": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
@ -8738,12 +8758,14 @@
|
|||||||
"balanced-match": {
|
"balanced-match": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"brace-expansion": {
|
"brace-expansion": {
|
||||||
"version": "1.1.11",
|
"version": "1.1.11",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"balanced-match": "^1.0.0",
|
"balanced-match": "^1.0.0",
|
||||||
"concat-map": "0.0.1"
|
"concat-map": "0.0.1"
|
||||||
@ -8758,17 +8780,20 @@
|
|||||||
"code-point-at": {
|
"code-point-at": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"concat-map": {
|
"concat-map": {
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"console-control-strings": {
|
"console-control-strings": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"core-util-is": {
|
"core-util-is": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
@ -8885,7 +8910,8 @@
|
|||||||
"inherits": {
|
"inherits": {
|
||||||
"version": "2.0.3",
|
"version": "2.0.3",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"ini": {
|
"ini": {
|
||||||
"version": "1.3.5",
|
"version": "1.3.5",
|
||||||
@ -8897,6 +8923,7 @@
|
|||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"number-is-nan": "^1.0.0"
|
"number-is-nan": "^1.0.0"
|
||||||
}
|
}
|
||||||
@ -8911,6 +8938,7 @@
|
|||||||
"version": "3.0.4",
|
"version": "3.0.4",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"brace-expansion": "^1.1.7"
|
"brace-expansion": "^1.1.7"
|
||||||
}
|
}
|
||||||
@ -8918,12 +8946,14 @@
|
|||||||
"minimist": {
|
"minimist": {
|
||||||
"version": "0.0.8",
|
"version": "0.0.8",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"minipass": {
|
"minipass": {
|
||||||
"version": "2.3.5",
|
"version": "2.3.5",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"safe-buffer": "^5.1.2",
|
"safe-buffer": "^5.1.2",
|
||||||
"yallist": "^3.0.0"
|
"yallist": "^3.0.0"
|
||||||
@ -8942,6 +8972,7 @@
|
|||||||
"version": "0.5.1",
|
"version": "0.5.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"minimist": "0.0.8"
|
"minimist": "0.0.8"
|
||||||
}
|
}
|
||||||
@ -9022,7 +9053,8 @@
|
|||||||
"number-is-nan": {
|
"number-is-nan": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"object-assign": {
|
"object-assign": {
|
||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
@ -9034,6 +9066,7 @@
|
|||||||
"version": "1.4.0",
|
"version": "1.4.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"wrappy": "1"
|
"wrappy": "1"
|
||||||
}
|
}
|
||||||
@ -9119,7 +9152,8 @@
|
|||||||
"safe-buffer": {
|
"safe-buffer": {
|
||||||
"version": "5.1.2",
|
"version": "5.1.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"safer-buffer": {
|
"safer-buffer": {
|
||||||
"version": "2.1.2",
|
"version": "2.1.2",
|
||||||
@ -9155,6 +9189,7 @@
|
|||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"code-point-at": "^1.0.0",
|
"code-point-at": "^1.0.0",
|
||||||
"is-fullwidth-code-point": "^1.0.0",
|
"is-fullwidth-code-point": "^1.0.0",
|
||||||
@ -9174,6 +9209,7 @@
|
|||||||
"version": "3.0.1",
|
"version": "3.0.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"ansi-regex": "^2.0.0"
|
"ansi-regex": "^2.0.0"
|
||||||
}
|
}
|
||||||
@ -9217,12 +9253,14 @@
|
|||||||
"wrappy": {
|
"wrappy": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"yallist": {
|
"yallist": {
|
||||||
"version": "3.0.3",
|
"version": "3.0.3",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -16444,7 +16482,7 @@
|
|||||||
"web3-utils": "1.0.0-beta.37"
|
"web3-utils": "1.0.0-beta.37"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"websocket": "git://github.com/frozeman/WebSocket-Node.git#6c72925e3f8aaaea8dc8450f97627e85263999f2"
|
"websocket": "git://github.com/frozeman/WebSocket-Node.git#browserifyCompatible"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"web3-shh": {
|
"web3-shh": {
|
||||||
|
@ -23,7 +23,7 @@ const Routes = () => (
|
|||||||
<Route component={withTracker(Details)} path="/asset/:did" />
|
<Route component={withTracker(Details)} path="/asset/:did" />
|
||||||
<Route component={withTracker(Faucet)} path="/faucet" />
|
<Route component={withTracker(Faucet)} path="/faucet" />
|
||||||
<Route component={withTracker(History)} path="/history" />
|
<Route component={withTracker(History)} path="/history" />
|
||||||
<Route component={withTracker(Channel)} path="/channel/:channel" />
|
<Route component={withTracker(Channel)} path="/channels/:channel" />
|
||||||
<Route component={withTracker(NotFound)} />
|
<Route component={withTracker(NotFound)} />
|
||||||
</Switch>
|
</Switch>
|
||||||
)
|
)
|
||||||
|
@ -2,8 +2,12 @@
|
|||||||
|
|
||||||
.categoryImage {
|
.categoryImage {
|
||||||
height: 4rem;
|
height: 4rem;
|
||||||
background-size: cover;
|
background-size: 100%;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
margin-bottom: $spacer / $line-height;
|
margin-bottom: $spacer / $line-height;
|
||||||
background-color: $body-background;
|
background-color: $body-background;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
overflow: hidden;
|
||||||
|
opacity: .8;
|
||||||
|
transition: .2s ease-out;
|
||||||
}
|
}
|
||||||
|
@ -20,6 +20,12 @@
|
|||||||
color: inherit;
|
color: inherit;
|
||||||
border-color: $brand-pink;
|
border-color: $brand-pink;
|
||||||
transform: none;
|
transform: none;
|
||||||
|
|
||||||
|
// category image
|
||||||
|
> div:first-child {
|
||||||
|
opacity: 1;
|
||||||
|
background-size: 105%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -8,7 +8,6 @@ export const servicePort = process.env.REACT_APP_SERVICE_PORT || 4000
|
|||||||
//
|
//
|
||||||
// OCEAN REMOTE CONNECTIONS
|
// OCEAN REMOTE CONNECTIONS
|
||||||
//
|
//
|
||||||
|
|
||||||
export const nodeScheme = process.env.REACT_APP_NODE_SCHEME || 'https'
|
export const nodeScheme = process.env.REACT_APP_NODE_SCHEME || 'https'
|
||||||
export const nodeHost = process.env.REACT_APP_NODE_HOST || 'nile.dev-ocean.com'
|
export const nodeHost = process.env.REACT_APP_NODE_HOST || 'nile.dev-ocean.com'
|
||||||
export const nodePort = process.env.REACT_APP_NODE_PORT || 443
|
export const nodePort = process.env.REACT_APP_NODE_PORT || 443
|
||||||
|
@ -45,12 +45,13 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
|
|||||||
searchCategories: '',
|
searchCategories: '',
|
||||||
channel: {
|
channel: {
|
||||||
title: 'AI for Good',
|
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.'
|
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() {
|
public async componentDidMount() {
|
||||||
const { match } = this.props;
|
const { match } = this.props
|
||||||
|
|
||||||
// TODO: use next line to use channel name
|
// TODO: use next line to use channel name
|
||||||
// const category = match.params.channel
|
// const category = match.params.channel
|
||||||
@ -138,7 +139,8 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
|
|||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
const { totalResults, totalPages, currentPage, channel } = this.state
|
const { totalResults, totalPages, currentPage, channel } = this.state
|
||||||
const { match } = this.props;
|
const { match } = this.props
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Route title={channel.title} wide>
|
<Route title={channel.title} wide>
|
||||||
<Content wide>
|
<Content wide>
|
||||||
|
@ -22,10 +22,40 @@
|
|||||||
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.categories {
|
.title {
|
||||||
display: grid;
|
font-size: $font-size-h3;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
margin-top: $spacer * 2;
|
||||||
grid-gap: $spacer;
|
}
|
||||||
|
|
||||||
|
.categories {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
|
||||||
|
grid-gap: $spacer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category {
|
||||||
|
// category image
|
||||||
|
> div {
|
||||||
|
opacity: .7;
|
||||||
|
transition: .2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: $font-size-base;
|
||||||
|
color: $brand-grey;
|
||||||
|
margin-top: -($spacer / 3);
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
transform: none;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
opacity: 1;
|
||||||
|
background-size: 105%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -24,8 +24,8 @@ interface HomeState {
|
|||||||
search?: string
|
search?: string
|
||||||
categoryAssets?: any[]
|
categoryAssets?: any[]
|
||||||
isLoadingCategory?: boolean
|
isLoadingCategory?: boolean
|
||||||
lastAssets?: any[]
|
latestAssets?: any[]
|
||||||
isLoadingLast?: boolean
|
isLoadingLatest?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const categories =
|
const categories =
|
||||||
@ -34,18 +34,20 @@ const categories =
|
|||||||
formPublish.steps[1].fields.categories.options) ||
|
formPublish.steps[1].fields.categories.options) ||
|
||||||
[]
|
[]
|
||||||
|
|
||||||
class Home extends Component<HomeProps, HomeState> {
|
export default class Home extends Component<HomeProps, HomeState> {
|
||||||
|
public static contextType = User
|
||||||
|
|
||||||
public state = {
|
public state = {
|
||||||
search: '',
|
search: '',
|
||||||
categoryAssets: [],
|
categoryAssets: [],
|
||||||
isLoadingCategory: true,
|
isLoadingCategory: true,
|
||||||
lastAssets: [],
|
latestAssets: [],
|
||||||
isLoadingLast: true
|
isLoadingLatest: true
|
||||||
}
|
}
|
||||||
|
|
||||||
public async componentDidMount() {
|
public async componentDidMount() {
|
||||||
this.getCategoryAssets()
|
this.getCategoryAssets()
|
||||||
this.getLastAssets()
|
this.getLatestAssets()
|
||||||
}
|
}
|
||||||
|
|
||||||
private getCategoryAssets = async () => {
|
private getCategoryAssets = async () => {
|
||||||
@ -75,7 +77,7 @@ class Home extends Component<HomeProps, HomeState> {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private getLastAssets = async () => {
|
private getLatestAssets = async () => {
|
||||||
const { ocean } = this.context
|
const { ocean } = this.context
|
||||||
|
|
||||||
const searchQuery = {
|
const searchQuery = {
|
||||||
@ -92,17 +94,35 @@ class Home extends Component<HomeProps, HomeState> {
|
|||||||
try {
|
try {
|
||||||
const search = await ocean.aquarius.queryMetadata(searchQuery)
|
const search = await ocean.aquarius.queryMetadata(searchQuery)
|
||||||
this.setState({
|
this.setState({
|
||||||
lastAssets: search.results,
|
latestAssets: search.results,
|
||||||
isLoadingLast: false
|
isLoadingLatest: false
|
||||||
})
|
})
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
Logger.error(error.message)
|
Logger.error(error.message)
|
||||||
this.setState({ isLoadingLast: false })
|
this.setState({ isLoadingLatest: false })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private inputChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||||
|
this.setState({
|
||||||
|
[event.target.name]: event.target.value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
private searchAssets = (event: FormEvent<HTMLFormElement>) => {
|
||||||
|
event.preventDefault()
|
||||||
|
this.props.history.push(`/search?text=${this.state.search}`)
|
||||||
|
}
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
const { categoryAssets, isLoadingCategory, lastAssets, isLoadingLast, search } = this.state
|
const {
|
||||||
|
categoryAssets,
|
||||||
|
isLoadingCategory,
|
||||||
|
latestAssets,
|
||||||
|
isLoadingLatest,
|
||||||
|
search
|
||||||
|
} = this.state
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Route
|
<Route
|
||||||
title={meta.title}
|
title={meta.title}
|
||||||
@ -128,7 +148,9 @@ class Home extends Component<HomeProps, HomeState> {
|
|||||||
</Content>
|
</Content>
|
||||||
|
|
||||||
<Content wide>
|
<Content wide>
|
||||||
<h4 onClick={() => this.openChannel('AI for Good')}>AI for Good</h4>
|
<h2 className={styles.title}>
|
||||||
|
<Link to="/channels/ai-for-good">AI for Good</Link>
|
||||||
|
</h2>
|
||||||
<div>
|
<div>
|
||||||
{isLoadingCategory ? (
|
{isLoadingCategory ? (
|
||||||
<Spinner message="Loading..." />
|
<Spinner message="Loading..." />
|
||||||
@ -142,13 +164,14 @@ class Home extends Component<HomeProps, HomeState> {
|
|||||||
<div>No data sets found.</div>
|
<div>No data sets found.</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<h4>Latest assets</h4>
|
|
||||||
|
<h2 className={styles.title}>Latest published assets</h2>
|
||||||
<div>
|
<div>
|
||||||
{isLoadingLast ? (
|
{isLoadingLatest ? (
|
||||||
<Spinner message="Loading..." />
|
<Spinner message="Loading..." />
|
||||||
) : lastAssets && lastAssets.length ? (
|
) : latestAssets && latestAssets.length ? (
|
||||||
<div className={styles.results}>
|
<div className={styles.results}>
|
||||||
{lastAssets.map((asset: any) => (
|
{latestAssets.map((asset: any) => (
|
||||||
<Asset key={asset.id} asset={asset} />
|
<Asset key={asset.id} asset={asset} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@ -156,38 +179,27 @@ class Home extends Component<HomeProps, HomeState> {
|
|||||||
<div>No data sets found.</div>
|
<div>No data sets found.</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<h4>Explore Categories</h4>
|
</Content>
|
||||||
|
|
||||||
|
<Content>
|
||||||
|
<h2 className={styles.title}>Explore Categories</h2>
|
||||||
<div className={styles.categories}>
|
<div className={styles.categories}>
|
||||||
{categories.map((category: string) => (
|
{categories
|
||||||
<Link
|
.filter(category => category !== 'AI For Good')
|
||||||
to={`/search?categories=${category}`}
|
.sort((a, b) => a.localeCompare(b))
|
||||||
key={category}
|
.map((category: string) => (
|
||||||
>
|
<Link
|
||||||
<CategoryImage category={category} />
|
to={`/search?categories=${category}`}
|
||||||
{category}
|
key={category}
|
||||||
</Link>
|
className={styles.category}
|
||||||
))}
|
>
|
||||||
|
<CategoryImage category={category} />
|
||||||
|
<h3>{category}</h3>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</Content>
|
</Content>
|
||||||
</Route>
|
</Route>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
private inputChange = (event: ChangeEvent<HTMLInputElement>) => {
|
|
||||||
this.setState({
|
|
||||||
[event.target.name]: event.target.value
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
private searchAssets = (event: FormEvent<HTMLFormElement>) => {
|
|
||||||
event.preventDefault()
|
|
||||||
this.props.history.push(`/search?text=${this.state.search}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
private openChannel = (channel: string) => {
|
|
||||||
this.props.history.push(`/channel/${channel}`)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Home.contextType = User
|
|
||||||
export default Home
|
|
||||||
|
41
server/package-lock.json
generated
41
server/package-lock.json
generated
@ -2091,7 +2091,8 @@
|
|||||||
"ansi-regex": {
|
"ansi-regex": {
|
||||||
"version": "2.1.1",
|
"version": "2.1.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"aproba": {
|
"aproba": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
@ -2112,12 +2113,14 @@
|
|||||||
"balanced-match": {
|
"balanced-match": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"brace-expansion": {
|
"brace-expansion": {
|
||||||
"version": "1.1.11",
|
"version": "1.1.11",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"balanced-match": "^1.0.0",
|
"balanced-match": "^1.0.0",
|
||||||
"concat-map": "0.0.1"
|
"concat-map": "0.0.1"
|
||||||
@ -2132,17 +2135,20 @@
|
|||||||
"code-point-at": {
|
"code-point-at": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"concat-map": {
|
"concat-map": {
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"console-control-strings": {
|
"console-control-strings": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"core-util-is": {
|
"core-util-is": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
@ -2259,7 +2265,8 @@
|
|||||||
"inherits": {
|
"inherits": {
|
||||||
"version": "2.0.3",
|
"version": "2.0.3",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"ini": {
|
"ini": {
|
||||||
"version": "1.3.5",
|
"version": "1.3.5",
|
||||||
@ -2271,6 +2278,7 @@
|
|||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"number-is-nan": "^1.0.0"
|
"number-is-nan": "^1.0.0"
|
||||||
}
|
}
|
||||||
@ -2285,6 +2293,7 @@
|
|||||||
"version": "3.0.4",
|
"version": "3.0.4",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"brace-expansion": "^1.1.7"
|
"brace-expansion": "^1.1.7"
|
||||||
}
|
}
|
||||||
@ -2292,12 +2301,14 @@
|
|||||||
"minimist": {
|
"minimist": {
|
||||||
"version": "0.0.8",
|
"version": "0.0.8",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"minipass": {
|
"minipass": {
|
||||||
"version": "2.3.5",
|
"version": "2.3.5",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"safe-buffer": "^5.1.2",
|
"safe-buffer": "^5.1.2",
|
||||||
"yallist": "^3.0.0"
|
"yallist": "^3.0.0"
|
||||||
@ -2316,6 +2327,7 @@
|
|||||||
"version": "0.5.1",
|
"version": "0.5.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"minimist": "0.0.8"
|
"minimist": "0.0.8"
|
||||||
}
|
}
|
||||||
@ -2396,7 +2408,8 @@
|
|||||||
"number-is-nan": {
|
"number-is-nan": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"object-assign": {
|
"object-assign": {
|
||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
@ -2408,6 +2421,7 @@
|
|||||||
"version": "1.4.0",
|
"version": "1.4.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"wrappy": "1"
|
"wrappy": "1"
|
||||||
}
|
}
|
||||||
@ -2493,7 +2507,8 @@
|
|||||||
"safe-buffer": {
|
"safe-buffer": {
|
||||||
"version": "5.1.2",
|
"version": "5.1.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"safer-buffer": {
|
"safer-buffer": {
|
||||||
"version": "2.1.2",
|
"version": "2.1.2",
|
||||||
@ -2529,6 +2544,7 @@
|
|||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"code-point-at": "^1.0.0",
|
"code-point-at": "^1.0.0",
|
||||||
"is-fullwidth-code-point": "^1.0.0",
|
"is-fullwidth-code-point": "^1.0.0",
|
||||||
@ -2548,6 +2564,7 @@
|
|||||||
"version": "3.0.1",
|
"version": "3.0.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"ansi-regex": "^2.0.0"
|
"ansi-regex": "^2.0.0"
|
||||||
}
|
}
|
||||||
@ -2591,12 +2608,14 @@
|
|||||||
"wrappy": {
|
"wrappy": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"yallist": {
|
"yallist": {
|
||||||
"version": "3.0.3",
|
"version": "3.0.3",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user