Pushin - got callback on button working, need to implement room switch.

googletrendsgame/src/App.js

@@ -16,7 +16,16 @@ class App extends Component {
       progression: 'register',
       roomsList: []
     }
+
+    socket.on('sendRooms', payload => {
+      var rooms = payload.rooms;
+      this.setState({
+        progression: 'roomChoose',
+        roomsList: rooms
+      })
+    });
     this.modifyStateToCreateRoom = this.modifyStateToCreateRoom.bind(this);
+    this.modifyStateToRoomsScreen = this.modifyStateToRoomsScreen.bind(this);
   }
 
   modifyStateToCreateRoom() {
@@ -31,16 +40,13 @@ class App extends Component {
     })
   }
 
-  componentDidMount(){
-    socket.on('sendRooms', payload => {
-      const rooms = payload.rooms;
-      this.setState({
-        progression: 'roomChoose',
-        roomsList: rooms
-      })
-    });
+  modifyStateToRoomsScreen(){
+    this.setState({
+      progression: 'roomChoose'
+    })
   }
 
+
   render() {
     if (this.state.progression === 'register') {
       return(
@@ -53,7 +59,7 @@ class App extends Component {
 
     } else if (this.state.progression === 'createRoom') {
       return(
-        <CreateRoomInput socket = {socket}/>
+        <CreateRoomInput goBack={this.modifyStateToRoomsScreen} socket = {socket}/>
       )
     }
   }

googletrendsgame/src/components/RoomListItem.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 export default (props) => {
   var privateString =''
-  if (props.private == false){
+  if (props.private === false){
     privateString = "Public"
   } else {
     privateString = "Private"

googletrendsgame/src/components/activeButton.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import ROOM_CAPACITY from '../App'
+import App from '../App'
+
 
 export default class activeButton extends Component {
 
@@ -16,13 +17,13 @@ export default class activeButton extends Component {
           )
         }
       case 'createRoom':
-        if(this.props.passInput !== '' && this.props.capacityInput !== '' && this.props.capacityInput <= 25 && this.props.capacityInput>=2 && this.props.capacityInput.length <= 2){
+        if(this.props.capacityInput !== '' && this.props.capacityInput <= 25 && this.props.capacityInput>=2 && this.props.capacityInput.length <= 2){
           return(
-            <button>Create Room</button>
+            <button onClick={this.props.goBack}>Create Room</button>
           )
         } else {
           return(
-            <button disabled>Enter password and capacity to create a room.</button>
+            <button disabled>Enter password (optional) and capacity to create a room.</button>
           )
         }
     }

googletrendsgame/src/components/createRoomInput.js

@@ -9,7 +9,7 @@ export default class CreateRoomInput extends Component {
       passwordFieldValue: '',
       capacityFieldValue:''
     }
-    //test Comment
+
     this.onInputChangePass = this.onInputChangePass.bind(this);
     this.onInputChangeCapacity = this.onInputChangeCapacity.bind(this);
     this.sendRoomData = this.sendRoomData.bind(this);
@@ -36,7 +36,7 @@ export default class CreateRoomInput extends Component {
         <input type="password" placeholder="Password" onChange = {this.onInputChangePass} value={this.state.passwordFieldValue} />
         <input type='number' placeholder="Max room members" onChange = {this.onInputChangeCapacity} value={this.state.capacityFieldValue} />
         <span>
-          <ActiveButton passInput={this.state.passwordFieldValue} capacityInput={this.state.capacityFieldValue} type='createRoom' />
+          <ActiveButton goBack={this.props.goBack} passInput={this.state.passwordFieldValue} capacityInput={this.state.capacityFieldValue} type='createRoom' />
         </span>
       </form>
     )

googletrendsgame/src/components/wordInput.js

@@ -0,0 +1,12 @@
+import React, {Component} from 'react';
+
+class wordInput extends Component {
+  constructor(props){
+    super(props);
+
+    this.state={fieldValue:''}
+
+    //this.onInputChange = this.onInputChange.bind(this);
+    //this.onInputChange
+  }
+}