outsource path buttons to component

src/PathButtons.js

@@ -0,0 +1,61 @@
+import React from "react";
+import {Button, Input} from "reactstrap";
+import {fetchPathKeys, fetchPaths, savePathToDb} from "./helpers/dbHelpers.js";
+
+
+export default class PathButtons extends React.Component{
+  constructor(props){
+    super(props);
+    this.state = {
+      pathKey: "",
+      pathKeys: [],
+      savePathKey: "-"
+    }
+    this.savePathToDb = savePathToDb.bind(this)
+  }
+
+  componentDidMount(){
+    this.getPathKeys()
+  }
+
+  getPathKeys = () => {
+    fetchPathKeys().then(keys => this.setState({pathKeys: keys}))
+  }
+
+  getPath = () => {
+    fetchPaths().then(paths => this.props.updateState("path", paths[this.state.pathKey]))
+  }
+
+  choosePath = (event) => {
+    this.setState({pathKey: event.target.value})
+    this.getPath()
+  }
+
+  savePath = () => {
+    this.savePathToDb().then(res => {
+      let pathKeysCopy = this.state.pathKeys.slice();
+      pathKeysCopy.push(this.state.savePathKey);
+      this.setState({pathKeys: pathKeysCopy});
+      this.setState({savePathKey: ""});
+    })
+  }
+
+  setSavePathKey = (event) => {
+    this.setState({savePathKey: event.target.value})
+  }
+
+  render() {
+    return (
+      <div>
+        <Input type="text" onChange={this.setSavePathKey} value={this.state.savePathKey}/>
+        <Button onClick={this.savePath}>save path</Button>
+
+        <Input type="select" name="select" id="savePath" onChange={this.choosePath}>
+          {this.state.pathKeys.map((name, idx) =>
+            <option value={name} key={idx}>{name}</option>
+          )}
+        </Input>
+      </div>
+    )
+  }
+}

src/helpers/dbHelpers.js

@@ -32,7 +32,7 @@ export function savePathToDb(){
   let json = JSON.stringify({
       path: {
         name: this.state.savePathKey,
-        coords: this.state.path
+        coords: this.props.path
       }
     })
   let reqOptions = {

src/maps/Leaflet.js

@@ -11,7 +11,7 @@ import "./../css/maps.css";
 import {calcDistance} from "./../helpers/distance";
 import {longitude, latitude, mapWidth, mapHeight, testPath} from "./../config/variables";
 import {Button, Input} from "reactstrap";
-import {fetchPathKeys, fetchPaths, savePathToDb} from "./../helpers/dbHelpers.js"
+import PathButtons from "./../PathButtons";
 
 export default class Leaflet extends React.Component{
   constructor(props){
@@ -22,44 +22,14 @@ export default class Leaflet extends React.Component{
       zoom: 15,
       path: testPath,
       distance: 0,
-      pathKey: "",
-      pathKeys: [],
-      savePathKey: "-"
     }
-
-    this.savePathToDb = savePathToDb.bind(this)
-  }
-
-  componentDidMount(){
-    this.getPathKeys()
   }
 
-  getPathKeys = () => {
-    fetchPathKeys().then(keys => this.setState({pathKeys: keys}))
-  }
-
-  getPath = () => {
-    fetchPaths().then(paths => this.setState({path: paths[this.state.pathKey]}))
+  updateState = (key, value) => {
+    this.setState({[key]: value})
     this.getDistance()
   }
 
-  choosePath = (event) => {
-    this.setState({pathKey: event.target.value})
-    this.getPath()
-  }
-
-  savePath = () => {
-    this.savePathToDb().then(res => {
-      let pathKeysCopy = this.state.pathKeys.slice();
-      pathKeysCopy.push(this.state.savePathKey);
-      this.setState({pathKeys: pathKeysCopy, savePathKey: ""})
-    })
-  }
-
-  setSavePathKey = (event) => {
-    this.setState({savePathKey: event.target.value})
-  }
-
   addMarker = event => {
     const { lat, lng } = event.latlng
     let pathCopy = this.state.path.slice();
@@ -124,18 +94,10 @@ export default class Leaflet extends React.Component{
           <Button onClick={this.clearPath}>Clear path</Button>
           <Button onClick={this.getDistance}>Calculate Distance</Button>
 
-          <Input type="text" onChange={this.setSavePathKey} value={this.state.savePathKey}/>
-          <Button onClick={this.savePath}>save path</Button>
-
-          <Input type="select" name="select" id="savePath" onChange={this.choosePath.bind(this)}>
-            {this.state.pathKeys.map((name, idx) =>
-              <option value={name} key={idx}>{name}</option>
-            )}
-          </Input>
-
           <p>
             Distanz: {Math.round(this.state.distance*100)/100} km
           </p>
+          <PathButtons updateState={this.updateState} path={this.state.path}/>
         </div>
       </div>
     );