<commit_before>/** @jsx React.DOM */

var Colors = require('./Colors');
var React = require('react');
var StyleMixin = require('./StyleMixin');
var Styles = require('./Styles');

var PropTypes = React.PropTypes;
var PureRenderMixin = React.addons.PureRenderMixin;
var cx = React.addons.classSet;

var Nav = React.createClass({
  propTypes: {
    onQueryChanged: PropTypes.func.isRequired,
    query: PropTypes.string,
  },

  mixins: [
    PureRenderMixin,
    StyleMixin({
      list: Styles.clearfix,
    }),
  ],

  render() {
    return (
      <nav>
        <ul className={this.styles.list}>
          {[{
            label: 'INBOX',
            query: 'in:inbox',
          }, {
            label: 'IMPORTANT',
            query: 'is:important',
          }, {
            label: 'UNREAD',
            query: 'is:unread',
          }, {
            label: 'STARRED',
            query: 'is:starred',
          }, {
            label: 'SENT',
            query: 'in:sent',
          }, {
            label: 'DRAFTS',
            query: 'is:draft',
          }].map(config =>
            <NavItem
              label={config.label}
              query={config.query}
              onQueryChanged={this.props.onQueryChanged}
              isSelected={this.props.query === config.query}
            />
          )}
        </ul>
      </nav>
    );
  }
});

var NavItem = React.createClass({
  propTypes: {
    onQueryChanged: PropTypes.func.isRequired,
    label: PropTypes.string.isRequired,
    query: PropTypes.string.isRequired,
    isSelected: PropTypes.bool
  },

  mixins: [
    PureRenderMixin,
    StyleMixin({
      root: [{
        float: 'left',
      }, Styles.clearfix],

      link: {
        color: Colors.gray3,
        display: 'block',
        padding: '16px',
        textDecoration: 'none',

        ':hover': {
          color: Colors.black,
        },
      },

      linkSelected: {
        color: Colors.accent,
        cursor: 'default',

        ':hover': {
          color: Colors.accent,
        }
      }
    }),
  ],

  _onClick(event) {
    this.props.onQueryChanged(this.props.query);
    event.preventDefault();
  },

  render() /*object*/ {
    return (
      <li className={this.styles.root}>
        <a
          className={cx(
            this.styles.link,
            this.props.isSelected && this.styles.linkSelected
          )}
          href="#"
          onClick={this._onClick}>
          {this.props.label}
        </a>
      </li>
    );
  }
});

module.exports = Nav;

<commit_msg>Fix keys warning in Nav<commit_after>/** @jsx React.DOM */

var Colors = require('./Colors');
var React = require('react');
var StyleMixin = require('./StyleMixin');
var Styles = require('./Styles');

var PropTypes = React.PropTypes;
var PureRenderMixin = React.addons.PureRenderMixin;
var cx = React.addons.classSet;

var Nav = React.createClass({
  propTypes: {
    onQueryChanged: PropTypes.func.isRequired,
    query: PropTypes.string,
  },

  mixins: [
    PureRenderMixin,
    StyleMixin({
      list: Styles.clearfix,
    }),
  ],

  render() {
    return (
      <nav>
        <ul className={this.styles.list}>
          {[{
            label: 'INBOX',
            query: 'in:inbox',
          }, {
            label: 'IMPORTANT',
            query: 'is:important',
          }, {
            label: 'UNREAD',
            query: 'is:unread',
          }, {
            label: 'STARRED',
            query: 'is:starred',
          }, {
            label: 'SENT',
            query: 'in:sent',
          }, {
            label: 'DRAFTS',
            query: 'is:draft',
          }].map(config =>
            <NavItem
              label={config.label}
              query={config.query}
              key={config.label}
              onQueryChanged={this.props.onQueryChanged}
              isSelected={this.props.query === config.query}
            />
          )}
        </ul>
      </nav>
    );
  }
});

var NavItem = React.createClass({
  propTypes: {
    onQueryChanged: PropTypes.func.isRequired,
    label: PropTypes.string.isRequired,
    query: PropTypes.string.isRequired,
    isSelected: PropTypes.bool
  },

  mixins: [
    PureRenderMixin,
    StyleMixin({
      root: [{
        float: 'left',
      }, Styles.clearfix],

      link: {
        color: Colors.gray3,
        display: 'block',
        padding: '16px',
        textDecoration: 'none',

        ':hover': {
          color: Colors.black,
        },
      },

      linkSelected: {
        color: Colors.accent,
        cursor: 'default',

        ':hover': {
          color: Colors.accent,
        }
      }
    }),
  ],

  _onClick(event) {
    this.props.onQueryChanged(this.props.query);
    event.preventDefault();
  },

  render() /*object*/ {
    return (
      <li className={this.styles.root}>
        <a
          className={cx(
            this.styles.link,
            this.props.isSelected && this.styles.linkSelected
          )}
          href="#"
          onClick={this._onClick}>
          {this.props.label}
        </a>
      </li>
    );
  }
});

module.exports = Nav;


{'fraction_non_alphanumeric': 0.14764049344037594, 'fraction_numerical': 0.0011748580379870766, 'mean_word_length': 1.6343476018566272, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 23, 'https://': 0, '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': '2169352', 'n_tokens_mistral': 1587, 'n_tokens_neox': 1577, 'n_words': 273}