From 77efbaec2eede5a5fd589dffc6c13948af3eb73e Mon Sep 17 00:00:00 2001
From: Jussi Surma-Aho <L4929@student.jamk.fi>
Date: Mon, 8 Jul 2019 15:25:35 +0300
Subject: [PATCH] Get player locations from database. Currently only get them
once
---
src/components/Player.js | 85 +++++++++++++++++++++++++++++++++++++++
src/components/UserMap.js | 3 +-
2 files changed, 87 insertions(+), 1 deletion(-)
create mode 100644 src/components/Player.js
diff --git a/src/components/Player.js b/src/components/Player.js
new file mode 100644
index 0000000..c64884b
--- /dev/null
+++ b/src/components/Player.js
@@ -0,0 +1,85 @@
+import React, { Component } from "react";
+import { Marker, Popup } from "react-leaflet";
+
+class Player extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ players: null
+ };
+ }
+
+ getPlayers() {
+ fetch(
+ "http://localhost:5000/tracking/players/" + this.props.currentGameId,
+ {
+ method: "GET",
+ headers: {
+ Authorization: "Bearer " + sessionStorage.getItem("token")
+ }
+ }
+ )
+ .then(res => res.json()) // no brackets over res.json() or it breaks (what)
+ .then(data => {
+ // don't do anything if data is not an array, as it breaks the map function at render
+ if (Array.isArray(data)) {
+ this.setState({
+ players: data
+ });
+ }
+ })
+ .catch(error => {
+ console.log(error);
+ });
+ }
+
+ shouldComponentUpdate(nextProps, nextState) {
+ // do not update component until players have been fetched and game ID is available
+ if (this.state.players === null) {
+ this.getPlayers();
+ return false;
+ } else if (this.props.currentGameId === null) {
+ return false;
+ } else {
+ return true;
+ }
+ }
+
+ componentDidUpdate() {
+ // check if game ID has changed
+ if (this.state.currentGameId !== this.props.currentGameId) {
+ this.setState({
+ currentGameId: this.props.currentGameId
+ });
+ }
+ }
+
+ render() {
+ return (
+ <div>
+ {this.state.players !== null &&
+ this.state.players.map(player => {
+ return (
+ <Marker
+ key={Math.random()}
+ position={player.coordinates}
+ factionId={player.factionId}
+ gamepersonId={player.gamepersonId}
+ gamepersonRole={player.gamepersonRole}
+ >
+ <Popup>
+ <b>factionId:</b> {player.factionId}
+ <br />
+ <b>gamepersonId:</b> {player.gamepersonId}
+ <br />
+ <b>gamepersonRole:</b> {player.gamepersonRole}
+ </Popup>
+ </Marker>
+ );
+ })}
+ </div>
+ );
+ }
+}
+
+export default Player;
diff --git a/src/components/UserMap.js b/src/components/UserMap.js
index ad20ffd..22dbbb6 100644
--- a/src/components/UserMap.js
+++ b/src/components/UserMap.js
@@ -1,6 +1,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";
class UserMap extends Component {
constructor(props) {
@@ -111,7 +112,6 @@ class UserMap extends Component {
.catch(error => {
console.log(error);
});
- console.log(this.state.geoJSONLayer);
}
componentWillUnmount() {
@@ -190,6 +190,7 @@ class UserMap extends Component {
</Popup>
</Marker>
)}
+ <Player currentGameId={this.state.currentGameId} />
</Map>
);
}
--
GitLab