Front End Socket communication works!

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}/>
+    )
   }
 }
 

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>
+      )
+    }
+  }
+
+}

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>
+     )
+    }
+}