|
|
- import React, {Component} from 'react';
-
- export default class RoomListItem extends Component {
- constructor(props){
- super(props);
-
- this.state={
- term:''
- }
-
- this.onInputChange = this.onInputChange.bind(this);
- this.buttonClickHandler = this.buttonClickHandler.bind(this);
- }
-
-
- onInputChange(event) {
- this.setState( { term: event.target.value });
- }
-
- buttonClickHandler(event){
- this.props.socket.emit('joinRoom', {roomName: this.props.roomName, password: this.state.term});
- }
-
-
- render(){
- if (this.props.private === false){
- console.log("The public listItem was called")
- return(
- <li className = 'lobby__room'>
- <span className="lobby__room-name">{this.props.roomName}'s Room</span>
- <span className="lobby__room-occupancy">{this.props.occupancy}/{this.props.capacity}</span>
- <span className="lobby__room-name">Public</span>
- <span className="lobby__room-status"><button type="submit" onClick={this.buttonClickHandler}>Join Room</button></span>
- </li>
- )
- } else {
- console.log("the private listItem was called")
- return(
- <li className = 'lobby__room'>
- <span className="lobby__room-name">{this.props.roomName}'s Room</span>
- <span className="lobby__room-occupancy">{this.props.occupancy}/{this.props.capacity}</span>
- <span className="lobby__room-occupancy">Private</span>
- <span className="field--nickname"><input onChange={this.onInputChange} /></span>
- <span className="lobby__room-status"><button type="submit" onClick={this.buttonClickHandler}>Join Room</button></span>
- </li>
- )
- }
- }
- }
|