From fdbc567b3b572ffd05c1928738cf98750bec4a5b Mon Sep 17 00:00:00 2001 From: Jonathan Rainville Date: Wed, 1 Aug 2018 14:09:58 -0400 Subject: [PATCH] add basic ui for processes --- embark-ui/src/actions/index.js | 4 +- embark-ui/src/api/index.js | 7 +-- embark-ui/src/components/Layout.js | 22 ++++++--- embark-ui/src/containers/AppContainer.js | 4 +- .../src/containers/ProcessesContainer.js | 49 +++++++++++++++++++ embark-ui/src/index.js | 2 +- embark-ui/src/reducers/index.js | 9 ++-- embark-ui/src/reducers/processesReducer.js | 12 +++++ embark-ui/src/routes.js | 8 +-- embark-ui/src/sagas/index.js | 4 +- 10 files changed, 92 insertions(+), 29 deletions(-) create mode 100644 embark-ui/src/containers/ProcessesContainer.js create mode 100644 embark-ui/src/reducers/processesReducer.js diff --git a/embark-ui/src/actions/index.js b/embark-ui/src/actions/index.js index f750ddf1..5d1ea19f 100644 --- a/embark-ui/src/actions/index.js +++ b/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 }; } diff --git a/embark-ui/src/api/index.js b/embark-ui/src/api/index.js index 2adc3d1e..732f38d4 100644 --- a/embark-ui/src/api/index.js +++ b/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'); } diff --git a/embark-ui/src/components/Layout.js b/embark-ui/src/components/Layout.js index c0347daa..62e4385a 100644 --- a/embark-ui/src/components/Layout.js +++ b/embark-ui/src/components/Layout.js @@ -1,14 +1,16 @@ import React from 'react'; -import { NavLink, withRouter } from "react-router-dom"; -import { Site, Nav, Button, Container } from "tabler-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'; +import logo from '../images/logo.png'; 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: "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: "Processes", to: "/embark/processes", icon: "cpu", LinkComponent: withRouter(NavLink)}, + {value: "Documentation", to: "/embark/documentation", icon: "file-text", LinkComponent: withRouter(NavLink)} ]; const Layout = (props) => ( @@ -32,7 +34,7 @@ const Layout = (props) => ( ) }} - navProps={{ itemsObjects: navBarItems}} + navProps={{itemsObjects: navBarItems}} > {props.children} @@ -40,4 +42,8 @@ const Layout = (props) => ( ); +Layout.propTypes = { + children: PropTypes.element +}; + export default Layout; diff --git a/embark-ui/src/containers/AppContainer.js b/embark-ui/src/containers/AppContainer.js index 1061d713..55f1c1e2 100644 --- a/embark-ui/src/containers/AppContainer.js +++ b/embark-ui/src/containers/AppContainer.js @@ -1,9 +1,9 @@ import {ConnectedRouter} from "connected-react-router"; -import React, { Component } from 'react'; +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() { diff --git a/embark-ui/src/containers/ProcessesContainer.js b/embark-ui/src/containers/ProcessesContainer.js new file mode 100644 index 00000000..abb0da9b --- /dev/null +++ b/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 ( +

+ Loading processes... +

+ ); + } + + if (processes.error) { + return ( +

+ Error API... +

+ ); + } + + return ( +

Loaded

+ ); + } +} + +ProcessesContainer.propTypes = { + processes: PropTypes.object, + fetchProcesses: PropTypes.func +}; + +function mapStateToProps(state) { + return {processes: state.processes}; +} + +export default connect( + mapStateToProps, + { + fetchProcesses + } +)(ProcessesContainer); diff --git a/embark-ui/src/index.js b/embark-ui/src/index.js index 9ceb0a4e..346c9426 100644 --- a/embark-ui/src/index.js +++ b/embark-ui/src/index.js @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { Provider } from 'react-redux'; +import {Provider} from 'react-redux'; import "tabler-react/dist/Tabler.css"; diff --git a/embark-ui/src/reducers/index.js b/embark-ui/src/reducers/index.js index 31c95a57..a1d79e0f 100644 --- a/embark-ui/src/reducers/index.js +++ b/embark-ui/src/reducers/index.js @@ -1,5 +1,6 @@ -import { combineReducers } from 'redux'; -import { RECEIVE_ACCOUNTS, RECEIVE_ACCOUNTS_ERROR } from "../actions"; +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; diff --git a/embark-ui/src/reducers/processesReducer.js b/embark-ui/src/reducers/processesReducer.js new file mode 100644 index 00000000..dc189048 --- /dev/null +++ b/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; + } +} diff --git a/embark-ui/src/routes.js b/embark-ui/src/routes.js index baefb7b9..47936a84 100644 --- a/embark-ui/src/routes.js +++ b/embark-ui/src/routes.js @@ -1,7 +1,8 @@ import React from 'react'; -import { Route, Switch } from 'react-router'; +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 = ( + -) +); -export default routes +export default routes; diff --git a/embark-ui/src/sagas/index.js b/embark-ui/src/sagas/index.js index 49f6c8c6..17b609ad 100644 --- a/embark-ui/src/sagas/index.js +++ b/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)]); }