Votespinner.jsx

module['exports'] = App.createComponent('VoteSpinner', {

  getInitialState: function () {
    return {
      vote: 0,
      busy: false
    };
  },

  toggle: function (val) {

    var
      _this = this,
      previous = _this.state.vote || 0;
      
    if (this.state.busy) { return; }

    _this.setState({ busy: true });

    App.getService('DataService').setEntityVote({ value: val }, params)
      .then(function () {
        _this.setState({
          vote: (val === _this.state.vote ? 0 : val),
          busy: false
        });
      }, function (err) {
        _this.setState({
          vote: previous,
          busy: false
        });
      });

  },

  render: function () {

    var
      VoteSpinnerTotal = App.getComponent('VoteSpinnerTotal'),
      upClasses, downClasses,
      isDisabled = this.props.disable || this.state.busy;

    upClasses = classSet({
      teal: this.state.vote === 1,
      disabled: isDisabled,
      link: !this.props.disable,
      'vote up icon': true
    });

    downClasses = classSet({
      teal: this.state.vote === -1,
      disabled: isDisabled,
      link: !this.props.disable,
      'vote down icon': true
    });

    /* jshint ignore:start */
    return (
      <div className="vote-spinner">
        <i onClick={this.toggle.bind(this, 1)} className={upClasses}></i>
        { this.transferPropsTo(<VoteSpinnerTotal busy={this.state.busy} userVote={this.state.vote} />) }
        <i onClick={this.toggle.bind(this, -1)} className={downClasses}></i>
      </div>
      );
    /* jshint ignore:end */

  }

});