Load and display version number in development (#34)

frontend/app/api/version.json

@@ -1,4 +1,4 @@
 {
-  "version": "Mock API 1.23-RC4",
+  "version": "1.23-RC4",
   "development": true
 }

frontend/lib/js/app/reducers.js

@@ -12,6 +12,11 @@ import {
   type StateType as DatasetsStateType,
 } from '../dataset';
 
+import {
+  version,
+  type StateType as VersionStateType
+} from '../header/reducer'
+
 import {
   reducer as tooltip,
   type StateType as TooltipStateType
@@ -41,9 +46,10 @@ export type StateType = {
   datasets: DatasetsStateType,
   tooltip: TooltipStateType,
   panes: PanesStateType,
+  version: VersionStateType,
 };
 
- const buildAppReducer = (availableForms) => combineReducers({
+const buildAppReducer = (availableForms) => combineReducers({
   categoryTrees,
   query,
   uploadConceptListModal,
@@ -60,6 +66,7 @@ export type StateType = {
   uploadQueryResults,
   deletePreviousQueryModal,
   timebasedQuery,
+  version,
   externalForms: buildExternalFormsReducer(availableForms),
 });
 

frontend/lib/js/header/Header.js

@@ -1,14 +1,20 @@
-import React        from 'react';
-import PropTypes    from 'prop-types';
-import T            from 'i18n-react';
-import { connect }  from "react-redux";
+import React           from 'react';
+import PropTypes       from 'prop-types';
+import T               from 'i18n-react';
+import { connect }     from 'react-redux';
+import { loadVersion } from './actions';
 
 class Header extends React.Component {
+  componentDidMount() {
+    this.props.loadVersion();
+  }
+
   render() {
     return (
       <header className="header">
         <div
           className="header__logo"
+          title={this.props.version}
         />
         <span className="header__spacer" />
         <h1 className="header__headline">{T.translate('headline')}</h1>
@@ -20,12 +26,21 @@ class Header extends React.Component {
 
 Header.propTypes = {
   version: PropTypes.string,
-  development: PropTypes.bool
+  development: PropTypes.bool,
+  loadVersion: PropTypes.func
+};
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    version: state.version ? state.version.version : '',
+    development: state.version ? state.version.development : false,
+  }
 };
 
-const mapStateToProps = (state, ownProps) => ({
-  version: '1.6-RC4',
-  development: true,
-});
+const mapDispatchToProps = (dispatch) => {
+  return {
+    loadVersion: () => dispatch(loadVersion()),
+  };
+};
 
-export default connect(mapStateToProps)(Header);
+export default connect(mapStateToProps, mapDispatchToProps)(Header);

frontend/lib/js/header/actionTypes.js

@@ -0,0 +1,4 @@
+// api call GET /version
+export const LOAD_VERSION_START = "header/LOAD_VERSION_START";
+export const LOAD_VERSION_SUCCESS = "header/LOAD_VERSION_SUCCESS";
+export const LOAD_VERSION_ERROR = "header/LOAD_VERSION_ERROR";

frontend/lib/js/header/actions.js

@@ -0,0 +1,29 @@
+import { type Dispatch }      from 'redux-thunk';
+
+import api                    from '../api';
+import {
+  defaultError,
+  defaultSuccess
+} from "../common/actions";
+import {
+  LOAD_VERSION_START,
+  LOAD_VERSION_SUCCESS,
+  LOAD_VERSION_ERROR
+} from './actionTypes';
+
+export const loadVersionStart = () => ({ type: LOAD_VERSION_START });
+export const loadVersionError = (err: any) => defaultError(LOAD_VERSION_ERROR, err);
+export const loadVersionSuccess = (res: any) => defaultSuccess(LOAD_VERSION_SUCCESS, res);
+
+export const loadVersion = () => {
+  return (dispatch: Dispatch) => {
+    dispatch(loadVersionStart());
+
+    return api.getVersion()
+      .then(
+        r => {
+          dispatch(loadVersionSuccess(r));
+        },
+        e => dispatch(loadVersionError(e)))
+  }
+};

frontend/lib/js/header/reducer.js

@@ -0,0 +1,31 @@
+import {
+  LOAD_VERSION_START,
+  LOAD_VERSION_SUCCESS,
+  LOAD_VERSION_ERROR
+} from './actionTypes'
+
+export type StateType = {
+  loading: boolean,
+  development: boolean,
+  version: string
+};
+
+const initialState: StateType = {};
+
+export const version = (state: StateType = initialState, action: Object): StateType => {
+  switch (action.type) {
+    case LOAD_VERSION_START:
+      return { ...state, loading: true };
+    case LOAD_VERSION_SUCCESS:
+      return {
+        ...state,
+        loading: false,
+        development: action.payload.data.development,
+        version: action.payload.data.version
+      };
+      case LOAD_VERSION_ERROR:
+          return { ...state, loading: false, error: action.payload.message };
+    default:
+      return state;
+  }
+};