move distance calculation to a helper file

src/App.js

@@ -12,6 +12,8 @@ import Mapbox from './Mapbox';
 import Leaflet from './Leaflet';
 import Google from './Google';
 
+import {calcDistance} from './helpers/distance';
+
 export class App extends React.Component{
     constructor(props) {
         super(props)
@@ -35,20 +37,8 @@ export class App extends React.Component{
         this.setState({mapConfig: mapConfigCopy})
     }
 
-    calcDistance = () => {
-        let dst = 0;
-        let pathCopy = this.state.mapConfig.path.slice();
-        for(let i=0; i<pathCopy.length-1; i++) {
-            var radlat1 = Math.PI * pathCopy[i][0]/180;
-            var radlat2 = Math.PI * pathCopy[i+1][0]/180;
-            var theta = pathCopy[i][1]-pathCopy[i+1][1];
-            var radtheta = Math.PI * theta/180;
-            var d = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
-            if (d > 1) {
-                d = 1;
-            }
-            dst += Math.acos(d) * 180/Math.PI * 60 * 1.1515 * 1.609344;
-        }
+    getDistance = () => {
+        let dst = calcDistance(this.state.mapConfig.path)
         this.updateMapState("distance", dst)
     }
 
@@ -64,7 +54,7 @@ export class App extends React.Component{
                     <Pigeon
                         mapConfig={this.state.mapConfig}
                         updateMapState={this.updateMapState}
-                        calcDistance={this.calcDistance}
+                        getDistance={this.getDistance}
                     />}
                   />
                   <Route path="/mapbox-gl" exact component={Mapbox} />

src/Leaflet.js

@@ -8,6 +8,7 @@ import {
   Polyline
 } from "react-leaflet";
 import "./css/maps.css";
+import {calcDistance} from './helpers/distance';
 
 const LONGITUDE = 14.320570
 const LATITUDE = 48.336950
@@ -28,7 +29,7 @@ export default class Leaflet extends React.Component{
     let pathCopy = this.state.path.slice();
     pathCopy.push([lat, lng]);
     this.setState({path: pathCopy})
-    this.calcDistance()
+    this.getDistance()
   }
 
   updateMarker = (idx, event) => {
@@ -37,30 +38,11 @@ export default class Leaflet extends React.Component{
     let pathCopy = this.state.path.slice();
     pathCopy[idx] = [lat, lng]
     this.setState({path: pathCopy})
-    this.calcDistance()
+    this.getDistance()
   }
 
-  calcDistance = () => {
-    let dst = 0;
-    let pathCopy = this.state.path.slice();
-    for(let i=0; i<pathCopy.length-1; i++) {
-    /*  let currLat = pathCopy[i][0];
-      let currLng = pathCopy[i][1];
-      let nextLat = pathCopy[i+1][0];
-      let nextLng = pathCopy[i+1][1];
-      let dstLat = (currLat - nextLat) ** 2
-      let dstLng = (currLng - nextLng) ** 2
-      dst += Math.sqrt(dstLat + dstLng) * 108*/
-      var radlat1 = Math.PI * pathCopy[i][0]/180;
-      var radlat2 = Math.PI * pathCopy[i+1][0]/180;
-      var theta = pathCopy[i][1]-pathCopy[i+1][1];
-      var radtheta = Math.PI * theta/180;
-      var d = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
-      if (d > 1) {
-        d = 1;
-      }
-      dst += Math.acos(d) * 180/Math.PI * 60 * 1.1515 * 1.609344;
-    }
+  getDistance = () => {
+    let dst = calcDistance(this.state.path)
     this.setState({distance: dst})
   }
 
@@ -109,11 +91,11 @@ export default class Leaflet extends React.Component{
 
         <div>
           <button onClick={this.clearPath}>Clear path</button>
-          <button onClick={this.calcDistance}>Calculate Distance</button>
+          <button onClick={this.getDistance}>Calculate Distance</button>
           <p>
             Distanz: {Math.round(this.state.distance*100)/100} km
           </p>
-          </div>
+        </div>
       </div>
     );
   }

src/Pigeon.js

@@ -36,7 +36,7 @@ export default class Pigeon extends React.Component{
     let pathCopy = this.props.mapConfig.path.slice();
     pathCopy.push([lat, lng]);
     this.props.updateMapState("path", pathCopy)
-    this.props.calcDistance()
+    this.props.getDistance()
   }
 
   render(){
@@ -71,7 +71,7 @@ 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.calcDistance}>Calculate Distance</button>
+          <button onClick={this.props.getDistance}>Calculate Distance</button>
           <p>
             Distanz: {Math.round(mapConfig.distance*100)/100} km
           </p>

src/helpers/distance.js

@@ -0,0 +1,15 @@
+  export const calcDistance = (path) => {
+    let distance = 0;
+    for(let i=0; i<path.length-1; i++) {
+      var radlat1 = Math.PI * path[i][0]/180;
+      var radlat2 = Math.PI * path[i+1][0]/180;
+      var theta = path[i][1]-path[i+1][1];
+      var radtheta = Math.PI * theta/180;
+      var d = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
+      if (d > 1) {
+        d = 1;
+      }
+      distance += Math.acos(d) * 180/Math.PI * 60 * 1.1515 * 1.609344;
+    }
+    return distance
+  }