Merge from 49-seurattavien-pelaajien-piirtaminen-karttaan

src/components/DrawTools.js

@@ -252,14 +252,14 @@ class DrawTools extends Component {
           onDeleteStop={this._onEditDeleteStop}
           draw={{
             circle: {
-              repeatMode: true, // allows using the tool again after finishing the previous shape
+              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: true
+              repeatMode: false
             },
             polygon: {
               repeatMode: true,

src/components/LoginForm.js

-import React from 'react';
+import React from "react";
 
 export class LoginForm extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      errorMsg: '',
-      username: '',
-      password: ''
+      errorMsg: "",
+      username: "",
+      password: ""
     };
   }
 
@@ -38,11 +38,11 @@ export class LoginForm extends React.Component {
     e.preventDefault();
 
     // Send login info to the server
-    fetch(`${process.env.REACT_APP_API_URL}/user/login`, {
-      method: 'POST',
+    fetch(`http://localhost:5000/user/login`, {
+      method: "POST",
       headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
+        Accept: "application/json",
+        "Content-Type": "application/json"
       },
       body: JSON.stringify({
         name: name,
@@ -69,47 +69,47 @@ export class LoginForm extends React.Component {
   };
 
   componentDidMount() {
-    document.addEventListener('keyup', this.handleEsc);
+    document.addEventListener("keyup", this.handleEsc);
   }
 
   componentWillUnmount() {
-    document.removeEventListener('keyup', this.handleEsc);
+    document.removeEventListener("keyup", this.handleEsc);
   }
 
   render() {
     return (
-      <div className='fade-main'>
-        <div className='sticky'>
+      <div className="fade-main">
+        <div className="sticky">
           <span
-            id='closeLoginFormX'
-            className='close'
+            id="closeLoginFormX"
+            className="close"
             onClick={this.handleView}
           >
             ×
           </span>
         </div>
-        <div className='login'>
+        <div className="login">
           <form onSubmit={this.handleLogin}>
             <h1>demo login</h1>
             <br />
             <input
-              placeholder='Enter Username'
-              name='username'
+              placeholder="Enter Username"
+              name="username"
               value={this.state.username}
               onChange={this.handleChange}
-              id='loginUsernameInput'
+              id="loginUsernameInput"
             />
             <br />
             <input
-              placeholder='Enter password'
-              type='password'
-              name='password'
+              placeholder="Enter password"
+              type="password"
+              name="password"
               value={this.state.password}
               onChange={this.handleChange}
-              id='loginPasswordInput'
+              id="loginPasswordInput"
             />
             <br />
-            <button id='submitLoginButton' type='submit'>
+            <button id="submitLoginButton" type="submit">
               login
             </button>
             <h2>{this.state.errorMsg}</h2>

src/components/Player.js

+import React, { Component } from "react";
+import { Marker, Popup } from "react-leaflet";
+
+class Player extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      players: null,
+      time: Date.now()
+    };
+  }
+
+  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);
+      });
+  }
+
+  componentDidMount() {
+    // update components every 10 seconds
+    this.interval = setInterval(
+      () => this.setState({ time: Date.now() }),
+      10000
+    );
+  }
+
+  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
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  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;

src/components/RegisterForm.js

-import React from 'react';
+import React from "react";
 
 export class RegisterForm extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      errorMsg: '',
-      username: '',
-      password: '',
-      password2: ''
+      errorMsg: "",
+      username: "",
+      password: "",
+      password2: ""
     };
   }
 
@@ -41,14 +41,14 @@ export class RegisterForm extends React.Component {
     e.preventDefault();
 
     if (this.state.password !== this.state.password2) {
-      this.handleError('Passwords do not match');
+      this.handleError("Passwords do not match");
     } else {
       // Send register info to the server
-      fetch('http://localhost:5000/user/register', {
-        method: 'POST',
+      fetch("http://localhost:5000/user/register", {
+        method: "POST",
         headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
+          Accept: "application/json",
+          "Content-Type": "application/json"
         },
         body: JSON.stringify({
           name: name,
@@ -76,28 +76,28 @@ export class RegisterForm extends React.Component {
   };
 
   componentDidMount() {
-    document.addEventListener('keyup', this.handleEsc);
+    document.addEventListener("keyup", this.handleEsc);
   }
 
   componentWillUnmount() {
-    document.removeEventListener('keyup', this.handleEsc);
+    document.removeEventListener("keyup", this.handleEsc);
   }
 
   render() {
     return (
-      <div className='fade-main'>
-        <div className='sticky'>
-          <span className='close' onClick={this.handleView}>
+      <div className="fade-main">
+        <div className="sticky">
+          <span className="close" onClick={this.handleView}>
             ×
           </span>
         </div>
-        <div className='login'>
+        <div className="login">
           <form onSubmit={this.handleRegister}>
             <h1>register new user</h1>
             <br />
             <input
-              placeholder='Enter Username'
-              name='username'
+              placeholder="Enter Username"
+              name="username"
               value={this.state.username}
               onChange={this.handleChange}
               autoFocus
@@ -105,24 +105,24 @@ export class RegisterForm extends React.Component {
             />
             <br />
             <input
-              placeholder='Enter password'
-              type='password'
-              name='password'
+              placeholder="Enter password"
+              type="password"
+              name="password"
               value={this.state.password}
               onChange={this.handleChange}
               required
             />
             <br />
             <input
-              placeholder='Verify password'
-              type='password'
-              name='password2'
+              placeholder="Verify password"
+              type="password"
+              name="password2"
               value={this.state.password2}
               onChange={this.handleChange}
               required
             />
             <br />
-            <button type='submit'>register</button>
+            <button type="submit">register</button>
             <h2>{this.state.errorMsg}</h2>
           </form>
         </div>

src/components/UserMap.js

 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>
     );
   }