add basic ui for processes

embark-ui/src/actions/index.js

@@ -16,7 +16,7 @@ export function fetchAccounts() {
 export function receiveAccounts(accounts) {
   return {
     type: RECEIVE_ACCOUNTS,
-    accounts: accounts
+    accounts
   };
 }
 
@@ -35,7 +35,7 @@ export function fetchProcesses() {
 export function receiveProcesses(processes) {
   return {
     type: RECEIVE_PROCESSES,
-    accounts: processes
+    processes
   };
 }
 

embark-ui/src/api/index.js

@@ -5,10 +5,5 @@ export function fetchAccounts() {
 }
 
 export function fetchProcesses() {
-  console.log('Calling this shit');
-  const stuff = axios.get('http://localhost:8000/embark-api/processes');
-  stuff.then(result => {
-    console.log('result', result);
-  }).catch(console.error);
-  return stuff;
+  return axios.get('http://localhost:8000/embark-api/processes');
 }

embark-ui/src/components/Layout.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {NavLink, withRouter} from "react-router-dom";
 import {Site, Nav, Button, Container} from "tabler-react";
+import PropTypes from 'prop-types';
 
 import logo from '../images/logo.png';
 
@@ -8,7 +9,8 @@ const navBarItems = [
   {value: "Home", to: "/embark", icon: "home", LinkComponent: withRouter(NavLink)},
   {value: "Contracts", to: "/embark/contracts", icon: "box", LinkComponent: withRouter(NavLink)},
   {value: "Explorer", to: "/embark/explorer/accounts", icon: "activity", LinkComponent: withRouter(NavLink)},
-  { value: "Documentation", to: "/embark/documentation", icon: "file-text", LinkComponent: withRouter(NavLink) },
+  {value: "Processes", to: "/embark/processes", icon: "cpu", LinkComponent: withRouter(NavLink)},
+  {value: "Documentation", to: "/embark/documentation", icon: "file-text", LinkComponent: withRouter(NavLink)}
 ];
 
 const Layout = (props) => (
@@ -40,4 +42,8 @@ const Layout = (props) => (
   </Site.Wrapper>
 );
 
+Layout.propTypes = {
+  children: PropTypes.element
+};
+
 export default Layout;

embark-ui/src/containers/AppContainer.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 
 import history from '../history';
 import Layout from '../components/Layout';
-import routes from '../routes'
+import routes from '../routes';
 
 class AppContainer extends Component {
   render() {

embark-ui/src/containers/ProcessesContainer.js

@@ -0,0 +1,49 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {fetchProcesses} from '../actions';
+import PropTypes from 'prop-types';
+
+class ProcessesContainer extends Component {
+  componentDidMount() {
+    this.props.fetchProcesses();
+  }
+
+  render() {
+    const {processes} = this.props;
+    if (!processes.data) {
+      return (
+        <h1>
+          <i>Loading processes...</i>
+        </h1>
+      );
+    }
+
+    if (processes.error) {
+      return (
+        <h1>
+          <i>Error API...</i>
+        </h1>
+      );
+    }
+
+    return (
+      <p>Loaded</p>
+    );
+  }
+}
+
+ProcessesContainer.propTypes = {
+  processes: PropTypes.object,
+  fetchProcesses: PropTypes.func
+};
+
+function mapStateToProps(state) {
+  return {processes: state.processes};
+}
+
+export default connect(
+  mapStateToProps,
+  {
+    fetchProcesses
+  }
+)(ProcessesContainer);

embark-ui/src/reducers/index.js

@@ -1,5 +1,6 @@
 import {combineReducers} from 'redux';
 import {RECEIVE_ACCOUNTS, RECEIVE_ACCOUNTS_ERROR} from "../actions";
+import processesReducer from './processesReducer';
 
 function accounts(state = {}, action) {
   switch (action.type) {
@@ -10,7 +11,7 @@ function accounts(state = {}, action) {
     default:
       return state;
   }
-};
+}
 
-const rootReducer = combineReducers({accounts});
+const rootReducer = combineReducers({accounts, processes: processesReducer});
 export default rootReducer;

embark-ui/src/reducers/processesReducer.js

@@ -0,0 +1,12 @@
+import {RECEIVE_PROCESSES, RECEIVE_PROCESSES_ERROR} from "../actions";
+
+export default function processes(state = {}, action) {
+  switch (action.type) {
+    case RECEIVE_PROCESSES:
+      return Object.assign({}, state, {data: action.processes.data});
+    case RECEIVE_PROCESSES_ERROR:
+      return Object.assign({}, state, {error: true});
+    default:
+      return state;
+  }
+}

embark-ui/src/routes.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {Route, Switch} from 'react-router';
 import Home from './components/Home';
 import AccountsContainer from './containers/AccountsContainer';
+import ProcessesContainer from './containers/ProcessesContainer';
 import NoMatch from './components/NoMatch';
 
 const routes = (
@@ -9,9 +10,10 @@ const routes = (
     <Switch>
       <Route exact path="/embark" component={Home} />
       <Route path="/embark/explorer/accounts" component={AccountsContainer} />
+      <Route path="/embark/processes" component={ProcessesContainer} />
       <Route component={NoMatch} />
     </Switch>
   </React.Fragment>
-)
+);
 
-export default routes
+export default routes;

embark-ui/src/sagas/index.js

@@ -15,11 +15,9 @@ export function *watchFetchAccounts() {
   yield takeEvery(actions.FETCH_ACCOUNTS, fetchAccounts);
 }
 
-
 export function *fetchProcesses() {
   try {
     const processes = yield call(api.fetchProcesses);
-    console.log('Got processes', processes);
     yield put(actions.receiveProcesses(processes));
   } catch (e) {
     yield put(actions.receiveProcessesError());
@@ -31,5 +29,5 @@ export function *watchFetchProcesses() {
 }
 
 export default function *root() {
-  yield all([fork(watchFetchAccounts, watchFetchProcesses())]);
+  yield all([fork(watchFetchAccounts), fork(watchFetchProcesses)]);
 }