From 9bb3a45f18727eebc61f88b0ce733c4598c8bf56 Mon Sep 17 00:00:00 2001
From: Joni Laukka <joni.laukka.overflow@gmail.com>
Date: Mon, 10 Jun 2019 12:33:33 +0300
Subject: [PATCH] New game form is now a portal. It does not send any data to
server.
---
public/index.html | 1 +
src/App.css | 19 +++++++++-
src/components/NewGameForm.js | 71 +++++++++++++++++++----------------
3 files changed, 57 insertions(+), 34 deletions(-)
diff --git a/public/index.html b/public/index.html
index dd1ccfd..624e8a0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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.
diff --git a/src/App.css b/src/App.css
index b0f08dd..dd64647 100644
--- a/src/App.css
+++ b/src/App.css
@@ -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%;
+}
+
diff --git a/src/components/NewGameForm.js b/src/components/NewGameForm.js
index af5c36c..7c0f4b3 100644
--- a/src/components/NewGameForm.js
+++ b/src/components/NewGameForm.js
@@ -1,4 +1,5 @@
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')
);
}
}
--
GitLab