set method post (configure post actions in redux), communicate this action with server

Author: one92tb

client/package-lock.json

@@ -9,16 +9,21 @@
     "json-server": "^0.14.0",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
+    "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.4",
     "reactstrap": "^6.3.1",
     "redux": "^4.0.0",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "remote-redux-devtools": "^0.5.13"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "redux-devtools": "^3.4.1"
   }
 }

client/package.json

@@ -32,7 +32,7 @@ class App extends Component {
     console.log(routes);
     return (<Router>
       <Container className="mainContainer">
-        <header className="header">s
+        <header className="header">
           <span className="headerText">Map Creator</span>
         </header>
         <nav className="nav"><NavBar/></nav>

client/src/App.js

@@ -0,0 +1,23 @@
+import axios from 'axios';
+
+export const postedMarkerRecord = (record) => ({
+  type: 'POSTED_RECORD_SUCCESS',
+  record
+})
+
+export const postedMarkerError = (error) => ({
+  type: 'POSTED_RECORD_ERROR',
+  error
+})
+
+export const postMarkerRecord = (record) => (dispatch) =>{
+    dispatch({type: 'POSTING_RECORD'})
+    axios.create({baseURL: 'http://localhost:8080'}).post('/markers', record)
+      .then(res=>{
+        console.log(res);
+        dispatch(postedMarkerRecord(res.data));
+      })
+      .catch(error=>{
+        dispatch(postedMarkerRecord(error));
+      })
+}

client/src/actions/postMarkerRecord.js

@@ -1,4 +1,6 @@
 import React, {Component} from 'react';
+import {postMarkerRecord} from '../../actions/postMarkerRecord';
+import {connect} from 'react-redux';
 import {
   Button,
   Form,
@@ -10,32 +12,48 @@ import {
 import './markerCreator.css'
 
 class MarkerCreator extends Component {
-  constructor(props){
+  constructor(props) {
     super(props);
     this.state = {
-      selectedFile: null
+      markerName: '',
+      markerImage: ''
     }
 
-    this.fileSelectedHandler = this.fileSelectedHandler.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.sendRecord = this.sendRecord.bind(this);
   }
 
-  fileSelectedHandler(e){
-    console.log(e.target.files[0]);
+  onChange(event) {
+    if (event.target.name === "markerName") {
+      this.setState({markerName: event.target.value})
+    } else {
+      this.setState({markerImage: event.target.files[0]})
+    }
+  }
+
+  sendRecord(event) {
+    event.preventDefault();
+    const postMarkerRecord = this.props.postMarkerRecord;
+
+    const fd = new FormData();
+
+    fd.append('file', this.state.markerImage);
+    fd.append('markerName', this.state.markerName);
+
+    postMarkerRecord(fd);
   }
 
   render() {
     console.log(this.state);
     return (<div>
-      <div className="markerImage">
-
-      </div>
-      <Form>
+      <div className="markerImage"></div>
+      <Form onSubmit={this.sendRecord}>
         <FormGroup>
           <Label for="exampleText">Name</Label>
-          <Input type="text" name="text" id="exampleText"/>
+          <Input type="text" name="markerName" onChange={(e) => this.onChange(e)}/>
         </FormGroup>
         <FormGroup>
-          <Input type="file" name="file" id="exampleFile" onChange={(e) => this.fileSelectedHandler(e)}/>
+          <Input type="file" name="markerImage" onChange={(e) => this.onChange(e)}/>
           <FormText color="muted"></FormText>
         </FormGroup>
         <Button>Upload</Button>
@@ -44,4 +62,10 @@ class MarkerCreator extends Component {
   }
 }
 
-export default MarkerCreator;
+const mapStateToProps = {}
+
+const mapDispatchToProps = {
+  postMarkerRecord
+}
+
+export default connect(null, mapDispatchToProps)(MarkerCreator);