setsdemo.js

setsdemo.js

/**
 * @jsx React.DOM
 */
 
var set_url = "/types/sets/buckets/demo/datatypes/rsvps";
 
var reload_data = function(data) {
    React.renderComponent(<RSVPApp context={data.context}
                                   entries={data.value} />,
                          document.getElementById('content'));
};
 
var remove = function(name, context) {
    $.ajax(set_url + "?returnbody=true",
           {
               type: "POST",
               dataType: 'json',
               contentType: 'application/json',
               data: JSON.stringify({ remove: name, context: context })
           }).done(reload_data);
};
 
var add = function(name) {
    $.ajax(set_url + "?returnbody=true",
           {
               type: "POST",
               dataType: 'json',
               contentType: 'application/json',
               data: JSON.stringify({ add: name })
           }).done(reload_data);
};
 
var RSVPApp = React.createClass({
    render: function(){
        return (<div>
                  <h1>RSVP List</h1>
                  <RSVPForm />
                  <RSVPList context={this.props.context}
                            entries={this.props.entries} />
                </div>);
    }
});
 
var RSVPForm = React.createClass({
    getInitialState: function(){
        return {value: ''};
    },
    handleChange: function(event){
        this.setState({value: event.target.value});
    },
    handleSubmit: function() {
        add(this.state.value);
        this.setState({value: ''});
        return false;
    },
    componentDidMount: function(){
        this.refs.input.getDOMNode().autocomplete = "off";
    },
    render: function(){
        return (
            <form method="POST" className="form-inline" role="form"
                  onSubmit={this.handleSubmit}>
                <div className="form-group">
                <label className="sr-only" for="name">Name</label>
                <input type="text" name="name" ref="input"
                       className="form-control"
                       placeholder="Name"
                       value={this.state.value}
                       onChange={this.handleChange} />
                </div>
                <div className="form-group"><button type="submit" className="btn btn-primary">RSVP</button></div>
            </form>
        );
    }
});
 
var RSVPList = React.createClass({
    render: function(){
        var context = this.props.context;
        var items = this.props.entries.map(function(name){
            return <RSVPItem key={name} context={context} name={name} />;
        });
        return (<div className="container"> {items} </div>);
    }
});
 
var RSVPItem = React.createClass({
    handleClick: function(event){
        remove(this.props.name, this.props.context);
    },
    render: function(){
        return (
            <div className="row">
                <div className="col-xs-2">{this.props.name}</div>
                <div className="col-md-2 col-xs-2">
                   <button className="btn btn-danger btn-xs"
                    onClick={this.handleClick}>Remove</button>
                </div>
            </div>
        );
    }
});
 
var handle_not_found = function(){
    console.log(arguments);
};
 
var update = function(){
    $.getJSON(set_url + "?include_context=true").done(reload_data).
        fail(handle_not_found);
};
 
reload_data({"value":[], "context":undefined});
 
window.setInterval(update, 500);