diff --git a/package-lock.json b/package-lock.json
index 8f7924a3edfe602abb502ac9405bbc3eccd5021f..20bb4dc0006f1c75b29971a790f2075f1168e742 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1310,20 +1310,6 @@
"@babel/types": "^7.3.0"
}
},
- "@types/cookie": {
- "version": "0.3.3",
- "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
- "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
- },
- "@types/hoist-non-react-statics": {
- "version": "3.3.1",
- "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
- "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
- "requires": {
- "@types/react": "*",
- "hoist-non-react-statics": "^3.3.0"
- }
- },
"@types/istanbul-lib-coverage": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz",
@@ -1351,30 +1337,11 @@
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.0.3.tgz",
"integrity": "sha512-zkOxCS/fA+3SsdA+9Yun0iANxzhQRiNwTvJSr6N95JhuJ/x27z9G2URx1Jpt3zYFfCGUXZGL5UDxt5eyLE7wgw=="
},
- "@types/object-assign": {
- "version": "4.0.30",
- "resolved": "https://registry.npmjs.org/@types/object-assign/-/object-assign-4.0.30.tgz",
- "integrity": "sha1-iUk3HVqZ9Dge4PHfCpt6GH4H5lI="
- },
- "@types/prop-types": {
- "version": "15.7.1",
- "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.1.tgz",
- "integrity": "sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg=="
- },
"@types/q": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
"integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw=="
},
- "@types/react": {
- "version": "16.8.19",
- "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.19.tgz",
- "integrity": "sha512-QzEzjrd1zFzY9cDlbIiFvdr+YUmefuuRYrPxmkwG0UQv5XF35gFIi7a95m1bNVcFU0VimxSZ5QVGSiBmlggQXQ==",
- "requires": {
- "@types/prop-types": "*",
- "csstype": "^2.2.0"
- }
- },
"@types/stack-utils": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -3975,11 +3942,6 @@
"cssom": "0.3.x"
}
},
- "csstype": {
- "version": "2.6.5",
- "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.5.tgz",
- "integrity": "sha512-JsTaiksRsel5n7XwqPAfB0l3TFKdpjW/kgAELf9vrb5adGA7UCPLajKK5s3nFrcFm3Rkyp/Qkgl73ENc1UY3cA=="
- },
"cyclist": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
@@ -10243,16 +10205,6 @@
"whatwg-fetch": "3.0.0"
}
},
- "react-cookie": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.0.0.tgz",
- "integrity": "sha512-om/HB4MBHt4k+moR8Mb5h1kmKxcmOxK2U6aaQZ8Y+f+igICcE5bpng7yCiAo3kKN0btFpzvQ70XnpONOC0xkdA==",
- "requires": {
- "@types/hoist-non-react-statics": "^3.0.1",
- "hoist-non-react-statics": "^3.0.0",
- "universal-cookie": "^4.0.0"
- }
- },
"react-dev-utils": {
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-9.0.1.tgz",
@@ -12237,24 +12189,6 @@
"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz",
"integrity": "sha512-pNCVrk64LZv1kElr0N1wPiHEUoXNVFERp+mlTg/s9R5Lwg87f9bM/3sQB99w+N9D/qnM9ar3+AKDBwo/gm/iQQ=="
},
- "universal-cookie": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.0.tgz",
- "integrity": "sha512-6JVx+3oGPjslGqFhQ8YSIBHmYTx8HbyAEH++2/b6SKNXsbsdQ7lU7wRG2bYcRB5JVCz8GYgQ+Ixew91hn3Dy9w==",
- "requires": {
- "@types/cookie": "^0.3.1",
- "@types/object-assign": "^4.0.30",
- "cookie": "^0.3.1",
- "object-assign": "^4.1.0"
- },
- "dependencies": {
- "cookie": {
- "version": "0.3.1",
- "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
- "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s="
- }
- }
- },
"universalify": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
diff --git a/package.json b/package.json
index 556d3841b5f688ec81c09e3fe8ef76a82089fbf5..e0d4ca6c3da884a7836143ef2e4ca5774ee26498 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
"react-leaflet": "^2.3.0",
"react-leaflet-draw": "0.19.0",
"react-scripts": "3.0.1",
- "socket.io": "^2.2.0"
+ "socket.io": "^2.2.0",
+ "socket.io-client": "^2.2.0"
},
"scripts": {
"start": "react-scripts start",
diff --git a/src/App.js b/src/App.js
index fa03299e1e2279cfcb67c7efc00e4f31fc9de05b..a0b97ff4e67562e60733559a7a6bea176e017975 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,11 +15,13 @@ class App extends Component {
lng: 25.7597186,
zoom: 13,
mapUrl: "https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg",
- currentGameId: null
+ 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 = () => {
@@ -43,6 +45,19 @@ class App extends Component {
});
};
+ getSocketSignal = type => {
+ this.setState(
+ {
+ socketSignal: type
+ },
+ () => {
+ this.setState({
+ socketSignal: null
+ });
+ }
+ );
+ };
+
render() {
const initialPosition = [this.state.lat, this.state.lng];
return (
@@ -52,15 +67,17 @@ class App extends Component {
zoom={this.state.zoom}
mapUrl={this.state.mapUrl}
currentGameId={this.state.currentGameId}
+ socketSignal={this.state.socketSignal}
/>
- ,
<Header
handleLayerChange={this.handleLayerChange}
handleGameChange={this.handleGameChange}
/>
- ,
{this.state.currentGameId && (
- <ClientSocket gameId={this.state.currentGameId} />
+ <ClientSocket
+ gameId={this.state.currentGameId}
+ getSocketSignal={this.getSocketSignal}
+ />
)}
</div>
);
diff --git a/src/components/GameList.js b/src/components/GameList.js
index 3a3724d68893ad8a1266fdb3f2391b11fdb6c27f..9a56d3626985c58608d92bbcde2b28720829a536 100644
--- a/src/components/GameList.js
+++ b/src/components/GameList.js
@@ -36,7 +36,7 @@ class GameList extends React.Component {
? games[0].id
: undefined
});
- // taking the initialized gameID to UserMap.js (GameList.js -> Header.js -> App.js -> UserMap.js)
+ // taking the initialized gameID to App.js (GameList.js -> GameSidebar.js -> Header.js -> App.js)
this.props.handleGameChange(games[0].id);
})
.catch(error => {
@@ -45,15 +45,11 @@ class GameList extends React.Component {
}
handleChange = e => {
- this.setState(
- {
- selectedGame: e.target.value
- },
- () => {
- // taking the changed gameID to UserMap.js (GameList.js -> Header.js -> App.js -> UserMap.js)
- this.props.handleGameChange(this.state.selectedGame);
- }
- );
+ this.setState({
+ selectedGame: e.target.value
+ });
+ // taking the changed gameID to App.js (GameList.js -> GameSidebar.js -> Header.js -> App.js)
+ this.props.handleGameChange(e.target.value);
};
handleEditClick = e => {
diff --git a/src/components/GameSidebar.js b/src/components/GameSidebar.js
index 0511cdc3e9762a1e027a7f180ff8112289e5d311..5d4bad34caef03d5895ceb3d62167a553d6676b4 100644
--- a/src/components/GameSidebar.js
+++ b/src/components/GameSidebar.js
@@ -16,7 +16,7 @@ export default class GameSidebar extends React.Component {
render() {
return (
<div className="game-sidebar">
- <GameList />
+ <GameList handleGameChange={this.props.handleGameChange} />
{this.props.loggedIn && (
<button id="newGameButton" onClick={() => this.toggleView("newgame")}>
New Game
diff --git a/src/components/Header.js b/src/components/Header.js
index d83e7aad5577a9a9a8537e8b11a2c8a4a93b929c..1faedbbcd01873cc0179bfe91c29e38d3ab50b0f 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -100,7 +100,10 @@ class Header extends React.Component {
Tools
</button>
{this.state.sidebar && (
- <GameSidebar loggedIn={this.state.username ? true : false} />
+ <GameSidebar
+ loggedIn={this.state.username ? true : false}
+ handleGameChange={this.props.handleGameChange}
+ />
)}
</div>
{this.state.form === "register" && (
diff --git a/src/components/Socket.js b/src/components/Socket.js
index bff5bcd965198723aef1c444cbd65e071f268866..785b824096975397469809aca49ab0367731a405 100644
--- a/src/components/Socket.js
+++ b/src/components/Socket.js
@@ -2,6 +2,7 @@ import React from "react";
import io from "socket.io-client";
const socketUrl = process.env.REACT_APP_API_URL;
+
export default class ClientSocket extends React.Component {
constructor(props) {
super(props);
@@ -14,29 +15,44 @@ export default class ClientSocket extends React.Component {
};
}
- // iniate the socket on component mount
+ // initiate the socket on component mount
componentWillMount() {
- console.log("iniated socket");
+ console.log("hi socket");
+ if (this.props.gameId !== null) {
+ this.props.getSocketSignal("drawing-update");
+ }
this.initSocket();
}
+ shouldComponentUpdate(nextProps, nextState) {
+ if (nextProps !== this.props) {
+ this.initSocket();
+ return true;
+ } else {
+ return false;
+ }
+ }
+
// disconnect the socket on component dismount
componentWillUnmount() {
+ console.log("bye socket");
this.state.sock.disconnect();
}
initSocket = () => {
const socket = io(socketUrl);
+
// set the socket to listen gameId-thread
socket.on(this.props.gameId, data => {
+ this.props.getSocketSignal(data.type);
// check socket update type
this.setState({ update: data });
- console.log(this.state.update);
});
+
this.setState({ sock: socket });
};
render() {
- return null;
+ return this.state.update;
}
}
diff --git a/src/components/UserMap.js b/src/components/UserMap.js
index d1e3f86927e264a3e337574b29597eaa0941b744..34313b7fdf5e26836638eae35276f3ba3be2e076 100644
--- a/src/components/UserMap.js
+++ b/src/components/UserMap.js
@@ -2,6 +2,7 @@ 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) {
@@ -19,6 +20,7 @@ class UserMap extends Component {
};
this.sendGeoJSON = this.sendGeoJSON.bind(this);
+ this.fetchGeoJSON = this.fetchGeoJSON.bind(this);
this.setCurrentPosition = this.setCurrentPosition.bind(this);
this.watchPositionId = null;
}
@@ -29,14 +31,11 @@ class UserMap extends Component {
});
}
- componentDidUpdate() {
- // check if game ID has changed and fetch that game's drawings
- if (this.state.currentGameId !== this.props.currentGameId) {
- this.setState({
- currentGameId: this.props.currentGameId
- });
+ shouldComponentUpdate(nextProps, nextState) {
+ if (nextProps.socketSignal === "drawing-update") {
this.fetchGeoJSON();
}
+ return true;
}
// Sends the players drawings to the backend (and database)