move maps and db to folders

src/About.js

@@ -1,17 +0,0 @@
-import React from "react";
-
-export default class About extends React.Component{
-  render(){
-    return (
-      <div className="about">
-        <div class="container">
-          <div class="row align-items-center my-5">
-            <div class="col-lg-5">
-              <h1 class="font-weight-light">About</h1>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}

src/App.js

@@ -4,14 +4,13 @@ import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import Navigation from './Navigation';
 import Footer from './Footer';
 import Home from './Home';
-import About from './About';
 
 // Maps
-import Pigeon from './Pigeon';
-import MapGL from './MapGL';
-import Leaflet from './Leaflet';
-import Google from './Google';
-import Mapbox from './Mapbox';
+import Pigeon from './maps/Pigeon';
+import MapGL from './maps/MapGL';
+import Leaflet from './maps/Leaflet';
+import Google from './maps/Google';
+import Mapbox from './maps/Mapbox';
 
 import Pigeons from './test/Pigeons';
 import MapGLs from './test/MapGLs';
@@ -57,7 +56,6 @@ export class App extends React.Component{
           <div className="wrapper">
             <Switch>
               <Route path="/" exact component={Home} />
-              <Route path="/about" exact component={About} />
 
               <Route exact path="/pigeon-map" render={() =>
                 <Pigeon

src/User.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Button } from "reactstrap";
-
-export default class User extends React.Component{    
-    render(){
-        return (
-          <div>
-            {this.props.title + " - " + this.props.app.hello()}
-            {": Name = " + this.props.name}
-            {", Counter = " + this.props.counter + ", "}
-            <Button color="info" onClick={(idx) => this.props.doClick(idx)}>Increment</Button>
-          </div>
-        )
-    }
-
-}

src/databaseInterface.py → src/database/databaseInterface.py

@@ -1,14 +1,17 @@
 from flask import Flask, request
 from flask_cors import CORS
+from pathlib import Path
 import json
+import os
 
 app = Flask(__name__)
 CORS(app)
 
+DIRECTORY = os.path.dirname(os.path.realpath(__file__))
 
 @app.route("/get-path", methods=["GET"])
 def get_path():
-    with open("path.json", "r") as pathFile:
+    with open(Path(DIRECTORY, "path.json"), "r") as pathFile:
         path = pathFile.read()
     return path
 
@@ -16,10 +19,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:
+    filePath = Path(DIRECTORY, "path.json")
+    with open(filePath, "r") as pathFile:
         pathDict = json.load(pathFile)
     pathDict[path.get("name")] = path.get("coords")
-    with open("path.json", "w") as pathFile:
+    with open(filePath, "w") as pathFile:
         json.dump(pathDict, pathFile)
     return "ok", 200
 

src/helpers/dbHelpers.js

@@ -30,12 +30,11 @@ export const fetchPaths = () => {
 
 export function savePathToDb(){
   let json = JSON.stringify({
-      "path": {
-        "name": this.state.savePathKey,
-        "coords": this.state.path
+      path: {
+        name: this.state.savePathKey,
+        coords: this.state.path
       }
     })
-  
   let reqOptions = {
     method: 'POST',
     headers: {
@@ -44,16 +43,13 @@ export function savePathToDb(){
     },
     body: json
   }
-  
+
   return fetch("http://localhost:5000/set-path", reqOptions)
     .then(res => {
       if(res.status >= 400) {
           throw new Error("Server responds with error!");
       }
-      return res.json();
-    })
-    .then(data => {
-      return data
+      return res.text();
     }, err => {
       console.log(err)
     })

src/index.js

@@ -2,11 +2,15 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { App } from './App';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import { Provider } from 'react-redux'
+import store from './redux/store'
 
 
 ReactDOM.render(
-  <div>
-    <App title="App"/>
-  </div>,
+  <Provider store={store}>
+    <div>
+      <App title="App"/>
+    </div>
+  </Provider>,
   document.getElementById('root')
 );

src/Google.js → src/maps/Google.js

@@ -1,9 +1,9 @@
 import React from "react";
 import GoogleMapReact from "google-map-react";
-import "./css/maps.css";
-import apiKey from './config/googleApiKey.js';
-import {calcDistance} from './helpers/distance';
-import {longitude, latitude, mapWidth, mapHeight, markerIcon, testPath} from "./config/variables";
+import "./../css/maps.css";
+import apiKey from './../config/googleApiKey.js';
+import {calcDistance} from './../helpers/distance';
+import {longitude, latitude, mapWidth, mapHeight, markerIcon, testPath} from "./../config/variables";
 import {Button} from "reactstrap";
 
 const svgStyle = {

src/Leaflet.js → src/maps/Leaflet.js

@@ -7,11 +7,11 @@ import {
   ZoomControl,
   Polyline
 } from "react-leaflet";
-import "./css/maps.css";
-import {calcDistance} from "./helpers/distance";
-import {longitude, latitude, mapWidth, mapHeight, testPath} from "./config/variables";
+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 {fetchPathKeys, fetchPaths, savePathToDb} from "./../helpers/dbHelpers.js"
 
 export default class Leaflet extends React.Component{
   constructor(props){

src/MapGL.js → src/maps/MapGL.js

@@ -2,17 +2,18 @@ import React from "react";
 import ReactMapGL from "react-map-gl";
 import {
   Marker,
-  NavigationControl, 
+  NavigationControl,
   FullscreenControl,
   ScaleControl,
   GeolocateControl,
 //  Layer,
 //  Source,
 } from "react-map-gl";
-import "./css/maps.css";
-import mapboxToken from './config/mapboxToken.js';
-import {calcDistance} from './helpers/distance';
-import {longitude, latitude, mapWidth, mapHeight, markerIcon} from "./config/variables";
+//import {Polyline} from "@mapbox/polyline";
+import "./../css/maps.css";
+import mapboxToken from "./../config/mapboxToken.js";
+import {calcDistance} from "./../helpers/distance";
+import {longitude, latitude, mapWidth, mapHeight, markerIcon} from "./../config/variables";
 import {Button} from "reactstrap";
 
 export default class MapGL extends React.Component{
@@ -35,7 +36,6 @@ export default class MapGL extends React.Component{
     const lat = event.lngLat[1]
     console.log("Clicked at", lng, "/", lat);
     this.getRoute(lng, lat);
-    this.getDistance()
   }
 
   updateMarker = (idx, event) => {
@@ -49,6 +49,7 @@ export default class MapGL extends React.Component{
   }
 
   getDistance = () => {
+    console.log(this.state.path)
     let dst = calcDistance(this.state.path)
     this.setState({distance: dst})
   }
@@ -63,10 +64,11 @@ export default class MapGL extends React.Component{
     if (this.state.path.length < 1){
       pathCopy.push(end)
       this.setState({path: pathCopy})
+      this.getDistance()
     } else {
       var start = this.state.path[this.state.path.length-1];
       var baseUrl = "https://api.mapbox.com/directions/v5/mapbox/"
-      var url = baseUrl + "driving/" + start[0] + "," + start[1] + ";" + end[0] + "," + end[1] + "?alternatives=true&geometries=geojson&steps=true&access_token=" + mapboxToken;
+      var url = baseUrl + "walking/" + start[0] + "," + start[1] + ";" + end[0] + "," + end[1] + "?alternatives=true&geometries=geojson&steps=true&access_token=" + mapboxToken;
 
       var req = new XMLHttpRequest();
       req.open('GET', url, true);
@@ -77,6 +79,7 @@ export default class MapGL extends React.Component{
         route.map((pos) => pathCopy.push(pos))
         pathCopy.push(end)
         this.setState({path: pathCopy})
+        this.getDistance()
       };
       req.send();
     }
@@ -104,7 +107,6 @@ export default class MapGL extends React.Component{
             mapStyle="mapbox://styles/mapbox/streets-v11"
             onClick={this.addMarker}
           >
-
           {/*
           <Source id="my-data" type="geojson" data={this.geojson}>
             <Layer

src/Mapbox.js → src/maps/Mapbox.js

@@ -5,10 +5,10 @@ import ReactMapboxGl, {
     ZoomControl,
     ScaleControl,
     RotationControl,
-} from 'react-mapbox-gl';
-import mapboxToken from './config/mapboxToken.js';
-import {calcDistance} from './helpers/distance';
-import {longitude, latitude, mapWidth, mapHeight} from "./config/variables";
+} from "react-mapbox-gl";
+import mapboxToken from "./../config/mapboxToken.js";
+import {calcDistance} from "./../helpers/distance";
+import {longitude, latitude, mapWidth, mapHeight} from "./../config/variables";
 import {Button} from "reactstrap";
 
 const Map = ReactMapboxGl({ accessToken: mapboxToken });
@@ -53,7 +53,6 @@ export default class Mapbox extends React.Component{
   }
 
   render() {
-    const position = [this.state.longitude, this.state.latitude]
     return (
       <div>
         <div className="map">

src/Pigeon.js → src/maps/Pigeon.js

@@ -2,7 +2,7 @@ import React from "react";
 import Map from "pigeon-maps";
 import Marker from "pigeon-marker";
 import Overlay from "pigeon-overlay";
-import {longitude, latitude, mapWidth, mapHeight} from "./config/variables";
+import {longitude, latitude, mapWidth, mapHeight} from "./../config/variables";
 import {Button} from "reactstrap";
 
 export default class Pigeon extends React.Component{
@@ -34,7 +34,7 @@ export default class Pigeon extends React.Component{
   addMarker = (event) => {
     const lat = event.latLng[0]
     const lng = event.latLng[1]
-    console.log("Clicked at", lat, "/", lng, event)
+    console.log("Clicked at", lat, "/", lng)
     let pathCopy = this.props.mapConfig.path.slice();
     pathCopy.push([lat, lng]);
     this.props.updateMapState("path", pathCopy)

src/path.json

@@ -1,11 +0,0 @@
-{
-  "path": [
-    [48.336950, 14.320570],
-    [48.328529, 14.322428],
-    [48.295742, 14.286967],
-    [48.33700859582575, 14.32284576818347],
-    [48.33498697606996, 14.320232290774586],
-    [48.33531639601211, 14.31291472166777]
-  ]
-
-}

src/test/Googles.js

@@ -1,7 +1,7 @@
 import React, {Profiler} from "react";
-import Google from "./../Google";
+import Google from "./../maps/Google";
 import {measureTime} from './../helpers/measureTime';
-                                  
+
 export default class Googles extends React.Component{
   constructor(props) {
     super(props)
@@ -14,11 +14,11 @@ export default class Googles extends React.Component{
         <div ref={this.metricsRef} className="mapTime" >
         </div>
         <Profiler id="google" onRender={measureTime(this)}>
-          { Array.from({length:30}, (_, index) => 
+          { Array.from({length:30}, (_, index) =>
               <Google key={index}/>
           )}
         </Profiler>
       </div>
     );
   }
-} 
+}

src/test/Leaflets.js

@@ -1,7 +1,7 @@
 import React, {Profiler} from "react";
-import Leaflet from "./../Leaflet";
+import Leaflet from "./../maps/Leaflet";
 import {measureTime} from './../helpers/measureTime';
-                                  
+
 export default class Leaflets extends React.Component{
   constructor(props) {
     super(props)
@@ -14,11 +14,11 @@ export default class Leaflets extends React.Component{
         <div ref={this.metricsRef} className="mapTime" >
         </div>
         <Profiler id="leaflet" onRender={measureTime(this)}>
-          { Array.from({length:30}, (_, index) => 
+          { Array.from({length:30}, (_, index) =>
               <Leaflet key={index}/>
           )}
         </Profiler>
       </div>
     );
   }
-} 
+}

src/test/MapGLs.js

@@ -1,5 +1,5 @@
 import React, {Profiler} from "react";
-import MapGL from "./../MapGL";
+import MapGL from "./../maps/MapGL";
 import {measureTime} from './../helpers/measureTime';
 
 
@@ -15,11 +15,11 @@ export default class MapGLs extends React.Component{
         <div ref={this.metricsRef} className="mapTime" >
         </div>
         <Profiler id="mapgl" onRender={measureTime(this)}>
-          { Array.from({length:30}, (_, index) => 
+          { Array.from({length:30}, (_, index) =>
               <MapGL key={index} />
           )}
         </Profiler>
       </div>
     );
   }
-} 
+}

src/test/Mapboxes.js

@@ -1,7 +1,7 @@
 import React, {Profiler} from "react";
-import Mapbox from "./../Mapbox";
+import Mapbox from "./../maps/Mapbox";
 import {measureTime} from './../helpers/measureTime';
-                                  
+
 export default class MapGLs extends React.Component{
   constructor(props) {
     super(props)
@@ -14,11 +14,11 @@ export default class MapGLs extends React.Component{
         <div ref={this.metricsRef} className="mapTime" >
         </div>
         <Profiler id="mapbox" onRender={measureTime(this)}>
-          { Array.from({length:30}, (_, index) => 
+          { Array.from({length:30}, (_, index) =>
               <Mapbox key={index}/>
           )}
         </Profiler>
       </div>
     );
   }
-} 
+}

src/test/Pigeons.js

@@ -1,11 +1,11 @@
 import React, {Profiler} from "react";
-import Pigeon from "./../Pigeon";
+import Pigeon from "./../maps/Pigeon";
 
 import {calcDistance} from './../helpers/distance';
 import {measureTime} from './../helpers/measureTime';
 import {longitude, latitude, mapWidth, mapHeight} from "./../config/variables";
 
-                                  
+
 export default class Pigeons extends React.Component{
   constructor(props) {
     super(props)
@@ -53,4 +53,4 @@ export default class Pigeons extends React.Component{
       </div>
     );
   }
-} 
+}