install and use redux to fetch data from server

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);