save several paths in file and read them

src/Leaflet.js

@@ -17,9 +17,15 @@ export default class Leaflet extends React.Component{
     longitude: longitude,
     zoom: 15,
     path: testPath,
-    distance: 0
+    distance: 0,
+    pathKey: "",
+    pathKeys: []
     }
 
+  componentDidMount(){
+    this.fetchPathKeys()
+  }
+
   fetchPath = () => {
     fetch("http://localhost:5000/get-path")
       .then(res => {
@@ -28,16 +34,38 @@ export default class Leaflet extends React.Component{
         }
         return res.json();
       }).then(data => {
-        this.setState({path: data})
+        this.setState({path: data[this.state.pathKey]})
         this.getDistance()
       }, err => {
         console.log(err)
+      })
+  }
+
+  fetchPathKeys = () => {
+    fetch("http://localhost:5000/get-path")
+      .then(res => {
+        if(res.status >= 400) {
+            throw new Error("Server responds with error!");
+        }
+        return res.json();
+      }).then(data => {
+        this.setState({pathKeys: Object.keys(data)})
+      }, err => {
+        console.log(err)
       });
   }
 
-  setPath = () => {
+  getPath = (event) => {
+    this.setState({pathKey: event.target.value})
+    this.fetchPath()
+  }
+
+  savePath = () => {
     let json = JSON.stringify({
-        "path": this.state.path
+        "path": {
+          "name": this.state.savePathKey,
+          "coords": this.state.path
+        }
       })
     fetch("http://localhost:5000/set-path", {
       method: 'POST',
@@ -49,6 +77,10 @@ export default class Leaflet extends React.Component{
     })
   }
 
+  setSavePathKey = (event) => {
+    this.setState({savePathKey: event.target.value})
+  }
+
   newPathPoint = event => {
     const { lat, lng } = event.latlng
     console.log("Clicked at", lat, "/", lng)
@@ -114,8 +146,16 @@ export default class Leaflet extends React.Component{
         <div className="mapInfo">
           <button onClick={this.clearPath}>Clear path</button>
           <button onClick={this.getDistance}>Calculate Distance</button>
-          <button onClick={this.fetchPath}>fetch path</button>
-          <button onClick={this.setPath}>save path</button>
+
+          <button onClick={this.savePath}>save path</button>
+          <input type="text" onChange={this.setSavePathKey} value={this.state.savePathKey}/>
+
+          <select name="paths" onChange={this.getPath.bind(this)}>
+            {this.state.pathKeys.map((name, idx) =>
+              <option value={name} key={idx}>{name}</option>
+            )}
+          </select>
+
           <p>
             Distanz: {Math.round(this.state.distance*100)/100} km
           </p>

src/databaseInterface.py

@@ -16,8 +16,11 @@ def get_path():
 @app.route("/set-path", methods=["POST"])
 def set_path():
     path = request.json.get("path")
+    with open("path.json", "r") as pathFile:
+        pathDict = json.load(pathFile)
+    pathDict[path.get("name")] = path.get("coords")
     with open("path.json", "w") as pathFile:
-        json.dump(path, pathFile)
+        json.dump(pathDict, pathFile)
     return "ok", 200