From 210a4e6cf490defa57122d4ee440b1b5c42317fa Mon Sep 17 00:00:00 2001
From: Joni Laukka <joni.laukka.overflow@gmail.com>
Date: Fri, 7 Jun 2019 15:16:48 +0300
Subject: [PATCH] New game form added, but it is not functional yet. Login form
 button is not rendered because header needs modifications.

---
 src/components/Header.js      |  13 ++-
 src/components/NewGameForm.js | 153 ++++++++++++++++++++++++++++++++++
 2 files changed, 164 insertions(+), 2 deletions(-)
 create mode 100644 src/components/NewGameForm.js

diff --git a/src/components/Header.js b/src/components/Header.js
index 4406f82..bf406af 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -2,6 +2,7 @@ import React from 'react';
 
 import LoginForm from './LoginForm';
 import RegisterForm from './RegisterForm';
+import NewGameForm from './NewGameForm';
 
 class Header extends React.Component {
   state = {
@@ -71,7 +72,8 @@ class Header extends React.Component {
             </button>
           )}
           {!this.state.username && (
-            <button onClick={() => this.toggleView('login')}>login</button>
+            // <button onClick={() => this.toggleView('login')}>login</button>
+            <button onClick={() => this.toggleView('login')}>New Game</button>
           )}
           {this.state.username && (
             <button onClick={this.handleLogout}>logout</button>
@@ -85,12 +87,19 @@ class Header extends React.Component {
             toggleView={this.toggleView}
           />
         )}
-        {this.state.login && (
+        {/* {this.state.login && (
           <LoginForm
             view='login'
             handleState={this.handleState}
             toggleView={this.toggleView}
           />
+        )} */}
+        {this.state.login && (
+          <NewGameForm
+            view='login'
+            handleState={this.handleState}
+            toggleView={this.toggleView}
+          />
         )}
       </div>
     );
diff --git a/src/components/NewGameForm.js b/src/components/NewGameForm.js
new file mode 100644
index 0000000..af5c36c
--- /dev/null
+++ b/src/components/NewGameForm.js
@@ -0,0 +1,153 @@
+import React from 'react';
+
+export class NewGameForm extends React.Component{
+  constructor(props){
+    super(props);
+
+    this.state = {
+      gamename: "",
+      description: "",
+      startDate: "",
+      startTime: "",
+      endDate: "",
+      endTime: "",
+      passwords: [],
+    }
+  }
+
+  handleError = error => {
+    this.setState({ errorMsg: error });
+  };
+
+  handleChange = e => {
+    const { name, value } = e.target;
+    console.log(value, name);
+    this.setState({ [name]: value });
+  };
+
+  // show/hide this form
+  handleView = e => {
+    this.props.toggleView(this.props.view);
+  };
+
+  // remove view with ESC
+  handleEsc = e => {
+    if (e.keyCode === 27) {
+      this.handleView();
+    }
+  };
+
+  handleGameCreation = e => {
+    const name = this.state.username;
+    const password = this.state.password;
+    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);
+        }
+      );
+  };
+
+  componentDidMount() {
+    document.addEventListener('keyup', this.handleEsc);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keyup', this.handleEsc);
+  }
+
+  render() {
+    return (
+      <div className='fade-main'>
+        <div className='sticky'>
+          <span className='close' onClick={this.handleView}>
+            ×
+          </span>
+        </div>
+        <div className='login'>
+          <form onSubmit={this.handleLogin}>
+            <h1>Demo Game Creation</h1>
+            <br />
+            <input
+              placeholder='Game name'
+              name='gamename'
+              value={this.state.gamename}
+              onChange={this.handleChange}
+              required
+            />
+            <br />
+            <input
+              placeholder='Description'
+              type='text'
+              name='description'
+              value={this.state.description}
+              onChange={this.handleChange}
+              required
+            />
+            <br />
+            <input
+              type='date'
+              name='startDate'
+              value={this.state.startDate}
+              onChange={this.handleChange}
+              required
+            />
+            <br />
+            <input
+              type='time'
+              name='startTime'
+              onChange={this.handleChange}
+              required
+            />
+            <br />
+            <input
+              type='date'
+              name='endDate'
+              value={this.state.endDate}
+              onChange={this.handleChange}
+              min={this.state.startDate}
+              required
+            />
+            <br />
+            <input
+              type='time'
+              name='endTime'
+              onChange={this.handleChange}
+              required
+            />
+            <br />
+            <button type='submit'>Submit</button>
+            <h2>{this.state.errorMsg}</h2>
+          </form>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default NewGameForm;
\ No newline at end of file
-- 
GitLab