Add version to Header component (#34)

ingef · Feb 1, 2018 · 7a7d156 · 7a7d156
1 parent c02955b
commit 7a7d156
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
diff --git a/frontend/lib/js/api/api.js b/frontend/lib/js/api/api.js
@@ -62,6 +62,10 @@ function fetchJson(url: string, request?: RequestType, rawBody?: boolean = false
   return fetchJsonUnauthorized(url, finalRequest, rawBody);
 }
 
+export function getVersion() {
+  return fetchJson(apiUrl() + '/version')
+}
+
 export function getDatasets() {
   return fetchJson(apiUrl() + `/datasets`);
 }

diff --git a/frontend/lib/js/header/Header.js b/frontend/lib/js/header/Header.js
@@ -1,5 +1,7 @@
-import React from 'react';
-import T     from 'i18n-react';
+import React        from 'react';
+import PropTypes    from 'prop-types';
+import T            from 'i18n-react';
+import { connect }  from "react-redux";
 
 class Header extends React.Component {
   render() {
@@ -10,9 +12,20 @@ class Header extends React.Component {
         />
         <span className="header__spacer" />
         <h1 className="header__headline">{T.translate('headline')}</h1>
+        {this.props.development && <h1 className="header__version">{this.props.version}</h1>}
       </header>
     );
   }
 }
 
-export default Header;
+Header.propTypes = {
+  version: PropTypes.string,
+  development: PropTypes.bool
+};
+
+const mapStateToProps = (state, ownProps) => ({
+  version: '1.6-RC4',
+  development: true,
+});
+
+export default connect(mapStateToProps)(Header);
diff --git a/frontend/lib/styles/components/header.sass b/frontend/lib/styles/components/header.sass
@@ -3,6 +3,9 @@
   color: white
   padding: 0 20px
   overflow: hidden
+  display: flex
+  justify-content: space-between
+  align-items: center
 
   // Fix, so content can expand to 100% and scroll
   position: absolute
@@ -11,16 +14,12 @@
   top: 0
   left: 0
 
-  &__headline, &__logo, &__spacer
-    display: inline-block
-    vertical-align: middle
-
   &__spacer
     margin: 0 10px
     height: 20px
 
   &__headline
-    margin: 0
+    margin: 0 auto 0 0
     line-height: 2
     font-size: $font-sm
     font-style: italic
@@ -33,3 +32,7 @@
     background-repeat: no-repeat
     background-position-y: 50%
     background-size: $img-logo-background-size
+
+  &__version
+    font-size: $font-sm
+    margin-left: auto