From c57293607a33b480fa7127634ff5367947185ce8 Mon Sep 17 00:00:00 2001
From: Ronnie Friman <L4168@student.jamk.fi>
Date: Sun, 30 Jun 2019 19:22:31 +0300
Subject: [PATCH] added env variable for fetch url
---
.env.example | 1 +
src/components/EditGameForm.js | 74 +++++++++++++++++-----------------
src/components/GameList.js | 2 +-
src/components/Header.js | 2 +-
src/components/LoginForm.js | 17 +++++---
src/components/NewGameForm.js | 72 ++++++++++++++++-----------------
src/components/RegisterForm.js | 2 +-
7 files changed, 88 insertions(+), 82 deletions(-)
create mode 100644 .env.example
diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..75d1a71
--- /dev/null
+++ b/.env.example
@@ -0,0 +1 @@
+REACT_APP_URL = "http://localhost:5000"
\ No newline at end of file
diff --git a/src/components/EditGameForm.js b/src/components/EditGameForm.js
index dd4e9bd..ac56b35 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_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_URL}/game/` + gameId)
.then(response => response.json())
.then(json => this.handleGameInfo(json))
.catch(error => console.log(error));
@@ -126,79 +126,79 @@ export class EditGameForm extends React.Component {
render() {
return ReactDOM.createPortal(
- <div className="fade-main">
- <div className="sticky">
+ <div className='fade-main'>
+ <div className='sticky'>
<span
- id="closeEditGameFormX"
- className="close"
+ id='closeEditGameFormX'
+ className='close'
onClick={this.handleView}
>
×
</span>
</div>
- <div className="">
+ <div className=''>
<form onSubmit={this.handleGameSave}>
<h1>Demo Game Creation</h1>
<br />
<input
- placeholder="Game name"
- name="gamename"
+ placeholder='Game name'
+ name='gamename'
value={this.state.gamename}
onChange={this.handleChange}
- id="editGameNameInput"
+ id='editGameNameInput'
/>
<br />
<input
- placeholder="Description"
- type="text"
- name="description"
+ placeholder='Description'
+ type='text'
+ name='description'
value={this.state.description}
onChange={this.handleChange}
- id="editGameDescriptionInput"
+ id='editGameDescriptionInput'
/>
<br />
- <label className="">Start:</label>
+ <label className=''>Start:</label>
<input
- className="formDate"
- type="date"
- name="startDate"
+ className='formDate'
+ type='date'
+ name='startDate'
value={this.state.startDate}
onChange={this.handleChange}
- id="editGameDateStartInput"
+ id='editGameDateStartInput'
/>
<input
- className="formTime"
- type="time"
- name="startTime"
+ className='formTime'
+ type='time'
+ name='startTime'
value={this.state.startTime}
onChange={this.handleChange}
- rid="editGameTimeStartInput"
+ rid='editGameTimeStartInput'
/>
<br />
- <label className="">End:</label>
+ <label className=''>End:</label>
<input
- className="formDate"
- type="date"
- name="endDate"
+ className='formDate'
+ type='date'
+ name='endDate'
value={this.state.endDate}
onChange={this.handleChange}
min={this.state.startDate}
- id="editGameDateEndInput"
+ id='editGameDateEndInput'
/>
<input
- className="formTime"
- type="time"
- name="endTime"
+ className='formTime'
+ type='time'
+ name='endTime'
value={this.state.endTime}
onChange={this.handleChange}
- id="editGameTimeEndInput"
+ id='editGameTimeEndInput'
/>
<br />
<label>Map things</label>
<br />
<Map
- id="editGameCenterMap"
- className=""
+ id='editGameCenterMap'
+ className=''
center={[this.state.mapCenter.lat, this.state.mapCenter.lng]}
zoom={this.state.zoom}
style={{ height: '400px', width: '400px' }}
@@ -206,12 +206,12 @@ export class EditGameForm extends React.Component {
onzoomend={this.handleMapScroll}
>
<TileLayer
- attribution="Maanmittauslaitoksen kartta"
- url=" https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg"
+ attribution='Maanmittauslaitoksen kartta'
+ url=' https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg'
/>
</Map>
<br />
- <button id="editGameSubmitButton" type="submit">
+ <button id='editGameSubmitButton' type='submit'>
Save changes
</button>
<h2>{this.state.errorMsg}</h2>
diff --git a/src/components/GameList.js b/src/components/GameList.js
index 26d3282..e1b0fa1 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_URL}/game/listgames`)
.then(response => response.json())
.then(games => {
this.setState({
diff --git a/src/components/Header.js b/src/components/Header.js
index 6a0f788..c3b0d55 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -34,7 +34,7 @@ class Header extends React.Component {
componentDidMount() {
let token = sessionStorage.getItem('token');
if (token) {
- fetch('http://localhost:5000/user/verify', {
+ fetch(`${process.env.REACT_APP_URL}/user/verify`, {
headers: {
Authorization: 'Bearer ' + token
}
diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js
index f37999d..7dca586 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_URL}/user/login`, {
method: 'POST',
headers: {
Accept: 'application/json',
@@ -80,7 +80,11 @@ export class LoginForm extends React.Component {
return (
<div className='fade-main'>
<div className='sticky'>
- <span id="closeLoginFormX" className='close' onClick={this.handleView}>
+ <span
+ id='closeLoginFormX'
+ className='close'
+ onClick={this.handleView}
+ >
×
</span>
</div>
@@ -93,7 +97,7 @@ export class LoginForm extends React.Component {
name='username'
value={this.state.username}
onChange={this.handleChange}
- id="loginUsernameInput"
+ id='loginUsernameInput'
/>
<br />
<input
@@ -102,15 +106,16 @@ export class LoginForm extends React.Component {
name='password'
value={this.state.password}
onChange={this.handleChange}
- id="loginPasswordInput"
+ id='loginPasswordInput'
/>
<br />
- <button id="submitLoginButton" type='submit'>login</button>
+ <button id='submitLoginButton' type='submit'>
+ login
+ </button>
<h2>{this.state.errorMsg}</h2>
</form>
</div>
</div>
-
);
}
}
diff --git a/src/components/NewGameForm.js b/src/components/NewGameForm.js
index 3f83ccf..e681b0c 100644
--- a/src/components/NewGameForm.js
+++ b/src/components/NewGameForm.js
@@ -77,7 +77,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_URL}/game/new`, {
method: 'POST',
headers: {
Authorization: 'Bearer ' + token,
@@ -103,77 +103,77 @@ export class NewGameForm extends React.Component {
render() {
return ReactDOM.createPortal(
- <div className="fade-main">
- <div className="sticky">
+ <div className='fade-main'>
+ <div className='sticky'>
<span
- id="closeNewGameFormX"
- className="close"
+ id='closeNewGameFormX'
+ className='close'
onClick={this.handleView}
>
×
</span>
</div>
- <div className="">
+ <div className=''>
<form onSubmit={this.handleGameCreation}>
<h1>Demo Game Creation</h1>
<br />
<input
- placeholder="Game name"
- name="gamename"
+ placeholder='Game name'
+ name='gamename'
value={this.state.gamename}
onChange={this.handleChange}
- id="newGameNameInput"
+ id='newGameNameInput'
/>
<br />
<input
- placeholder="Description"
- type="text"
- name="description"
+ placeholder='Description'
+ type='text'
+ name='description'
value={this.state.description}
onChange={this.handleChange}
- id="newGameDescriptionInput"
+ id='newGameDescriptionInput'
/>
<br />
- <label className="">Start:</label>
+ <label className=''>Start:</label>
<input
- className="formDate"
- type="date"
- name="startDate"
+ className='formDate'
+ type='date'
+ name='startDate'
value={this.state.startDate}
onChange={this.handleChange}
- id="newGameDateStartInput"
+ id='newGameDateStartInput'
/>
<input
- className="formTime"
- type="time"
- name="startTime"
+ className='formTime'
+ type='time'
+ name='startTime'
onChange={this.handleChange}
- id="newGameTimeStartInput"
+ id='newGameTimeStartInput'
/>
<br />
- <label className="">End:</label>
+ <label className=''>End:</label>
<input
- className="formDate"
- type="date"
- name="endDate"
+ className='formDate'
+ type='date'
+ name='endDate'
value={this.state.endDate}
onChange={this.handleChange}
min={this.state.startDate}
- id="newGameDateEndInput"
+ id='newGameDateEndInput'
/>
<input
- className="formTime"
- type="time"
- name="endTime"
+ className='formTime'
+ type='time'
+ name='endTime'
onChange={this.handleChange}
- id="newGameTimeEndInput"
+ id='newGameTimeEndInput'
/>
<br />
<label>Map things</label>
<br />
<Map
- id="newGameCenterMap"
- className=""
+ id='newGameCenterMap'
+ className=''
center={[this.state.mapCenter.lat, this.state.mapCenter.lng]}
zoom={this.state.zoom}
style={{ height: '400px', width: '400px' }}
@@ -181,12 +181,12 @@ export class NewGameForm extends React.Component {
onzoomend={this.handleMapScroll}
>
<TileLayer
- attribution="Maanmittauslaitoksen kartta"
- url=" https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg"
+ attribution='Maanmittauslaitoksen kartta'
+ url=' https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg'
/>
</Map>
<br />
- <button id="newGameSubmitButton" type="submit">
+ <button id='newGameSubmitButton' type='submit'>
Submit
</button>
<h2>{this.state.errorMsg}</h2>
diff --git a/src/components/RegisterForm.js b/src/components/RegisterForm.js
index 960731a..a2706f1 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_URL}/user/register`, {
method: 'POST',
headers: {
Accept: 'application/json',
--
GitLab