Push Before HTML Upload

googletrendsgame/src/App.js

@@ -13,19 +13,26 @@ class App extends Component {
     super(props);
 
     this.state={
-      progression: 'createRoom',
-      roomList: []
+      progression: 'register',
+      roomsList: []
     }
+    this.modifyStateToCreateRoom = this.modifyStateToCreateRoom.bind(this);
   }
 
-  componentDidMount(){
+  modifyStateToCreateRoom() {
+    this.setState({
+      progression: 'createRoom'
+    });
   }
 
-  stateHandler(){
-    socket.on('sendRooms', payload => this.setState({
-    progression: 'roomChoose',
-    roomList: payload.rooms
-    }));
+  componentDidMount(){
+    socket.on('sendRooms', payload => {
+      const rooms = payload.rooms;
+      this.setState({
+        progression: 'roomChoose',
+        roomsList: rooms
+      })
+    });
   }
 
   render() {
@@ -34,9 +41,8 @@ class App extends Component {
         <NicknameInput socket = {socket}/>
       )
     } else if(this.state.progression === 'roomChoose') {
-
         return(
-          <RoomList roomArray = {this.state.roomList}/>
+          <RoomList stateModifier={this.modifyStateToCreateRoom} roomArray = {this.state.roomsList}/>
         )
 
     } else if (this.state.progression === 'createRoom') {

googletrendsgame/src/components/GameScreen.js

@@ -0,0 +1 @@
+import React, {Component} from 'react';

googletrendsgame/src/components/RoomList.js

@@ -1,18 +1,25 @@
-import React, { Component } from 'react';
-import RoomListItem from 'roomListItem';
+import React from 'react';
+import RoomListItem from './RoomListItem';
+import {modifyStateToCreateRoom} from '../App'
 
-class RoomList extends Component {
-
-  renderRooms(roomArray) {
-      return(
-        <RoomListItem key = {room.name} roomName = {room.name} private = {room.passwordBool} capacity = {room.capacity} occupancy = {room.occupants} />
-      )
-  }
-
-  render(){
+export default (props) => {
+  let rooms = props.roomArray;
+  console.log(rooms);
+  if (rooms.length != 0) {
+      let roomsList = rooms.map((room) =>
+      <RoomListItem roomName={room.name} private={room.passwordBool} capacity={room.capacity} occupancy={room.occupants} />
+    );
     return(
       <div>
-        {this.props.roomArray.map(this.renderRooms)}
+       <div>{roomsList}</div>
+       <button>Create Room</button>
+      </div>
+    );
+  } else {
+    return (
+      <div>
+        <div>No current rooms, you should create one!</div>
+        <button onClick={props.stateModifier}>Create Room</button>
       </div>
     )
   }

googletrendsgame/src/components/RoomListItem.js

@@ -1,10 +1,11 @@
 import React from 'react';
 
 export default (props) => {
+  var privateString =''
   if (props.private = false){
-    const privateString = "Public"
+    privateString = "Public"
   } else {
-    const privateString = "Private"
+    privateString = "Private"
   }
   return(
     <div>

googletrendsgame/src/components/activeButton.js

@@ -16,7 +16,7 @@ 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.passInput !== '' && this.props.capacityInput !== '' && this.props.capacityInput <= 25 && this.props.capacityInput>=2 && this.props.capacityInput.length <= 2){
           return(
             <button>Create Room</button>
           )

googletrendsgame/src/components/nicknameInput.js

@@ -25,7 +25,7 @@ export default class NicknameInput extends Component {
   render() {
      return(
        <form onSubmit={this.sendNickname}>
-        <input placeholder="Enter a nickname..." onChange = {this.onInputChange} value={this.state.fieldValue} />
+        <input maxLength="30" placeholder="Enter a nickname..." onChange = {this.onInputChange} value={this.state.fieldValue} />
         <span>
           <ActiveButton input = {this.state.fieldValue} type='register' />
         </span>