diff --git a/src/App.js b/src/App.js index a0b97ff4e67562e60733559a7a6bea176e017975..b01a8323737396d82886db917874eb3fab2093d4 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 785b824096975397469809aca49ab0367731a405..34f31584310dfd32d5b73cd960fa7e1f82d8032c 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 34313b7fdf5e26836638eae35276f3ba3be2e076..19ab74b83ce5b5f0f7c29df62f127b547872024a 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