React translator profile

Sample react app for TED translator profile page

by samselikoff

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

ul {
    list-style-type: none;
  }
  li {
    display: inline-block;
    padding-right: 15px;
  }
  li::after {
    content: '|';
    padding-left: 15px;
    color: #ccc;
  }
  a, a:active, a:visited, a:visited:active, a:hover, a:visited:hover {
    text-decoration: none;
    color: #333;
  }
  a:hover, a:visited:hover, li.active a {
    color: #e62b1e;
  }
  .box {
    border: 1px solid #ddd;
    padding: 1em 2em;
  }
  .hide {
    display: none;
  }

JavaScript 1.7

/*
  Components
*/
var TranslatorStatsBox = React.createClass({
  getInitialState: function() {
    return {selected: 0};
  },

  handleLanguageSelected: function(index) {
    this.setState({selected: index});
  },

  render: function() {
    var languages = this.props.stats.map(function(stat) {
      return stat.language;
    });

    return (
      <div className="translatorStatsBox">
        <TranslatorStatsNav
          languages={languages}
          selected={this.state.selected}
          onLanguageSelected={this.handleLanguageSelected} />
        <TranslatorStatsDetails stat={this.props.stats[this.state.selected]} />
      </div>
    );
  }
});

var TranslatorStatsNav = React.createClass({
  render: function() {
    var linkNodes = this.props.languages.map(function(language, i) {
      return (
        <TranslatorStatsNavLink
          language={language}
          selected={this.props.selected === i}
          onClick={this.props.onLanguageSelected.bind(this.props, i)} />
      );
    }.bind(this));

    return (
      <ul className="translatorStatsNav">
        {linkNodes}
      </ul>
    );
  }
});

var TranslatorStatsNavLink = React.createClass({
  render: function() {
    return (
      <li {...this.props} className={this.props.selected ? 'active' : ''}>
        <a href='#'>{this.props.language}</a>
      </li>
    );
  }
});

var TranslatorStatsDetails = React.createClass({
  render: function() {
    var nodes = '';
    var stat = this.props.stat;
    var total = 0;

    Object.keys(stat).forEach(function(category) {
      if (category !== 'language') {
        total += stat[category];
      }
    })

    return (
      <div className='box'>
        <p className={stat.translated ? '' : 'hide'}>Translated: {this.props.stat.translated}</p>
        <p className={stat.reviewed ? '' : 'hide'}>Reviewed: {this.props.stat.reviewed}</p>
        <p className={stat.transcribed ? '' : 'hide'}>Transcribed: {this.props.stat.transcribed}</p>
        <p>Total:...