text: import React, { Component } from 'react';
  import './NewRoomForm.scss';
  import gameRoomService from '../../utils/gameRoomService'
  
  class NewRoomForm extends Component {
    state = {
      name: '',
      description: '',
      // private: '',
      // language: '',
    }
    
    handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
    
    handleSubmit = async (e) => {
      e.preventDefault();
      let game = this.state;
      game.gameRoom = this.props.roomId
      try {
        await gameRoomService.create(game);
        this.props.handleNewRoom(e)
      } catch (err) {
        // TODO refactor to something less annoying
        alert('Room couldn\'t be created!');
      } 
    }
    
    render() { 
      return (<>
        <p>New Room Form</p>
        <form onSubmit={this.handleSubmit} >
            <div>
              <div>
                <input 
                  type="text" placeholder="Room Name" name="name" 
                  value={this.state.name} onChange={this.handleChange} 
                />
              </div>
            </div>
            <div>
              <div >
                <input 
                  type="text" placeholder="Room Description" name="description" 
                  value={this.state.description} onChange={this.handleChange} 
                />
              </div>
            </div>
            <div>
              <div>
                <button>Create Room</button>
              </div>
            </div>
          </form>
      </>);
    }
  }
   
  export default NewRoomForm;