{"size": 1969, "ext": "js", "max_stars_repo_path": "client/src/components/Rooms/JoinRoom.js", "max_stars_repo_name": "tyellu/FinApp", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/components/Rooms/JoinRoom.js", "max_issues_repo_name": "tyellu/FinApp", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/components/Rooms/JoinRoom.js", "max_forks_repo_name": "tyellu/FinApp", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.3472222222, "max_line_length": 89, "alphanum_fraction": 0.563737938}
import React, { Component } from 'react';
import Modal from 'react-responsive-modal';
import RaisedButton from 'material-ui/RaisedButton';
import 'react-responsive-modal/lib/react-responsive-modal.css';
import API from '../../APIService';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';

class JoinRoom extends Component {
  constructor(props) {
      super(props);
      this.state = {
          rooms:[],
          value: ''
      };
      this.handleChange = this.handleChange.bind(this)
  }

  handleChange(event, index, value){
      this.setState({value});
      
  }

  joinRoom(){
      API.joinRoom(this.state.value).then((res) => {
        //console.log("Joined room");
        this.props.onCloseModal();
      }).catch(e => console.log(e));
  }

  componentDidMount() {
      this.getRooms();
  }

  getRooms() {
      API.getAllRooms().then((res) => {
        this.setState({ rooms: res || []});
      }).catch(e => console.log(e));
  }

  createMenuItem(room) {
        return (<MenuItem value={room.name} key={room.name} primaryText={room.name} />);
  }

  render(){
      return (
        <div className="example">
          <Modal
            open={this.props.open}
            onClose={this.props.onCloseModal}
            little
            classNames={{
              transitionEnter: 'transition-enter',
              transitionEnterActive: 'transition-enter-active',
            }}
            animationDuration={1000}
            closeIconSize={15}
          >
            <DropDownMenu value={this.state.value} onChange={this.handleChange}
              iconStyle={{fill:"black"}}
            >
                { this.state.rooms.map((room) => { return this.createMenuItem(room);}) }
            </DropDownMenu>
            <br/>
            <RaisedButton label="Join" primary={true} onClick={() => this.joinRoom()}/>  
          </Modal>
        </div>
      );
    }
}

export default JoinRoom;