diff --git a/.env.example b/.env.example new file mode 100644 index 0000000000000000000000000000000000000000..2badae6b3fc04489905ce10c5ef15eb8f857f035 --- /dev/null +++ b/.env.example @@ -0,0 +1 @@ +REACT_APP_API_URL="http://localhost:5000" \ No newline at end of file diff --git a/src/components/EditGameForm.js b/src/components/EditGameForm.js index c755815199a7bdba408c8d4206461e6573fed6c8..fbc37f8995faaaec41f56c51a6b1b6cdd6ba5d4b 100644 --- a/src/components/EditGameForm.js +++ b/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)); diff --git a/src/components/GameList.js b/src/components/GameList.js index e743dbba76b02cddaffd00d2c26757df71be7f21..f3fc6d3c71a350b960302f428ed66df3271a8e87 100644 --- a/src/components/GameList.js +++ b/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({ diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js index 792758134619f071e1f3bcea1f1a41abf4d86073..61f3dec0a63cc4391c5f7a328303e9db9513d726 100644 --- a/src/components/LoginForm.js +++ b/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 diff --git a/src/components/NewGameForm.js b/src/components/NewGameForm.js index aeee892c1dc2c7f106470eb93bb12aa31c8410c3..e84940d00c6619d3793d5b9cc5746ebf3269e36c 100644 --- a/src/components/NewGameForm.js +++ b/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, diff --git a/src/components/Player.js b/src/components/Player.js index 15f7a7f48c7357e815c30134bd25c7b61b5c3984..195cc40acbdc959c08b58da9b290bf44577f9e9f 100644 --- a/src/components/Player.js +++ b/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} diff --git a/src/components/RegisterForm.js b/src/components/RegisterForm.js index 3e14df125639550bcd6948bc38167c368c273929..bba11b805f7a58f154097370ea3fbcaac4bd5cb9 100644 --- a/src/components/RegisterForm.js +++ b/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> diff --git a/src/components/UserMap.js b/src/components/UserMap.js index 22dbbb66cc08c872820a108643cfc4e9e1fe6b73..d1e3f86927e264a3e337574b29597eaa0941b744 100644 --- a/src/components/UserMap.js +++ b/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 = [];