Map drawings fixed so it works with roles

src/components/DrawTools.js

@@ -246,51 +246,54 @@ class DrawTools extends Component {
       // The elements you draw will be added to this FeatureGroup layer,
       // when you hit edit button only items in this layer will be edited."
       <FeatureGroup>
-        <EditControl
-          position="topright"
-          onCreated={this._onCreated}
-          onEdited={this._onEdited}
-          onEditStart={this._onEditDeleteStart}
-          onEditStop={this._onEditDeleteStop}
-          onDeleted={this._onDeleted}
-          onDeleteStart={this._onEditDeleteStart}
-          onDeleteStop={this._onEditDeleteStop}
-          draw={{
-            circle: {
-              repeatMode: false, // allows using the tool again after finishing the previous shape
-              shapeOptions: {
-                color: "#f9f10c",
-                opacity: 1 // affects the outline only. for some reason it wasn't at full opacity, so this is needed for more clarity
-              }
-            },
-            rectangle: {
-              repeatMode: false
-            },
-            polygon: {
-              repeatMode: true,
-              allowIntersection: false, // Restricts shapes to simple polygons
-              drawError: {
-                color: "#e1e100", // Color the shape will turn when intersects
-                message: "<strong>Oh snap!<strong> you can't draw that!" // Message that will show when intersect
+        {(this.props.role === "admin" ||
+          this.props.role === "factionleader") && (
+          <EditControl
+            position="topright"
+            onCreated={this._onCreated}
+            onEdited={this._onEdited}
+            onEditStart={this._onEditDeleteStart}
+            onEditStop={this._onEditDeleteStop}
+            onDeleted={this._onDeleted}
+            onDeleteStart={this._onEditDeleteStart}
+            onDeleteStop={this._onEditDeleteStop}
+            draw={{
+              circle: {
+                repeatMode: false, // allows using the tool again after finishing the previous shape
+                shapeOptions: {
+                  color: "#f9f10c",
+                  opacity: 1 // affects the outline only. for some reason it wasn't at full opacity, so this is needed for more clarity
+                }
               },
-              shapeOptions: {
-                color: "#ed2572",
-                opacity: 1
-              }
-            },
-            polyline: {
-              repeatMode: true,
-              shapeOptions: {
-                color: "#ed2572",
-                opacity: 1
-              }
-            },
-            marker: {
-              repeatMode: false
-            },
-            circlemarker: false
-          }}
-        />
+              rectangle: {
+                repeatMode: false
+              },
+              polygon: {
+                repeatMode: true,
+                allowIntersection: false, // Restricts shapes to simple polygons
+                drawError: {
+                  color: "#e1e100", // Color the shape will turn when intersects
+                  message: "<strong>Oh snap!<strong> you can't draw that!" // Message that will show when intersect
+                },
+                shapeOptions: {
+                  color: "#ed2572",
+                  opacity: 1
+                }
+              },
+              polyline: {
+                repeatMode: true,
+                shapeOptions: {
+                  color: "#ed2572",
+                  opacity: 1
+                }
+              },
+              marker: {
+                repeatMode: false
+              },
+              circlemarker: false
+            }}
+          />
+        )}
 
         {/* iterate through every element fetched from back-end */}
         {this.props.geoJSONLayer.features.map(feature => {

src/components/GameView.js

@@ -98,7 +98,7 @@ export default class GameView extends React.Component {
   getSocketSignal = data => {
     this.setState(
       {
-        socketSignal: data
+        socketSignal: data // TODO: change to data
       },
       () => {
         this.setState({

src/components/Socket.js

@@ -17,7 +17,7 @@ export default class ClientSocket extends React.Component {
 
   // initiate the socket on component mount
   async componentWillMount() {
-    // console.log("hi socket");
+    console.log("hi socket");
     // need to explicitly update drawings and trackings when gameID first becomes available
     if (this.props.gameId !== null) {
       await this.props.getSocketSignal("drawing-update");
@@ -47,9 +47,10 @@ export default class ClientSocket extends React.Component {
 
     // set the socket to listen gameId-thread
     socket.on(this.props.gameId, data => {
-      this.props.getSocketSignal(data);
+      console.log(data.type);
+      this.props.getSocketSignal(data.type);
       // check socket update type
-      this.setState({ update: data.type });
+      this.setState({ update: data });
     });
 
     this.props.onSocketChange(socket);
@@ -57,7 +58,6 @@ export default class ClientSocket extends React.Component {
   };
 
   render() {
-    //TODO: return needed?
     return this.state.update;
   }
 }

src/components/UserMap.js

@@ -39,6 +39,7 @@ class UserMap extends Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
+    console.log(prevProps.socketSignal);
     if (prevProps.socketSignal === "drawing-update") {
       this.fetchGeoJSON();
     }
@@ -162,15 +163,15 @@ class UserMap extends Component {
           url={this.props.mapUrl}
         />
         <ZoomControl position="topright" />
-        {(this.props.role === "admin" ||
-          this.props.role === "factionleader") && (
-          <DrawTools
-            position={this.props.position}
-            sendGeoJSON={this.sendGeoJSON}
-            geoJSONLayer={this.state.geoJSONLayer}
-            currentGameId={this.props.currentGameId}
-          />
-        )}
+
+        <DrawTools
+          position={this.props.position}
+          sendGeoJSON={this.sendGeoJSON}
+          geoJSONLayer={this.state.geoJSONLayer}
+          currentGameId={this.props.currentGameId}
+          role={this.props.role}
+        />
+
         {this.state.ownLat !== null && (
           <Marker position={[this.state.ownLat, this.state.ownLng]}>
             <Popup>