Added api client action to retrieve status as a demo

Author: adaam2

frontend/src/actions/app.js

@@ -1,9 +1,36 @@
-import { APP_LOAD } from '../constants/action-types';
+import { ACTION_TYPES } from '../constants/action-types';
+import ApiClient from '../shared/api-client';
 
 export function loadApp() {
   return {
-    type: APP_LOAD,
+    type: ACTION_TYPES.APP_LOAD,
   };
 }
 
-export default { loadApp };
+function ApiSuccess(status) {
+  return {
+    type: ACTION_TYPES.STATUS_SUCCESS,
+    status
+  }
+}
+
+function ApiFailure(err) {
+  return {
+    type: ACTION_TYPES.STATUS_FAILURE,
+    err
+  }
+}
+
+const STATUS_URI = "/";
+
+export function checkApiStatus() {
+  return function(dispatch) {
+    return ApiClient.get(STATUS_URI)
+      .then((response) => {
+        dispatch(ApiSuccess(response.body.status));
+      },
+      (error) => {
+        dispatch(ApiFailure(error));
+      });
+  }
+}

frontend/src/constants/action-types.js

@@ -1,3 +1,6 @@
-export const APP_LOAD = 'APP_LOAD';
-
-export default { APP_LOAD };
+export const ACTION_TYPES = {
+  APP_LOAD: 'APP_LOAD',
+  STATUS_REQUEST: 'STATUS_REQUEST',
+  STATUS_SUCCESS: 'STATUS_SUCCESS',
+  STATUS_FAILURE: 'STATUS_FAILURE'
+};

frontend/src/containers/app.css

@@ -16,4 +16,16 @@ header {
 
 p {
   line-height: 1.5;
+}
+
+.StatusPill {
+  border-radius: 8px;
+  padding: 0.25rem 0.5rem;
+  width: 80px;
+  text-align: center;
+  margin-left: 15px;
+  color: white;
+  font-weight: bold;
+  background: green;
+  margin: auto 5px;
 }

frontend/src/containers/app.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect }  from 'react-redux';
-import { loadApp } from '../actions/app';
+import { loadApp, checkApiStatus } from '../actions/app';
 
 import styles from './app.css';
 
@@ -15,6 +15,7 @@ class App extends React.Component {
 
   componentDidMount() {
     this.props.dispatch(loadApp());
+    this.props.dispatch(checkApiStatus());
   }
 
   render() {
@@ -34,6 +35,12 @@ class App extends React.Component {
           <p>
             With redux, thunk actions, redux action logging
           </p>
+
+          <p>API Status:
+            <span className="StatusPill">
+              {this.props.apiStatus}
+            </span>
+          </p>
         </header>
 
         <main>
@@ -46,6 +53,7 @@ class App extends React.Component {
 
 export default connect((store, props) => {
   return {
-    loaded: store.app.loaded
+    loaded: store.app.loaded,
+    apiStatus: store.app.apiStatus
   };
 })(App);

frontend/src/reducers/app.js

@@ -1,13 +1,18 @@
-import { APP_LOAD } from '../constants/action-types';
+import { ACTION_TYPES } from '../constants/action-types';
 
 const initialState = {
   loaded: false,
+  apiStatus: undefined
 };
 
 export default function app(state = initialState, action) {
   switch (action.type) {
-    case APP_LOAD:
+    case ACTION_TYPES.APP_LOAD:
       return { ...state, loaded: true };
+    case ACTION_TYPES.STATUS_SUCCESS:
+      return { ...state, apiStatus: action.status }
+    case ACTION_TYPES.STATUS_SUCCESS:
+      return { ...state, apiStatus: "BAD" }
     default:
       return state;
   }