Able to edit objects and draw more objects without things breaking. Ready to...

Able to edit objects and draw more objects without things breaking. Ready to send edited objects to back-end once they're ready

src/components/DrawTools.js

 import React, { Component } from "react";
 import { EditControl } from "react-leaflet-draw";
-import {
-  FeatureGroup,
-  GeoJSON,
-  Marker,
-  Polygon,
-  Polyline
-} from "react-leaflet";
-import L from "leaflet";
+import { FeatureGroup, Marker, Polygon, Polyline } from "react-leaflet";
 
 class DrawTools extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      geoJSONAll: [] // property for all GeoJSON data in the map
+      geoJSONAll: [], // property for all GeoJSON data in the map
+      editModeActive: false
     };
   }
 
@@ -23,41 +17,71 @@ class DrawTools extends Component {
     this.makeGeoJSON(e.layer);
   };
 
+  _onEditMove = e => {
+    console.log("_onEditMove e:");
+    console.log(e);
+    // to be added once back-end has functionality to recognize ids
+    // this.props.sendGeoJSON(e.layer);
+  };
+
+  _onEditResize = e => {
+    console.log("_onEditResize e:");
+    console.log(e);
+  };
+
+  _onEditVertex = e => {
+    console.log("_onEditVertex e:");
+    console.log(e);
+    // to be added once back-end has functionality to recognize ids
+    // this.props.sendGeoJSON(e.poly);
+  };
+
+  _onEditStart = () => {
+    this.setState({ editModeActive: true });
+  };
+
+  _onEditStop = () => {
+    this.setState({ editModeActive: false });
+  };
+
+  shouldComponentUpdate() {
+    // disable re-rendering when edit mode is active
+    return !this.state.editModeActive;
+  }
+
   // turn layer to GeoJSON data and add it to an array of all GeoJSON data of the current map
   makeGeoJSON = e => {
     let geoJSON = e.toGeoJSON();
-    //let newGeoJSONAll = this.state.geoJSONAll;
-    //newGeoJSONAll.push(geoJSON);
-    //this.setState({ geoJSONAll: newGeoJSONAll });
     console.log(
       "UserMapille lähetettävä layeri: " + JSON.stringify(geoJSON, null, 4)
     ); // printing GeoJSON data of the previous object create
-    // console.log("newGeoJSONAll.length: " + newGeoJSONAll.length);
-    this.props.addToGeojsonLayer(geoJSON);
+    this.props.sendGeoJSON(geoJSON);
   };
 
-  // generate random UUID for React Leaflet component keys
-  generateUUID() {
-    function s4() {
-      return Math.floor((1 + Math.random()) * 0x10000)
-        .toString(16)
-        .substring(1);
+  addFetchedLayerToMap = (id, feature) => {
+    if (feature.geometry.type === "Point") {
+      // GeoJSON saves latitude first, not longitude like usual. swapping
+      let position = [
+        feature.geometry.coordinates[1],
+        feature.geometry.coordinates[0]
+      ];
+      // keys are required to be able to edit
+      return <Marker key={Math.random()} position={position} id={id} />;
+    } else if (feature.geometry.type === "Polygon") {
+      // polygons have, for some reason, an extra single element array above other arrays. no other objects have this
+      let coords = feature.geometry.coordinates[0];
+      let positions = coords.map(item => {
+        return [item[1], item[0]];
+      });
+      return <Polygon key={Math.random()} positions={positions} id={id} />;
+    } else if (feature.geometry.type === "LineString") {
+      let coords = feature.geometry.coordinates;
+      let positions = coords.map(item => {
+        return [item[1], item[0]];
+      });
+      return <Polyline key={Math.random()} positions={positions} id={id} />;
     }
-    return (
-      s4() +
-      s4() +
-      "-" +
-      s4() +
-      "-" +
-      s4() +
-      "-" +
-      s4() +
-      "-" +
-      s4() +
-      s4() +
-      s4()
-    );
-  }
+  };
 
   render() {
     return (
@@ -68,6 +92,12 @@ class DrawTools extends Component {
         <EditControl
           position="topright"
           onCreated={this._onCreated}
+          onDrawStop={this._onDrawStop}
+          onEditStart={this._onEditStart}
+          onEditStop={this._onEditStop}
+          onEditMove={this._onEditMove}
+          onEditResize={this._onEditResize}
+          onEditVertex={this._onEditVertex}
           draw={{
             circle: {
               repeatMode: true, // allows using the tool again after finishing the previous shape
@@ -109,54 +139,14 @@ class DrawTools extends Component {
         />
 
         {/* iterate through every element fetched from back-end */}
-        {this.props.geoJSONLayer.features.map((ind, val) => {
-          // first element is empty... for some reason.
-          // should investigate further what is it
-          if (val === 0) {
-          } else if (ind.geometry.type === "Point") {
-            // GeoJSON saves latitude first, not longitude like usual. swapping
-            let position = [
-              ind.geometry.coordinates[1],
-              ind.geometry.coordinates[0]
-            ];
-            // keys are required to be able to edit
-            return <Marker key={this.generateUUID()} position={position} />;
-          } else if (ind.geometry.type === "Polygon") {
-            // polygons have, for some reason, an extra single element array above other arrays. no other objects have this
-            let coords = ind.geometry.coordinates[0];
-            let positions = [];
-            let position = [];
-            for (let i = 0; i < coords.length; i++) {
-              position = [coords[i][1], coords[i][0]];
-              positions.push(position);
-            }
-            return <Polygon key={this.generateUUID()} positions={positions} />;
-          } else if (ind.geometry.type === "LineString") {
-            let coords = ind.geometry.coordinates;
-            let positions = [];
-            for (let i = 0; i < coords.length; i++) {
-              positions.push([coords[i][1], coords[i][0]]);
-            }
-            return <Polyline key={this.generateUUID()} positions={positions} />;
+        {this.props.geoJSONLayer.features.map((feature, arrayIndex) => {
+          // first element in geoJSONLayer has an extra one element array for some reason
+          if (arrayIndex === 0) {
+            return this.addFetchedLayerToMap(feature[0], feature[1][0]);
+          } else {
+            return this.addFetchedLayerToMap(feature[0], feature[1]);
           }
         })}
-        {/*
-        <Polygon
-          key={this.generateUUID()}
-          positions={[
-            [62.25111, 25.804654],
-            [62.249894, 25.814211],
-            [62.24805, 25.811937],
-            [62.247963, 25.806458]
-          ]}
-        />
-        <Marker key={this.generateUUID()} position={[62.25111, 25.804654]} />
-        */}
-        {/*
-        <GeoJSON
-          key={JSON.stringify(this.props.geoJSONLayer)}
-          data={this.props.geoJSONLayer}
-        />*/}
       </FeatureGroup>
     );
   }

src/components/UserMap.js

 import React, { Component } from "react";
-import {
-  Map,
-  TileLayer,
-  ZoomControl,
-  Marker,
-  Popup,
-  GeoJSON
-} from "react-leaflet";
+import { Map, TileLayer, ZoomControl, Marker, Popup } from "react-leaflet";
 import DrawTools from "./DrawTools.js";
 
 class UserMap extends Component {
@@ -23,9 +16,8 @@ class UserMap extends Component {
       }
     };
 
-    this.addToGeojsonLayer = this.addToGeojsonLayer.bind(this);
+    this.sendGeoJSON = this.sendGeoJSON.bind(this);
     this.setCurrentPosition = this.setCurrentPosition.bind(this);
-    //this.setCurrentGeojson = this.setCurrentGeojson.bind(this);
     this.watchPositionId = null;
   }
 
@@ -37,9 +29,6 @@ class UserMap extends Component {
   }
   // Sends the players drawings to the backend (and database)
   sendGeoJSON(layerToDatabase) {
-    console.log(
-      "Lähetettävät jutut: " + JSON.stringify(this.state.geoJSONLayer)
-    );
     fetch("http://localhost:5000/mapmarkers/insert-location", {
       method: "PUT",
       headers: {
@@ -47,6 +36,7 @@ class UserMap extends Component {
         Accept: "application/json",
         "Content-Type": "application/json"
       },
+      // need to add id once back-end is ready for it
       body: JSON.stringify({
         type: "FeatureCollection",
         features: layerToDatabase
@@ -65,12 +55,10 @@ class UserMap extends Component {
     })
       .then(res => res.json())
       .then(data => {
-        console.log(data);
         let newFeatures = [];
         data.map(item => {
-          newFeatures.push(item.features);
+          newFeatures.push([item.id, item.features]);
         });
-        console.log("Mapataan featureita: ", newFeatures);
 
         this.setState({
           geoJSONLayer: {
@@ -78,8 +66,6 @@ class UserMap extends Component {
             features: [...newFeatures]
           }
         });
-        console.log("Geojsonlayer state fetchin jälkeen: ");
-        console.log(this.state.geoJSONLayer);
       });
   }
 
@@ -130,20 +116,6 @@ class UserMap extends Component {
     }
   }
 
-  // Function to be passed to DrawTools so it can add geojson data to this components state
-  addToGeojsonLayer(layerToAdd) {
-    this.setState(() => ({
-      geoJSONLayer: {
-        type: "FeatureCollection",
-        features: [...this.state.geoJSONLayer.features, layerToAdd]
-      }
-    }));
-    console.log(
-      "Geojsonlayer state: " + JSON.stringify(this.state.geoJSONLayer)
-    );
-    this.sendGeoJSON(layerToAdd);
-  }
-
   render() {
     return (
       <Map
@@ -176,10 +148,4 @@ class UserMap extends Component {
     );
   }
 }
-/*
-<GeoJSON
-key={JSON.stringify(this.state.geoJSONLayer)}
-data={this.state.geoJSONLayer}
-/>
-*/
 export default UserMap;