ui: use redux-promise-middleware to request lists of entities

This dispatches the FETCH_ENTITIES action whose payload is an axios
request object.  redux-promise-middleware will handle this by executing
the request's promise, and then magically dispatching
FETCH_ENTITIES_{PENDING,FULFILLED,REJECTED} actions according to the 3
possible stages of the conversation with the API endpoint.

Currently these 3 actions are not handled by any reducer; that will come
in subsequent commits.

Author: aspiers

src/js/frontend/package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "@n3dst4/browser-bundle": "^1.1.0",
     "@n3dst4/build-stylesheets": "^1.0.1",
+    "axios": "^0.15.3",
     "babel-polyfill": "6.9.1",
     "browser-sync": "^2.12.3",
     "d3": "^4.3.0",

src/js/frontend/src/Redux/action-types.js

@@ -1,2 +1,8 @@
 export const TOGGLE_ABOUT = "TOGGLE_ABOUT"
+
 export const ADD_ENTITY = "ADD_ENTITY"
+
+export const FETCH_ENTITIES = "FETCH_ENTITIES"
+export const FETCH_ENTITIES_PENDING = "FETCH_ENTITIES_PENDING"
+export const FETCH_ENTITIES_FULFILLED = "FETCH_ENTITIES_FULFILLED"
+export const FETCH_ENTITIES_REJECTED = "FETCH_ENTITIES_REJECTED"

src/js/frontend/src/Redux/actions.js

@@ -1,4 +1,5 @@
 import * as actionTypes from "./action-types"
+import entityData from "../lib/entityData"
 
 // These are action creators
 // http://redux.js.org/docs/basics/Actions.html#action-creators
@@ -17,3 +18,17 @@ export const addEntity = (entityType, id, data) => {
     data,
   }
 }
+
+export const fetchEntities = (entityType) => {
+  const request = entityData.fetchEntitiesRequest(entityType);
+
+  // When dispatched, redux-promise-middleware will handle this and
+  // magically dispatch FETCH_ENTITIES_{PENDING,FULFILLED,REJECTED}
+  // actions according to the 3 possible stages of the conversation
+  // with the API endpoint.
+  return {
+    type: actionTypes.FETCH_ENTITIES,
+    meta: { entityType },
+    payload: request
+  }
+}

src/js/frontend/src/containers/EntityListContainer.js

@@ -3,9 +3,11 @@ import Radium from "radium"
 import { connect } from 'react-redux';
 
 import * as actions from "../Redux/actions"
+import entityData from "../lib/entityData"
 
 class EntityListContainer extends React.Component {
   componentWillMount () {
+    this.props.fetchEntities(this.props.route.entityType);
   }
 
   render () {
@@ -29,8 +31,14 @@ class EntityListContainer extends React.Component {
 //     entities: state.get("entities"),
 //   };
 // };
-// 
-// export default connect(mapStateToProps)(Radium(EntityListContainer));
 
-export default Radium(EntityListContainer);
+const mapDispatchToProps = (dispatch) => {
+  return {
+    fetchEntities: (entityType) => {
+      dispatch(actions.fetchEntities(entityType));
+    }
+  }
+}
+
+export default connect(null, mapDispatchToProps)(Radium(EntityListContainer));
 

src/js/frontend/src/lib/api.js

@@ -8,6 +8,10 @@ let api = {
   URL: function (path) {
     return this.protocol + "://" + this.host + ":" + this.port +
       this.apiPathPrefix + path;
+  },
+
+  fetchEntitiesURL: function (entityType) {
+    return this.URL(entityType);
   }
 }
 

src/js/frontend/src/lib/entityData.js

@@ -1,5 +1,6 @@
 let d3 = require('d3');
 let api = require('./api');
+import axios from "axios"
 
 let entityData = {
   apiURL: function(entityType, entityId) {
@@ -14,6 +15,7 @@ let entityData = {
     return this.validTypes.indexOf(entityType) >= 0;
   },
 
+  // FIXME: retire this in favour of fetchEntitiesRequest() below
   fetch: function(entityType, entityId, onSuccess) {
     let url = this.apiURL(entityType, entityId);
     console.debug("Fetching from " + url);
@@ -47,6 +49,15 @@ let entityData = {
       onSuccess(json);
     };
   },
+
+  fetchEntitiesRequest: function (entityType) {
+    return axios.get(api.fetchEntitiesURL(entityType), {
+      headers: {
+        "Content-Type": "application/json",
+        "Accept": "application/vnd.api+json"
+      },
+    });
+  }
 }
 
 module.exports = entityData;