Skip to content
Snippets Groups Projects
Commit 9bb3a45f authored by Joni Laukka's avatar Joni Laukka
Browse files

New game form is now a portal. It does not send any data to server.

parent 210a4e6c
No related branches found
No related tags found
3 merge requests!21Development,!15Get game creation to user-marker-database-interactions,!13Resolve "Pelinluontilomake"
Hide whitespace changes
Inline Side-by-side
public/index.html
+ 1
− 0
View file @ 9bb3a45f
......@@ -23,6 +23,7 @@
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="form"></div>
<div id="root"></div>
<!--
This HTML file is a template.
......
src/App.css
+ 18
− 1
View file @ 9bb3a45f
......@@ -51,7 +51,7 @@ div.header button:hover {
div.fade-main {
position: fixed;
top: 0;
z-index: 1000;
z-index: 1020;
height: 100vh;
width: 100vw;
margin: auto;
......@@ -138,3 +138,20 @@ div.login button:hover {
background-color: darkblue;
cursor: pointer;
}
.login .formDate {
width: 30%;
}
.login label.formDate {
color: white;
width: 10%;
margin-left: 10%;
font-size: 180%;
}
.login .formTime {
width: 30%;
margin-right: 20%;
}
src/components/NewGameForm.js
+ 38
− 33
View file @ 9bb3a45f
import React from 'react';
import ReactDOM from 'react-dom';
export class NewGameForm extends React.Component{
constructor(props){
......@@ -21,7 +22,6 @@ export class NewGameForm extends React.Component{
handleChange = e => {
const { name, value } = e.target;
console.log(value, name);
this.setState({ [name]: value });
};
......@@ -43,34 +43,34 @@ export class NewGameForm extends React.Component{
e.preventDefault();
// Send Game info to the server
fetch('http://localhost:5000/user/login', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: name,
password: password
})
})
.then(res => res.json())
.then(
result => {
if (result.name) {
this.props.handleState(result);
this.handleView();
} else {
this.handleError(result.errorResponse.message);
}
},
// Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow
// exceptions from actual bugs in components.
error => {
console.log(error);
}
);
// fetch('http://localhost:5000/user/login', {
// method: 'POST',
// headers: {
// Accept: 'application/json',
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify({
// name: name,
// password: password
// })
// })
// .then(res => res.json())
// .then(
// result => {
// if (result.name) {
// this.props.handleState(result);
// this.handleView();
// } else {
// this.handleError(result.errorResponse.message);
// }
// },
// // Note: it's important to handle errors here
// // instead of a catch() block so that we don't swallow
// // exceptions from actual bugs in components.
// error => {
// console.log(error);
// }
// );
};
componentDidMount() {
......@@ -82,7 +82,7 @@ export class NewGameForm extends React.Component{
}
render() {
return (
return ReactDOM.createPortal (
<div className='fade-main'>
<div className='sticky'>
<span className='close' onClick={this.handleView}>
......@@ -110,22 +110,26 @@ export class NewGameForm extends React.Component{
required
/>
<br />
<label className='formDate'>Start:</label>
<input
className='formDate'
type='date'
name='startDate'
value={this.state.startDate}
onChange={this.handleChange}
required
/>
<br />
<input
className='formTime'
type='time'
name='startTime'
onChange={this.handleChange}
required
/>
<br />
<label className='formDate'>End:</label>
<input
className='formDate'
type='date'
name='endDate'
value={this.state.endDate}
......@@ -133,8 +137,8 @@ export class NewGameForm extends React.Component{
min={this.state.startDate}
required
/>
<br />
<input
className='formTime'
type='time'
name='endTime'
onChange={this.handleChange}
......@@ -145,7 +149,8 @@ export class NewGameForm extends React.Component{
<h2>{this.state.errorMsg}</h2>
</form>
</div>
</div>
</div>,
document.getElementById('form')
);
}
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment