app.jsx

var ALL_SPORTS = "[all sports]";
var ALL_YEARS = "[all years]";

var FilterableChampionshipList = React.createClass({
  getInitialState: function() {
    return {
      viewingSport: ALL_SPORTS,
      viewingYear: ALL_YEARS
    };
  },
  handleSportChange: function(currentSport) {
    this.setState({
      viewingSport: currentSport
    });
  },
  handleYearChange: function(currentYear) {
    this.setState({
      viewingYear: currentYear
    });
  },
  render: function() {
    return (
      <section id="championships">
        <nav>
          <FilterByYearGroup championships={this.props.championships}
                             viewingYear={this.state.viewingYear}
                             onInput={this.handleYearChange} />
          <FilterBySportGroup sports={this.props.sports}
                              viewingSport={this.state.viewingSport}
                              onInput={this.handleSportChange} />
        </nav>
        <ChampionshipList championships={this.props.championships}
                          viewingSport={this.state.viewingSport}
                          viewingYear={this.state.viewingYear} />
      </section>
    );
  }
});

var FilterByYearGroup = React.createClass({
  handleChange: function(currentYear) {
    this.props.onInput(currentYear);
  },
  render: function() {
    // construct an array of unique years
    var years = [];
    this.props.championships.forEach(function(championship){
      var year = championship.fields.year;
      if (years.indexOf(year) === -1)
        years.push(championship.fields.year);
    });

    var yearOptions = [];
    var viewingYear = this.props.viewingYear;
    var handleChange = this.handleChange;
    years.forEach(function(year){
      yearOptions.push(<FilterOption type="year" name={year}
                                     viewing={viewingYear}
                                     onInput={handleChange} />);
    });

    return (
      <div className="years options">
        <FilterOption type="year" name={ALL_YEARS}
                      viewing={this.props.viewingYear}
                      onInput={this.handleChange} />
        {yearOptions}
      </div>
    );
  }
});

var FilterBySportGroup = React.createClass({
  handleChange: function(currentSport) {
    this.props.onInput(currentSport);
  },
  render: function() {
    var sportOptions = [];
    var viewingSport = this.props.viewingSport;
    var handleChange = this.handleChange;
    this.props.sports.forEach(function(sport){
      sportOptions.push(<FilterOption type="sport" name={sport.fields.name}
                                      viewing={viewingSport}
                                      onInput={handleChange} />);
    });
    return (
      <div className="sports options">
        <FilterOption type="sport" name={ALL_SPORTS}
                      viewing={this.props.viewingSport}
                      onInput={this.handleChange} />
        {sportOptions}
      </div>
    );
  }
});

var ChampionshipList = React.createClass({
  render: function() {
    var rows = [];
    var viewingSport = this.props.viewingSport;
    var viewingYear = this.props.viewingYear;
    this.props.championships.forEach(function(championship){
      if ((viewingSport === ALL_SPORTS ||
          viewingSport === championship.fields.sport) &&
          (viewingYear === ALL_YEARS ||
          viewingYear == championship.fields.year))
        rows.push(<Championship championship={championship} />);
    });
    return (
      <div className="championships">{rows}</div>
    );
  }
});

var Championship = React.createClass({
  render: function() {
    var fields = this.props.championship.fields;
    return (
      <div className="championship">
        <h1>
          <span className="sport-year">{fields.year} </span>
          <span className="sport-name">{fields.sport}</span>
        </h1>
        <img src={fields.photo} />
        <p>{fields.blurb}</p>
      </div>
    );
  }
});

var FilterOption = React.createClass({
  handleChange: function(event) {
    this.props.onInput(event.currentTarget.value);
  },
  render: function() {
    var type = this.props.type;
    var name = this.props.name;
    var selector = slug(name);
    return (
      <div className="option">
        <input type="radio" name={type} value={name} id={selector}
               onChange={this.handleChange}
               checked={this.props.viewing == name} />
                 {/* allow type cohersion in comparison */}
        <label htmlFor={selector} className="sport-name">
          {name}
        </label>
      </div>
    );
  }
});

React.render(<FilterableChampionshipList championships={CHAMPIONSHIPS} sports={SPORTS} />,
  document.body);