pigeon: remove state from app

src/App.js

@@ -18,36 +18,8 @@ import Leaflets from './test/Leaflets';
 import Googles from './test/Googles';
 import Mapboxes from './test/Mapboxes';
 
-import {calcDistance} from './helpers/distance';
-import {longitude, latitude} from "./config/variables";
-
 
 export class App extends React.Component{
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      mapConfig: {
-        zoom: 15,
-        path: [[latitude, longitude]],
-        coords: [latitude, longitude],
-        defaultZoom: 15,
-        distance: 0,
-      }
-    }
-  }
-
-  updateMapState = (key, value) => {
-    let mapConfigCopy = JSON.parse(JSON.stringify(this.state.mapConfig));
-    mapConfigCopy[key] = value;
-    this.setState({mapConfig: mapConfigCopy})
-  }
-
-  getDistance = () => {
-    let dst = calcDistance(this.state.mapConfig.path)
-    this.updateMapState("distance", dst)
-  }
-
   render(){
     return (
       <div>
@@ -57,13 +29,7 @@ export class App extends React.Component{
             <Switch>
               <Route path="/" exact component={Home} />
 
-              <Route exact path="/pigeon-map" render={() =>
-                <Pigeon
-                  mapConfig={this.state.mapConfig}
-                  updateMapState={this.updateMapState}
-                  getDistance={this.getDistance}
-                />}
-              />
+              <Route path="/pigeon-map" exact component={Pigeon} />
               <Route path="/pigeon-map/test" exact component={Pigeons} />
 
               <Route path="/map-gl" exact component={MapGL} />

src/maps/Pigeon.js

@@ -6,8 +6,21 @@ import Draggable from "pigeon-draggable";
 import {longitude, latitude, mapWidth, mapHeight} from "./../config/variables";
 import {Button} from "reactstrap";
 import PathButtons from "./../PathButtons";
+import {calcDistance} from "./../helpers/distance";
 
 export default class Pigeon extends React.Component{
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      zoom: 15,
+      path: [[latitude, longitude]],
+      coords: [latitude, longitude],
+      defaultZoom: 15,
+      distance: 0,
+    }
+  }
+
   providers = {
     osm: (x, y, z) => {
       // use 3 urls to download the tiles faster
@@ -20,40 +33,45 @@ export default class Pigeon extends React.Component{
   }
 
   updateState = (key, value) => {
-    this.props.updateMapState(key, value)
-    this.props.getDistance()
+    this.setState({[key]: value})
+    this.getDistance()
   }
 
   zoomIn = () => {
-    let newZoom = Math.min(this.props.mapConfig.zoom + 1, 22)
-    this.props.updateMapState("zoom", newZoom)
+    let newZoom = Math.min(this.state.zoom + 1, 22)
+    this.setState({zoom: newZoom})
   }
 
   zoomOut = () => {
-    let newZoom = Math.max(this.props.mapConfig.zoom - 1, 0)
-    this.props.updateMapState("zoom", newZoom)
+    let newZoom = Math.max(this.state.zoom - 1, 0)
+    this.setState({zoom: newZoom})
   }
 
   removeMarkers = () => {
-    this.props.updateMapState("path", [])
+    this.setState({path: []})
   }
 
   addMarker = (event) => {
     const lat = event.latLng[0]
     const lng = event.latLng[1]
-    let pathCopy = this.props.mapConfig.path.slice();
+    let pathCopy = this.state.path.slice();
     pathCopy.push([lat, lng]);
-    this.props.updateMapState("path", pathCopy)
-    this.props.getDistance()
+    this.setState({path: pathCopy})
+    this.getDistance()
   }
 
   updateMarker = (event, idx) => {
     const lat = event[0]
     const lng = event[1]
-    let pathCopy = this.props.mapConfig.path.slice();
+    let pathCopy = this.state.path.slice();
     pathCopy[idx] = [lat, lng];
-    this.props.updateMapState("path", pathCopy)
-    this.props.getDistance()
+    this.setState({path: pathCopy})
+    this.getDistance()
+  }
+
+  getDistance = () => {
+    let dst = calcDistance(this.state.path)
+    this.setState({distance: dst})
   }
 
   render(){
@@ -62,9 +80,9 @@ export default class Pigeon extends React.Component{
       <div>
         <div className="map">
           <Map
-            center={mapConfig.coords}
-            defaultZoom={mapConfig.defaultZoom}
-            zoom={mapConfig.zoom}
+            center={this.state.coords}
+            defaultZoom={this.state.defaultZoom}
+            zoom={this.state.zoom}
             width={mapWidth}
             height={mapHeight}
             attribution="Pigeon Map"
@@ -95,11 +113,11 @@ export default class Pigeon extends React.Component{
           <Button onClick={this.zoomIn}>+</Button>
           <Button onClick={this.zoomOut}>-</Button>
           <Button onClick={this.removeMarkers}>Clear path</Button>
-          <Button onClick={this.props.getDistance}>Calculate Distance</Button>
+          <Button onClick={this.getDistance}>Calculate Distance</Button>
           <p>
-            Distanz: {Math.round(mapConfig.distance*100)/100} km
+            Distanz: {Math.round(this.state.distance*100)/100} km
           </p>
-          <PathButtons updateState={this.updateState} path={this.props.mapConfig.path}/>
+          <PathButtons updateState={this.updateState} path={this.state.path}/>
         </div>
       </div>
     );