env update

.env.example

+REACT_APP_API_URL="http://localhost:5000"
\ No newline at end of file

src/components/EditGameForm.js

@@ -75,7 +75,7 @@ export class EditGameForm extends React.Component {
     let token = sessionStorage.getItem("token");
 
     // Send Game info to the server
-    fetch("http://localhost:5000/game/edit/" + this.props.gameId, {
+    fetch(`${process.env.REACT_APP_API_URL}/game/edit/${this.props.gameId}`, {
       method: "PUT",
       headers: {
         Authorization: "Bearer " + token,
@@ -102,7 +102,7 @@ export class EditGameForm extends React.Component {
   }
 
   getGameInfo(gameId) {
-    fetch("http://localhost:5000/game/" + gameId)
+    fetch(`${process.env.REACT_APP_API_URL}/game/${gameId}`)
       .then(response => response.json())
       .then(json => this.handleGameInfo(json))
       .catch(error => console.log(error));

src/components/GameList.js

@@ -18,7 +18,7 @@ class GameList extends React.Component {
   }
 
   getGames() {
-    fetch("http://localhost:5000/game/listgames")
+    fetch(`${process.env.REACT_APP_API_URL}/game/listgames`)
       .then(response => response.json())
       .then(games => {
         this.setState({

src/components/LoginForm.js

@@ -38,7 +38,7 @@ export class LoginForm extends React.Component {
     e.preventDefault();
 
     // Send login info to the server
-    fetch(`http://localhost:5000/user/login`, {
+    fetch(`${process.env.REACT_APP_API_URL}/user/login`, {
       method: "POST",
       headers: {
         Accept: "application/json",
@@ -98,6 +98,7 @@ export class LoginForm extends React.Component {
               value={this.state.username}
               onChange={this.handleChange}
               id="loginUsernameInput"
+              autofocus
             />
             <br />
             <input

src/components/NewGameForm.js

@@ -13,7 +13,6 @@ export class NewGameForm extends React.Component {
       startTime: "",
       endDate: "",
       endTime: "",
-      passwords: [],
       zoom: 13,
       mapCenter: {
         lat: 62.2416479,
@@ -68,7 +67,6 @@ export class NewGameForm extends React.Component {
       map: "",
       startdate: startDate,
       enddate: endDate,
-      passwords: [this.state.password],
       center: this.state.mapCenter
     };
 
@@ -77,7 +75,7 @@ export class NewGameForm extends React.Component {
     let token = sessionStorage.getItem("token");
 
     // Send Game info to the server
-    fetch("http://localhost:5000/game/new", {
+    fetch(`${process.env.REACT_APP_API_URL}/game/new`, {
       method: "POST",
       headers: {
         Authorization: "Bearer " + token,

src/components/Player.js

@@ -5,14 +5,15 @@ class Player extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      players: null,
-      time: Date.now()
+      players: null
     };
   }
 
   getPlayers() {
     fetch(
-      "http://localhost:5000/tracking/players/" + this.props.currentGameId,
+      `${process.env.REACT_APP_API_URL}/tracking/players/${
+        this.props.currentGameId
+      }`,
       {
         method: "GET",
         headers: {
@@ -36,10 +37,7 @@ class Player extends Component {
 
   componentDidMount() {
     // update components every 10 seconds
-    this.interval = setInterval(
-      () => this.setState({ time: Date.now() }),
-      10000
-    );
+    this.interval = setInterval(() => this.setState(this.getPlayers()), 5000);
   }
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -75,7 +73,7 @@ class Player extends Component {
             return (
               <Marker
                 key={Math.random()}
-                position={player.coordinates}
+                position={[player.coordinates.lat, player.coordinates.lng]}
                 factionId={player.factionId}
                 gamepersonId={player.gamepersonId}
                 gamepersonRole={player.gamepersonRole}

src/components/RegisterForm.js

@@ -44,7 +44,7 @@ export class RegisterForm extends React.Component {
       this.handleError("Passwords do not match");
     } else {
       // Send register info to the server
-      fetch("http://localhost:5000/user/register", {
+      fetch(`${process.env.REACT_APP_API_URL}/user/register`, {
         method: "POST",
         headers: {
           Accept: "application/json",
@@ -101,7 +101,7 @@ export class RegisterForm extends React.Component {
               value={this.state.username}
               onChange={this.handleChange}
               autoFocus
-              required
+              //required
             />
             <br />
             <input
@@ -110,7 +110,7 @@ export class RegisterForm extends React.Component {
               name="password"
               value={this.state.password}
               onChange={this.handleChange}
-              required
+              //required
             />
             <br />
             <input
@@ -119,7 +119,7 @@ export class RegisterForm extends React.Component {
               name="password2"
               value={this.state.password2}
               onChange={this.handleChange}
-              required
+              //required
             />
             <br />
             <button type="submit">register</button>

src/components/UserMap.js

@@ -45,7 +45,9 @@ class UserMap extends Component {
     // otherwise the fetch functions are the same in both if and else. any smarter way to do this?
     if (isDeleted === true) {
       fetch(
-        "http://localhost:5000/draw/mapdrawing/" + this.props.currentGameId,
+        `${process.env.REACT_APP_API_URL}/draw/mapdrawing/${
+          this.props.currentGameId
+        }`,
         {
           method: "PUT",
           headers: {
@@ -63,7 +65,9 @@ class UserMap extends Component {
       );
     } else {
       fetch(
-        "http://localhost:5000/draw/mapdrawing/" + this.props.currentGameId,
+        `${process.env.REACT_APP_API_URL}/draw/mapdrawing/${
+          this.props.currentGameId
+        }`,
         {
           method: "PUT",
           headers: {
@@ -87,14 +91,17 @@ class UserMap extends Component {
 
   // Get the drawings from the backend and add them to the state, so they can be drawn
   fetchGeoJSON() {
-    fetch("http://localhost:5000/draw/map/" + this.props.currentGameId, {
-      method: "GET",
-      headers: {
-        Authorization: "Bearer " + sessionStorage.getItem("token"),
-        Accept: "application/json",
-        "Content-Type": "application/json"
+    fetch(
+      `${process.env.REACT_APP_API_URL}/draw/map/${this.props.currentGameId}`,
+      {
+        method: "GET",
+        headers: {
+          Authorization: "Bearer " + sessionStorage.getItem("token"),
+          Accept: "application/json",
+          "Content-Type": "application/json"
+        }
       }
-    })
+    )
       .then(res => res.json())
       .then(data => {
         let newFeatures = [];