<commit_before>import React from 'react';
import {Link} from 'react-router';

class CharacterList extends React.Component {

  constructor(props) {
    super(props);
    this.characters = [];
  }

  fetchCharacters() {
    var routeParams = this.context.router.getCurrentParams();
    var currentPath = this.context.router.getCurrentPath();
    var baseUrl = '/api/characters/top';

    var options = {
      race: routeParams.race,
      bloodline: routeParams.bloodline
    };

    if (currentPath.indexOf('female') > -1) {
      options.gender = 'female';
    } else if (currentPath.indexOf('male') > -1) {
      options.gender = 'male';
    }

    $.get(baseUrl, options, function(data) {
      this.setState({ characters: data });
    }.bind(this));
  }

  fetchShame() {
    $.get('/api/characters/shame', function(data) {
      this.setState({ characters: data });
    }.bind(this));
  }

  componentDidMount() {
    var currentPath = this.context.router.getCurrentPath();

    if (currentPath.indexOf('shame') > -1) {
      this.fetchShame();
    } else {
      this.fetchCharacters();
    }

    this.setState({ path: currentPath });
  }


  componentDidUpdate() {
    var currentPath = this.context.router.getCurrentPath();

    if (currentPath === this.state.path) {
      return;
    }

    if (currentPath.indexOf('shame') > -1) {
      this.fetchShame();
    } else {
      this.fetchCharacters();
    }

    this.setState({ path: currentPath });
  }

  render() {
    var characterList = this.state.characters.map(function(character, index) {
      return (
        <div key={character.characterId} className='list-group-item animated fadeIn'>
          <div className='media'>
            <span className='position pull-left'>{index + 1}</span>

            <div className='pull-left thumb-lg'>
              <Link to={'/characters/' + character.characterId}>
                <img className='media-object' src={'http://image.eveonline.com/Character/' + character.characterId + '_128.jpg'}/>
              </Link>
            </div>
            <div className='media-body'>
              <h4 className='media-heading'>
                <Link to={'/characters/' + character.characterId}>{character.name}</Link>
              </h4>
              <small>Race: <strong>{character.race}</strong></small>
              <br />
              <small>Bloodline: <strong>{character.bloodline}</strong></small>
              <br />
              <small>Wins: <strong>{character.wins}</strong> Losses: <strong>{character.losses}</strong></small>
            </div>
          </div>
        </div>
      );
    });

    return (
      <div className='container'>
        <div className='list-group'>
          {characterList}
        </div>
      </div>
    );
  }
}

CharacterList.contextTypes = {
  router: React.PropTypes.func.isRequired
};

export default CharacterList;<commit_msg>converted CharacterList to flux architecture<commit_after>import React from 'react';
import {Link} from 'react-router';
import {isEqual} from 'underscore';
import CharacterListStore from '../stores/CharacterListStore';
import CharacterListActions from '../actions/CharacterListActions';

class CharacterList extends React.Component {
  constructor(props) {
    super(props);
    this.state = CharacterListStore.getState();
    this.onChange = this.onChange.bind(this);
  }

  componentDidMount() {
    CharacterListStore.listen(this.onChange);
    CharacterListActions.getCharacters({
      params: this.context.router.getCurrentParams(),
      path: this.context.router.getCurrentPath()
    });
  }

  componentWillUnmount() {
    CharacterListStore.unlisten(this.onChange);
  }

  onChange() {
    this.setState(CharacterListStore.getState());
  }

  componentDidUpdate() {
    if (this.state.prevPath !== this.context.router.getCurrentPath()) {
      CharacterListActions.getCharacters({
        params: this.context.router.getCurrentParams(),
        path: this.context.router.getCurrentPath()
      });
    }
  }

  render() {
    var characterList = this.state.characters.map(function(character, index) {
      return (
        <div key={character.characterId} className='list-group-item animated fadeIn'>
          <div className='media'>
            <span className='position pull-left'>{index + 1}</span>

            <div className='pull-left thumb-lg'>
              <Link to={'/characters/' + character.characterId}>
                <img className='media-object' src={'http://image.eveonline.com/Character/' + character.characterId + '_128.jpg'}/>
              </Link>
            </div>
            <div className='media-body'>
              <h4 className='media-heading'>
                <Link to={'/characters/' + character.characterId}>{character.name}</Link>
              </h4>
              <small>Race: <strong>{character.race}</strong></small>
              <br />
              <small>Bloodline: <strong>{character.bloodline}</strong></small>
              <br />
              <small>Wins: <strong>{character.wins}</strong> Losses: <strong>{character.losses}</strong></small>
            </div>
          </div>
        </div>
      );
    });

    return (
      <div className='container'>
        <div className='list-group'>
          {characterList}
        </div>
      </div>
    );
  }
}

CharacterList.contextTypes = {
  router: React.PropTypes.func.isRequired
};

export default CharacterList;
{'fraction_non_alphanumeric': 0.1518566414188066, 'fraction_numerical': 0.002955847034915943, 'mean_word_length': 2.501940491591203, 'pattern_counts': {'":': 0, '<': 77, '<?xml version=': 0, '>': 81, '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': '6695256', 'n_tokens_mistral': 1569, 'n_tokens_neox': 1535, 'n_words': 269}