From 1f16c1c0b488230a32f2e33bec6f55eafb7078c8 Mon Sep 17 00:00:00 2001
From: Unknown <jpramassini@gmail.com>
Date: Sat, 27 Jan 2018 19:54:15 -0500
Subject: [PATCH] Front End Socket communication works!

---
 googletrendsgame/src/App.js                   | 21 ++++-------
 googletrendsgame/src/components/GameScreen.js |  0
 googletrendsgame/src/components/RoomList.js   |  0
 .../src/components/RoomListItem.js            |  0
 .../src/components/activeButton.js            | 17 +++++++++
 .../src/components/nicknameInput.js           | 35 +++++++++++++++++++
 6 files changed, 59 insertions(+), 14 deletions(-)
 create mode 100644 googletrendsgame/src/components/GameScreen.js
 create mode 100644 googletrendsgame/src/components/RoomList.js
 create mode 100644 googletrendsgame/src/components/RoomListItem.js
 create mode 100644 googletrendsgame/src/components/activeButton.js

diff --git a/googletrendsgame/src/App.js b/googletrendsgame/src/App.js
index 3b77bf4..483daf4 100644
--- a/googletrendsgame/src/App.js
+++ b/googletrendsgame/src/App.js
@@ -2,6 +2,9 @@ import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
 import openSocket from 'socket.io-client';
+import NicknameInput from './components/NicknameInput';
+
+const socket = openSocket('129.21.91.149:3000');
 
 class App extends Component {
   constructor(props){
@@ -22,23 +25,13 @@ class App extends Component {
   }
 
   componentDidMount(){
-    const socket = openSocket('129.21.91.149:3000');
-    socket.emit('register', 'User 2');
-    //socket.emit('createRoom', {password: 'pass', capacity: 4});
-    socket.emit('joinRoom', {roomName: 'pls', password: 'pass'});
-    socket.on('sendRooms', payload => this.renderRooms(payload))
+
   }
 
   render() {
-    if(this.state.progression === 'register'){
-      return(
-        <div>At least I can read the goddamn state</div>
-      );
-    } else {
-      return(
-        <div>FUBAR</div>
-      );
-    }
+    return(
+      <NicknameInput socket = {socket}/>
+    )
   }
 }
 
diff --git a/googletrendsgame/src/components/GameScreen.js b/googletrendsgame/src/components/GameScreen.js
new file mode 100644
index 0000000..e69de29
diff --git a/googletrendsgame/src/components/RoomList.js b/googletrendsgame/src/components/RoomList.js
new file mode 100644
index 0000000..e69de29
diff --git a/googletrendsgame/src/components/RoomListItem.js b/googletrendsgame/src/components/RoomListItem.js
new file mode 100644
index 0000000..e69de29
diff --git a/googletrendsgame/src/components/activeButton.js b/googletrendsgame/src/components/activeButton.js
new file mode 100644
index 0000000..cbc1da9
--- /dev/null
+++ b/googletrendsgame/src/components/activeButton.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+
+export default class activeButton extends Component {
+
+  render(){
+    if (this.props.input != ''){
+      return(
+        <button>Let's play!</button>
+      )
+    } else {
+      return(
+        <button>Enter a nickname.</button>
+      )
+    }
+  }
+
+}
diff --git a/googletrendsgame/src/components/nicknameInput.js b/googletrendsgame/src/components/nicknameInput.js
index e69de29..9693e6d 100644
--- a/googletrendsgame/src/components/nicknameInput.js
+++ b/googletrendsgame/src/components/nicknameInput.js
@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import ActiveButton from './activeButton';
+
+export default class NicknameInput extends Component {
+  constructor(props){
+    super(props);
+
+    this.state = {fieldValue: ''};
+
+    this.onInputChange = this.onInputChange.bind(this);
+    this.sendNickname = this.sendNickname.bind(this);
+  }
+
+  onInputChange(event) {
+    this.setState({ fieldValue: event.target.value });
+  }
+
+  sendNickname(event){
+      event.preventDefault();
+
+      this.props.socket.emit('register', this.state.fieldValue);
+      this.setState({fieldValue: ''})
+  }
+
+  render() {
+     return(
+       <form onSubmit={this.sendNickname}>
+        <input placeholder="Enter a nickname..." onChange = {this.onInputChange} value={this.state.fieldValue} />
+        <span>
+          <ActiveButton className = "" input = {this.state.fieldValue} />
+        </span>
+       </form>
+     )
+    }
+}