displaying version and github shas in footer

.github/workflows/Continuous_Delivery.yml

@@ -32,6 +32,7 @@ jobs:
         echo REACT_APP_MAPBOX_TOKEN=${{ secrets.MAPBOX_TOKEN }} > .env
         echo DB_URL=${{ secrets.DB_URL }} >> .env
         echo BASE_URL=${{ secrets.BASE_URL }} >> .env
+        echo GITHUB_SHA=${{ github.sha }} >> .env
     - name: Build project
       run: npm run build
     - name: Run Tests

src/App.jsx

@@ -1,18 +1,23 @@
 import React, { useEffect } from 'react';
+import PropTypes from 'proptypes';
 import { connect } from 'react-redux';
 import { HashRouter as Router } from 'react-router-dom';
 
+import { getMetadataRequest } from '@reducers/metadata';
+
 import Routes from './Routes';
 import Header from './components/main/header/Header';
 import Footer from './components/main/footer/Footer';
 import { SnapshotRenderer } from './components/export/SnapshotService';
 
 const basename = process.env.NODE_ENV === 'development' ? '/' : process.env.BASE_URL || '/';
 
-const App = () => {
+const App = ({
+  getMetadata,
+}) => {
   useEffect(() => {
-    // fetch data on load??
-  }, []);
+    getMetadata();
+  });
 
   return (
     <Router basename={basename}>
@@ -24,4 +29,12 @@ const App = () => {
   );
 };
 
-export default connect(null, null)(App);
+const mapDispatchToProps = dispatch => ({
+  getMetadata: () => dispatch(getMetadataRequest()),
+});
+
+export default connect(null, mapDispatchToProps)(App);
+
+App.propTypes = {
+  getMetadata: PropTypes.func.isRequired,
+};

src/components/common/HoverOverInfo.jsx

@@ -23,16 +23,26 @@ const HoverOverInfo = ({
       { showTooltip && (
         <Tooltip position={position}>
           <div className="hover-over-tooltip">
-            <div className="title-row">
-              <Icon
-                id="tooltip-icon"
-                icon="info-circle"
-                size="small"
-                style={{ marginRight: '6px' }}
-              />
-              { title }
-            </div>
-            { text }
+            { title && (
+              <div className="title-row">
+                <Icon
+                  id="tooltip-icon"
+                  icon="info-circle"
+                  size="small"
+                  style={{ marginRight: '6px' }}
+                />
+                { title }
+              </div>
+            )}
+            {
+              text instanceof Array
+                ? (
+                  text.map((line, idx) => (
+                    <div key={idx.toString()}>{ line }</div>
+                  ))
+                )
+                : text
+            }
           </div>
         </Tooltip>
       )}
@@ -44,9 +54,12 @@ export default HoverOverInfo;
 
 HoverOverInfo.propTypes = {
   title: PropTypes.string,
-  text: PropTypes.string,
+  text: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
   position: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
-  children: PropTypes.element,
+  children: PropTypes.node,
 };
 
 HoverOverInfo.defaultProps = {

src/components/main/footer/Footer.jsx

@@ -3,35 +3,62 @@ import { connect } from 'react-redux';
 import { Switch, Route } from 'react-router-dom';
 import propTypes from 'proptypes';
 import moment from 'moment';
+import HoverOverInfo from '@components/common/HoverOverInfo';
 import StaticFooter from './StaticFooter';
 
 const Footer = ({
   lastUpdated,
-}) => (
-  <footer className="navbar has-navbar-fixed-bottom">
-    <Switch>
-      <Route path="/(about|contact)" component={StaticFooter} />
-      <Route path="/">
-        <p>
-          Data Updated Through:
-          &nbsp;
-          {lastUpdated && moment(1000 * lastUpdated).format('MMMM Do YYYY, h:mm:ss a')}
-        </p>
-      </Route>
-    </Switch>
-  </footer>
-);
+  version,
+  backendSha,
+}) => {
+  const frontendSha = process.env.GITHUB_SHA || 'DEVELOPMENT';
+  return (
+    <footer className="navbar has-navbar-fixed-bottom">
+      <Switch>
+        <Route path="/(about|contact)" component={StaticFooter} />
+        <Route path="/">
+          <span className="last-updated">
+            Data Updated Through:
+            &nbsp;
+            {lastUpdated && moment(1000 * lastUpdated).format('MMMM Do YYYY, h:mm:ss a')}
+          </span>
+          { version && backendSha && (
+            <span className="version">
+              <HoverOverInfo
+                position="top"
+                text={[
+                  frontendSha.substr(0, 7),
+                  backendSha.substr(0, 7),
+                ]}
+              >
+                Version
+                &nbsp;
+                { version }
+              </HoverOverInfo>
+            </span>
+          )}
+        </Route>
+      </Switch>
+    </footer>
+  );
+};
 
 const mapStateToProps = state => ({
   lastUpdated: state.data.lastUpdated,
+  version: state.metadata.version,
+  backendSha: state.metadata.gitSha,
 });
 
 Footer.propTypes = {
   lastUpdated: propTypes.number,
+  version: propTypes.string,
+  backendSha: propTypes.string,
 };
 
 Footer.defaultProps = {
   lastUpdated: undefined,
+  version: undefined,
+  backendSha: undefined,
 };
 
 export default connect(mapStateToProps, null)(Footer);

src/redux/reducers/metadata.js

@@ -0,0 +1,47 @@
+export const types = {
+  GET_METADATA_REQUEST: 'GET_METADATA_REQUEST',
+  GET_METADATA_SUCCESS: 'GET_METADATA_SUCCESS',
+  GET_METADATA_FAILURE: 'GET_METADATA_FAILURE',
+};
+
+export const getMetadataRequest = () => ({
+  type: types.GET_METADATA_REQUEST,
+});
+
+export const getMetadataSuccess = response => ({
+  type: types.GET_METADATA_SUCCESS,
+  payload: response,
+});
+
+export const getMetadataFailure = error => ({
+  type: types.GET_METADATA_FAILURE,
+  payload: error,
+});
+
+const initialState = {};
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case types.GET_METADATA_SUCCESS:
+      return {
+        ...action.payload,
+      };
+    case types.GET_METADATA_FAILURE: {
+      const {
+        response: { status },
+        message,
+      } = action.payload;
+
+      return {
+        ...state,
+        error: {
+          code: status,
+          message,
+          error: action.payload,
+        },
+      };
+    }
+    default:
+      return state;
+  }
+};

src/redux/rootReducer.js

@@ -1,11 +1,13 @@
 import { combineReducers } from 'redux';
+import metadata from './reducers/metadata';
 import data from './reducers/data';
 import filters from './reducers/filters';
 import ui from './reducers/ui';
 import comparisonData from './reducers/comparisonData';
 import comparisonFilters from './reducers/comparisonFilters';
 
 export default combineReducers({
+  metadata,
   data,
   filters,
   ui,

src/redux/rootSaga.js

@@ -1,11 +1,13 @@
 import { all } from 'redux-saga/effects';
 
+import metadata from './sagas/metadata';
 import data from './sagas/data';
 import comparisonData from './sagas/comparisonData';
 
 
 export default function* rootSaga() {
   yield all([
+    metadata(),
     data(),
     comparisonData(),
   ]);

src/redux/sagas/metadata.js

@@ -0,0 +1,26 @@
+import axios from 'axios';
+import {
+  takeLatest,
+  call,
+  put,
+} from 'redux-saga/effects';
+
+import {
+  types,
+  getMetadataSuccess,
+  getMetadataFailure,
+} from '../reducers/metadata';
+
+function* getMetadata() {
+  const url = `${process.env.DB_URL}/apistatus`;
+  try {
+    const { data } = yield call(axios.get, url);
+    yield put(getMetadataSuccess(data));
+  } catch (e) {
+    yield put(getMetadataFailure(e));
+  }
+}
+
+export default function* rootSaga() {
+  yield takeLatest(types.GET_METADATA_REQUEST, getMetadata);
+}

src/styles/main/_footer.scss

@@ -4,12 +4,29 @@ footer.navbar {
   width: 100vw;
   height: $footer-height;
   background: $brand-main-color;
+  color: $brand-bg-color;
+  text-align: center;
 
-  p {
-    width: 100vw;
-    color: $brand-bg-color;
-    font-weight: bold;
-    text-align: center;
+  .last-updated {
+    display: inline-block;
+    margin: 0 auto;
     line-height: $footer-height;
   }
+
+  .version {
+    position: absolute;
+    right: 20px;
+    top: 0;
+    line-height: $footer-height;
+    font-size: 12px;
+    cursor: default;
+    .hover-over-tooltip {
+      color: $brand-main-color;
+      font-weight: normal;
+      font-size: 14px;
+      font-family: $brand-text-family;
+      width: auto;
+      word-break: keep-all;
+    }
+  }
 }