You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.6 KiB
49 lines
1.6 KiB
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>
|
|
)
|
|
}
|
|
}
|
|
}
|