From 121c8dbd83991ebbd06ecf288cfc14cf1b95ec91 Mon Sep 17 00:00:00 2001 From: Alexander Prendetskiy Date: Mon, 17 Sep 2018 19:09:15 +0300 Subject: [PATCH] Show actual numbers on home page - ssr support - show buttons at all zoom levels --- src/actions/serverInfo.ts | 29 ++++++++++++----------------- src/constants/apiURLS.ts | 2 +- src/model/serverinfo.model.ts | 8 ++++++++ src/reducers/serverInfo.ts | 14 ++++++-------- src/ui/App.tsx | 12 +++++++++++- src/ui/common/Number.tsx | 2 +- src/ui/pages/welcome/index.tsx | 20 ++++++++++++++------ 7 files changed, 53 insertions(+), 34 deletions(-) diff --git a/src/actions/serverInfo.ts b/src/actions/serverInfo.ts index b08caa2..ba8ca04 100644 --- a/src/actions/serverInfo.ts +++ b/src/actions/serverInfo.ts @@ -1,22 +1,17 @@ import * as Constants from 'constants/serverInfo'; -import {InfoService} from 'service/InfoService'; import {log} from 'utilities/debug'; +import {InfoService} from 'service/InfoService'; +import {ServerInfo} from 'model/serverinfo.model'; -function serverInfoRequest() { - return (dispatch, getState) => { - const token = getState().login.access_token; - - return InfoService.getServerInfo(token) - .then((data) => dispatch(getServerInfo(data))) - .catch((error) => log('Error', error)); - }; -} +export const serverInfoRequest = () => (dispatch, getState): Promise => { + const token = getState().login.access_token; -function getServerInfo(info) { - return { - type: Constants.GET_SERVER_INFO, - info, - }; -} + return InfoService.getServerInfo(token) + .then((data) => dispatch(getServerInfo(data))) + .catch((error) => log('Error', error)); +}; -export {serverInfoRequest, getServerInfo}; +const getServerInfo = (info: ServerInfo) => ({ + type: Constants.GET_SERVER_INFO, + payload: { info }, +}); diff --git a/src/constants/apiURLS.ts b/src/constants/apiURLS.ts index 99bb237..d6d037f 100644 --- a/src/constants/apiURLS.ts +++ b/src/constants/apiURLS.ts @@ -9,7 +9,7 @@ export const VERIFY_GOOGLE_TOKEN_URL = `${API_ROOT}/google/verify-token`; export const APIv0_BASE_URL = `${API_ROOT}/api/v0`; export const APIv1_BASE_URL = `${API_ROOT}/api/v1`; -export const SERVER_INFO_URL = `${APIv0_BASE_URL}/info/version`; +export const SERVER_INFO_URL = `${APIv1_BASE_URL}/info/version`; // Me API const ME_API = `${APIv0_BASE_URL}/me`; diff --git a/src/model/serverinfo.model.ts b/src/model/serverinfo.model.ts index 6045944..3210607 100644 --- a/src/model/serverinfo.model.ts +++ b/src/model/serverinfo.model.ts @@ -4,6 +4,14 @@ class ServerInfo { public revision: string; public hostName: string; + public cdnServers: string; + public accessionCount: number; + public datasetCount: number; + public subsetCount: number; + public instituteCount: number; + public descriptorCount: number; + public partnerCount: number; + public constructor(obj?) { if (obj !== null && obj !== undefined) { Object.keys(obj).forEach((p) => this[p] = obj[p]); diff --git a/src/reducers/serverInfo.ts b/src/reducers/serverInfo.ts index 58c900a..3db6cbc 100644 --- a/src/reducers/serverInfo.ts +++ b/src/reducers/serverInfo.ts @@ -1,18 +1,16 @@ import {GET_SERVER_INFO} from 'constants/serverInfo'; -import {ServerInfo} from 'model/serverinfo.model'; +import {IReducerAction} from 'model/common.model'; const INITIAL_STATE = {}; -function serverInfo(state = INITIAL_STATE, action: { type?: string, info?: ServerInfo } = { type: '' }) { - const {type, info} = action; +export default function serverInfo(state = INITIAL_STATE, action: IReducerAction = {type: ''}) { - switch (type) { - case GET_SERVER_INFO: + switch (action.type) { + case GET_SERVER_INFO: { + const {info} = action.payload; return {...info}; - + } default: return state; } } - -export default serverInfo; diff --git a/src/ui/App.tsx b/src/ui/App.tsx index 8bdd651..3258e7d 100644 --- a/src/ui/App.tsx +++ b/src/ui/App.tsx @@ -6,6 +6,7 @@ import {logoutRequest, loginAppRequest} from 'actions/login'; import {setAppMounted} from 'actions/appMounted'; import {updateHistory} from 'actions/history'; import { listCrops } from 'actions/crop'; +import { serverInfoRequest } from 'actions/serverInfo'; import { withRouter } from 'react-router-dom'; @@ -31,12 +32,15 @@ interface IAppProps extends React.ClassAttributes { updateHistory: (path: string) => void; crops: Crop[]; listCrops: () => void; + serverInfo: any; + serverInfoRequest: any; } class App extends React.Component { public static needs = [ () => listCrops(), + () => serverInfoRequest(), ]; public constructor(props: any) { @@ -44,10 +48,14 @@ class App extends React.Component { } public componentWillMount() { - const { crops, listCrops } = this.props; + const { crops, listCrops, serverInfo, serverInfoRequest } = this.props; if (!crops || crops.length === 0) { listCrops(); } + if (! serverInfo || ! serverInfo.revision) { + console.log('Requesting server info because we have:', serverInfo); + serverInfoRequest(); + } } public componentWillReceiveProps(nextProps) { @@ -74,6 +82,7 @@ class App extends React.Component { const mapStateToProps = (state) => ({ crops: state.crop.list, + serverInfo: state.serverInfo, // accessToken: state.login.access_token, }); @@ -83,6 +92,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({ setAppMounted, updateHistory, listCrops, + serverInfoRequest, }, dispatch); export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App)); diff --git a/src/ui/common/Number.tsx b/src/ui/common/Number.tsx index 6023466..dab6e02 100644 --- a/src/ui/common/Number.tsx +++ b/src/ui/common/Number.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; export default function Number({ value, }: { value: number }) { - if (value !== null) { + if (typeof value === 'number') { return { value.toLocaleString() }; } else { return —; diff --git a/src/ui/pages/welcome/index.tsx b/src/ui/pages/welcome/index.tsx index d41fa09..fc0661d 100644 --- a/src/ui/pages/welcome/index.tsx +++ b/src/ui/pages/welcome/index.tsx @@ -7,6 +7,7 @@ import { translate } from 'react-i18next'; import { navigateTo } from 'actions/navigation'; import ContentHeader from 'ui/common/heading/ContentHeader'; +import Number from 'ui/common/Number'; import Grid from '@material-ui/core/Grid'; import Markdown from 'ui/catalog/markdown'; import { Link } from 'react-router-dom'; @@ -121,6 +122,9 @@ const styles = (theme) => ({ fontSize: '2.143rem', fontWeight: 'bold' as 'bold', color: '#fff', + [theme.breakpoints.down('md')]: { + fontSize: '1.4rem', + }, }, aboutBox: { position: 'relative' as 'relative', @@ -219,7 +223,7 @@ class WelcomePage extends React.Component { } public render() { - const { classes, t } = this.props; + const { classes, t, serverInfo } = this.props; const Stats = ({children}) => (
@@ -290,7 +294,7 @@ class WelcomePage extends React.Component { - 3.8M + { t('stats.Accessions') } @@ -298,7 +302,7 @@ class WelcomePage extends React.Component { - A few + { t('stats.Phenotypic datasets') } @@ -306,7 +310,7 @@ class WelcomePage extends React.Component { - 700+ + { t('stats.Descriptors') } @@ -314,7 +318,7 @@ class WelcomePage extends React.Component { - Some + { t('stats.Partners') } @@ -428,8 +432,12 @@ The Catalog of datasets enables genbanks around the World to share information o } } +const mapStateToProps = (state) => ({ + serverInfo: state.serverInfo, +}); + const mapDispatchToProps = (dispatch) => bindActionCreators({ navigateTo, }, dispatch); -export default translate()(connect(null, mapDispatchToProps)(withStyles(styles)(WelcomePage))); +export default translate()(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(WelcomePage))); -- GitLab