From 4bd085ecf70e31bf201af9240798a6c069bfca4c Mon Sep 17 00:00:00 2001
From: Jussi Surma-Aho <L4929@student.jamk.fi>
Date: Fri, 12 Jul 2019 10:11:21 +0300
Subject: [PATCH] Can add, edit and delete drawings without issue and they show
up in other browser. Also fixed the bug where deleting or editing one element
didn't register to the drawer.
---
src/App.js | 6 ++----
src/components/Socket.js | 5 +++--
src/components/UserMap.js | 4 ----
3 files changed, 5 insertions(+), 10 deletions(-)
diff --git a/src/App.js b/src/App.js
index a0b97ff..b01a832 100644
--- a/src/App.js
+++ b/src/App.js
@@ -18,10 +18,6 @@ class App extends Component {
currentGameId: null,
socketSignal: null
};
-
- this.handleLayerChange = this.handleLayerChange.bind(this);
- this.handleGameChange = this.handleGameChange.bind(this);
- this.getSocketSignal = this.getSocketSignal.bind(this);
}
// Toggles through the list and changes the mapUrl state
handleLayerChange = () => {
@@ -45,6 +41,8 @@ class App extends Component {
});
};
+ // setting the socket signal automatically fires shouldComponentUpdate function where socketSignal prop is present
+ // setting socketSignal to null immediately after to avoid multiple database fetches
getSocketSignal = type => {
this.setState(
{
diff --git a/src/components/Socket.js b/src/components/Socket.js
index 785b824..34f3158 100644
--- a/src/components/Socket.js
+++ b/src/components/Socket.js
@@ -25,7 +25,8 @@ export default class ClientSocket extends React.Component {
}
shouldComponentUpdate(nextProps, nextState) {
- if (nextProps !== this.props) {
+ // re-initialize socket when gameId has changed
+ if (nextProps.gameId !== this.props.gameId) {
this.initSocket();
return true;
} else {
@@ -46,7 +47,7 @@ export default class ClientSocket extends React.Component {
socket.on(this.props.gameId, data => {
this.props.getSocketSignal(data.type);
// check socket update type
- this.setState({ update: data });
+ this.setState({ update: data.type });
});
this.setState({ sock: socket });
diff --git a/src/components/UserMap.js b/src/components/UserMap.js
index 34313b7..19ab74b 100644
--- a/src/components/UserMap.js
+++ b/src/components/UserMap.js
@@ -2,7 +2,6 @@ import React, { Component } from "react";
import { Map, TileLayer, ZoomControl, Marker, Popup } from "react-leaflet";
import DrawTools from "./DrawTools.js";
import Player from "./Player.js";
-import { fetchGeoJSON } from "./fetchGeoJSON.js";
class UserMap extends Component {
constructor(props) {
@@ -83,9 +82,6 @@ class UserMap extends Component {
}
);
}
-
- // get the layers again to stop updating with old objects
- this.fetchGeoJSON();
}
// Get the drawings from the backend and add them to the state, so they can be drawn
--
GitLab