<commit_before>var React = require('react');
var ReactDOM = require('react-dom');

//Breakdown of the page
    //App - holds all other views
    //Nav - holds the navbar
    //GetRates - holds the form for city, checkin and checkout
    //ContactUs - holds the form for contacting us
    //Cities - holds the view for the cities we represent
    //HotelsList - holds the view for results after user submits GetRates form
    //Hotel - holds view for a single hotel a user clicks on
    //Filters - holds view for filtering HotelsList


//App
var App = React.createClass({
    getHotelsFromServer: function(){
        var url = 'https://hotel-project-ajboyle.c9users.io/api/locations/' + this.state.information.city + '/hotels?checkin=' + this.state.information.checkin + '&checkout=' + this.state.information.checkout;
        $.ajax({
            url: url, 
            dataType: 'json',
            cache: false,
            success: function(data){
                this.setState({ hotels: data });
            }.bind(this),
            error: function(xhr, status, err){
                console.error(url, status, err.toString());
            }.bind(this) 
        });
    },
    getInitialState: function(){
        return {
            hotels: [],
            information: {},
            hotel: {}
        };  
    },
    componentDidMount: function(){
        this.getHotelsFromServer();
        
    },
    
    updateInfo: function(info){
        this.setState({ information: info });
        this.getHotelsFromServer();
    },
    renderHotels: function(key){
        return (<Hotels key={key} details={this.state.hotels[key]} />);
    },
    render: function(){
        return(
            <div>
                <h1 className="title">HotelsLite.com</h1>
                <h3 className="subtitle">The Limited Choice in Hotels!</h3>
                <Nav />
                <GetRates updateInfo={this.updateInfo} />
                <div className="listOfHotels">
                    <Hotels data={this.state.hotels} />      
                </div>
                </div>
        );
    }
});

//<Hotels details={this.state.hotels} />
//Nav 
    //need to figure out how to get collapse to work
var Nav = React.createClass({
    render: function(){
        return (
            <nav className='nav navbar'>
            <div className='container-fluid'>
                <div className='navbar-header'>
                    <button type='button' className='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
                        <span className='icon-bar'></span>
                        <span className='icon-bar'></span>
                        <span className='icon-bar'></span>
                        <span className='icon-bar'></span>
                    </button>
                    
                </div>
                <div className='collapse navbar-collapse'>
                    <ul className='nav navbar-nav navbar'>
                        <li className='navlinks'><a href='/'>Home</a></li>
                        <li className='navlinks'><a href='#cities' id='cities'>Cities We Represent</a></li>
                        <li className='navlinks'><a href='#search' onclick={this.props.showRates} id='search'>Search Hotels</a></li>
                        <li className='navlinks'><a href='#contact' id='contact'>Contact Us</a></li>
                    </ul>
                </div>
            </div>        
        </nav>    
        );
    }
});

//Get information from user regarding city, checkin and checkout dates. 
var GetRates = React.createClass({
    getInfo: function(event){
        event.preventDefault();
        var info = {
            city: this.refs.city.value,
            checkin: this.refs.checkin.value,
            checkout: this.refs.checkout.value
        };
        this.props.updateInfo(info);
      
        
        
        //this.refs.formRates.reset();
    },
    render: function(){
        return (
            <div className="searchBox">
            <h3 className="searchHotels">Search Hotels</h3>
            <form onSubmit={this.getInfo} ref="formRates" className="formRates">
                <label>City
                <select ref="city" id="city">
                    <option value='charlottesville'>Charlottesville</option>
                    <option value='newyork'>New York City</option>
                    <option value='chicago'>Chicago</option>
                </select>
                </label>
                <label>Check In
                <input type='text' ref='checkin' id='checkin' placeholder='YYYY-MM-DD' required />
                </label>
                <label>Check Out
                <input type='text' ref='checkout' id='checkout' placeholder='YYYY-MM-DD' required />
                </label>
                <button type="submit" class="button">Get Rates</button>
            </form>
            
            </div>
        );
    }
});

var Hotels = React.createClass({
    render: function(){
        var hotelNodes = this.props.data.map(function(hotel){
            return (
                <li>{hotel.name}</li>
            );
        });
        return (
            <ul>{hotelNodes}</ul>
        );
    }
});
<commit_msg>working on button issue<commit_after>var React = require('react');
var ReactDOM = require('react-dom');

//Breakdown of the page
    //App - holds all other views
    //Nav - holds the navbar
    //GetRates - holds the form for city, checkin and checkout
    //ContactUs - holds the form for contacting us
    //Cities - holds the view for the cities we represent
    //HotelsList - holds the view for results after user submits GetRates form
    //Hotel - holds view for a single hotel a user clicks on
    //Filters - holds view for filtering HotelsList


//App
var App = React.createClass({
    getHotelsFromServer: function(){
        var url = 'https://hotel-project-ajboyle.c9users.io/api/locations/' + this.state.information.city + '/hotels?checkin=' + this.state.information.checkin + '&checkout=' + this.state.information.checkout;
        $.ajax({
            url: url, 
            dataType: 'json',
            cache: false,
            success: function(data){
                this.setState({ hotels: data });
            }.bind(this),
            error: function(xhr, status, err){
                console.error(url, status, err.toString());
            }.bind(this) 
        });
    },
    getInitialState: function(){
        return {
            hotels: [],
            information: {},
            hotel: {}
        };  
    },
    componentDidMount: function(){
        this.getHotelsFromServer();
        
    },
    
    updateInfo: function(info){
        this.setState({ information: info });
        this.getHotelsFromServer();
    },
    renderHotels: function(key){
        return (<Hotels key={key} details={this.state.hotels[key]} />);
    },
    render: function(){
        return(
            <div>
                <h1 className="title">HotelsLite.com</h1>
                <h3 className="subtitle">The Limited Choice in Hotels!</h3>
                <Nav />
                <GetRates updateInfo={this.updateInfo} />
                <div className="listOfHotels">
                    <Hotels data={this.state.hotels} />      
                </div>
                </div>
        );
    }
});

//<Hotels details={this.state.hotels} />
//Nav 
    //need to figure out how to get collapse to work
var Nav = React.createClass({
    render: function(){
        return (
            <nav className='nav navbar'>
            <div className='container-fluid'>
                <div className='navbar-header'>
                    <button type='button' className='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
                        <span className='icon-bar'></span>
                        <span className='icon-bar'></span>
                        <span className='icon-bar'></span>
                        <span className='icon-bar'></span>
                    </button>
                    
                </div>
                <div className='collapse navbar-collapse'>
                    <ul className='nav navbar-nav navbar'>
                        <li className='navlinks'><a href='/'>Home</a></li>
                        <li className='navlinks'><a href='#cities' id='cities'>Cities We Represent</a></li>
                        <li className='navlinks'><a href='#search' onclick={this.props.showRates} id='search'>Search Hotels</a></li>
                        <li className='navlinks'><a href='#contact' id='contact'>Contact Us</a></li>
                    </ul>
                </div>
            </div>        
        </nav>    
        );
    }
});

//Get information from user regarding city, checkin and checkout dates. 
var GetRates = React.createClass({
    getInfo: function(event){
        event.preventDefault();
        var info = {
            city: this.refs.city.value,
            checkin: this.refs.checkin.value,
            checkout: this.refs.checkout.value
        };
        this.props.updateInfo(info);
    },
    render: function(){
        return (
            <div className="searchBox">
            <h3 className="searchHotels">Search Hotels</h3>
            <form ref="formRates" className="formRates" onSubmit={this.getInfo}>
                <label>City
                <select ref="city" id="city">
                    <option value='charlottesville'>Charlottesville</option>
                    <option value='newyork'>New York City</option>
                    <option value='chicago'>Chicago</option>
                </select>
                </label>
                <label>Check In
                <input type='text' ref='checkin' id='checkin' placeholder='YYYY-MM-DD' required />
                </label>
                <label>Check Out
                <input type='text' ref='checkout' id='checkout' placeholder='YYYY-MM-DD' required />
                </label>
                <input type="submit" value="Get Rates" />
            </form>
            
            </div>
        );
    }
});

var Hotels = React.createClass({
    render: function(){
        var hotelNodes = this.props.data.map(function(hotel){
            return (
                <li>{hotel.name}</li>
            );
        });
        return (
            <ul>{hotelNodes}</ul>
        );
    }
});

{'fraction_non_alphanumeric': 0.1362675379588699, 'fraction_numerical': 0.0013453776667307323, 'mean_word_length': 1.6174547283702214, 'pattern_counts': {'":': 0, '<': 156, '<?xml version=': 0, '>': 156, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4461518', 'n_tokens_mistral': 2871, 'n_tokens_neox': 2753, 'n_words': 620}