install and use redux to fetch data from server

client/src/index.js

@@ -4,8 +4,14 @@ import './index.css';
 import 'semantic-ui-css/semantic.min.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import { Provider } from 'react-redux';
+import { createStore, applyMiddleware } from 'redux';
+import thunkMiddleware from 'redux-thunk';
+import { rootReducer } from "./store/reducers";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const store = createStore(rootReducer, applyMiddleware(thunkMiddleware));
+
+ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

client/src/scenes/DoorLockCharges/index.js

@@ -1,12 +1,16 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
-import { Container, Form } from "semantic-ui-react";
+import { Container, Form, Loader } from "semantic-ui-react";
 
 import MainMenu from '../../components/MainMenu';
+import { fetchDoorLockCharges } from "../../store/actions";
 
 class DoorLockCharges extends Component {
 
     render () {
+        console.log(this.props);
+        const pending = false;
         return (
             <Container>
                 <MainMenu/>
@@ -33,11 +37,24 @@ class DoorLockCharges extends Component {
                         label="Select DLock file"
                         type="file"
                     />
-                    <Form.Button>Generate Report</Form.Button>
+                    <Form.Button onClick={this.props.fetchDoorLockCharges}>Generate Report</Form.Button>
                 </Form>
+                {
+                    pending && <Loader active />
+                }
             </Container>
         );
     }
 }
 
-export default DoorLockCharges;
+const mapStateToProps = state => ({
+    incidents: state.doorLockCharges.incidents,
+    pending: state.doorLockCharges.pending,
+    error: state.doorLockCharges.error,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+    fetchDoorLockCharges: () => fetchDoorLockCharges(dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(DoorLockCharges);

client/src/store/actions/doorLockActions.js

@@ -0,0 +1,17 @@
+import {
+    FETCH_DOOR_LOCK_CHARGES_PENDING,
+    FETCH_DOOR_LOCK_CHARGES_SUCCESS,
+    FETCH_DOOR_LOCK_CHARGES_FAILED
+} from "../constants";
+
+export const fetchDoorLockCharges = (dispatch) => {
+    dispatch({type: FETCH_DOOR_LOCK_CHARGES_PENDING});
+    fetch('/api/doorLockCharges')
+        .then(response => response.json())
+        .then(data => {
+            dispatch({type: FETCH_DOOR_LOCK_CHARGES_SUCCESS, payload: data})
+        })
+        .catch(err => {
+            dispatch({type: FETCH_DOOR_LOCK_CHARGES_FAILED, payload: err})
+        })
+};

client/src/store/actions/index.js

@@ -0,0 +1 @@
+export * from './doorLockActions';

client/src/store/constants.js

@@ -0,0 +1,3 @@
+export const FETCH_DOOR_LOCK_CHARGES_PENDING = 'FETCH_DOOR_LOCK_CHARGES_PENDING';
+export const FETCH_DOOR_LOCK_CHARGES_SUCCESS = 'FETCH_DOOR_LOCK_CHARGES_SUCCESS';
+export const FETCH_DOOR_LOCK_CHARGES_FAILED = 'FETCH_DOOR_LOCK_CHARGES_FAILED';

client/src/store/reducers/doorLockReducers.js

@@ -0,0 +1,35 @@
+import {
+    FETCH_DOOR_LOCK_CHARGES_PENDING,
+    FETCH_DOOR_LOCK_CHARGES_SUCCESS,
+    FETCH_DOOR_LOCK_CHARGES_FAILED
+} from "../constants";
+
+const initialState = {
+    incidents: [],
+    pending: false,
+    error: '',
+};
+
+export const doorLockCharges = (state, action) => {
+  state = state || initialState;
+  action = action || {};
+
+  switch(action.type){
+      case FETCH_DOOR_LOCK_CHARGES_PENDING:
+          return Object.assign({}, state, {
+              pending: true,
+          });
+      case FETCH_DOOR_LOCK_CHARGES_SUCCESS:
+          return Object.assign({}, state, {
+              incidents: action.payload,
+              pending: false,
+          });
+      case FETCH_DOOR_LOCK_CHARGES_FAILED:
+          return Object.assign({}, state, {
+              pending: false,
+              error: action.payload,
+          });
+      default:
+          return state;
+  }
+};

client/src/store/reducers/index.js

@@ -0,0 +1,8 @@
+import { combineReducers } from "redux";
+
+import { doorLockCharges} from "./doorLockReducers";
+
+export const rootReducer = combineReducers({
+    doorLockCharges
+});
+