<commit_before>import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { fetchQuestion } from './actions/questionActions';
import fetchAwards, { updateAward } from './actions/awardActions';
import Options from './containers/OptionsPanel';
import Question from './containers/QuestionPanel';

class App extends Component {
  componentWillReceiveProps(nextProps) {
    if (nextProps.shouldUpdateQuestion) {
      if (nextProps.award.number === this.props.award.number) {
        this.props.updateAward();
      } else {
        this.props.fetchQuestion(this.props.award.level);
      }
    }
  }
  render() {
    return (
      <div>
        <button onClick={() => {
          this.props.fetchQuestion(this.props.award.level);
          this.props.fetchAwards();
        }}>Carregar</button>
        <div>
          {this.props.questionData.questionLoadCompleted && <Question />}
          {this.props.questionData.questionLoadCompleted && <Options />}
        </div>
        <div>
          <table>
            <thead>
              <tr>
                <th>Right</th>
                <th>Stop</th>
                <th>Error</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{this.props.award.right}</td>
                <td>{this.props.award.stop}</td>
                <td>{this.props.award.wrong}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}
function mapStateToProps(state) {
  return {
    questionData: state.questionData,
    award: state.awardData.value,
    shouldUpdateQuestion: state.questionData.shouldUpdateQuestion,
  };
}

const mapDispatchToProps = dispatch =>
  bindActionCreators({
    fetchQuestion,
    fetchAwards,
    updateAward,
  }, dispatch);

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(App);

App.propTypes = {
  fetchQuestion: PropTypes.func.isRequired,
  fetchAwards: PropTypes.func.isRequired,
  updateAward: PropTypes.func.isRequired,
  shouldUpdateQuestion: PropTypes.bool.isRequired,
  award: PropTypes.shape({
    number: PropTypes.number.isRequired,
    right: PropTypes.number.isRequired,
    stop: PropTypes.number.isRequired,
    wrong: PropTypes.number.isRequired,
    level: PropTypes.number.isRequired,
  }).isRequired,
};<commit_msg>add props to manage user state<commit_after>import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { fetchQuestion } from './actions/questionActions';
import fetchAwards, { updateAward } from './actions/awardActions';
import Options from './containers/OptionsPanel';
import Question from './containers/QuestionPanel';

class App extends Component {
  componentWillReceiveProps(nextProps) {
    if (nextProps.willUserStop) {
      console.log('voce parou');
    }
    if (nextProps.shouldSkipQuestion) {
      console.log('voce pulou');
    }
    if (nextProps.userFailed) {
      console.log('voce errou');
    }
    if (nextProps.shouldUpdateQuestion) {
      if (nextProps.award.number === this.props.award.number) {
        this.props.updateAward();
      } else {
        this.props.fetchQuestion(this.props.award.level);
      }
    }
  }
  render() {
    return (
      <div>
        <button onClick={() => {
          this.props.fetchQuestion(this.props.award.level);
          this.props.fetchAwards();
        }}
        >Carregar</button>
        <div>
          {this.props.questionData.questionLoadCompleted && <Question />}
          {this.props.questionData.questionLoadCompleted && <Options />}
        </div>
        <div>
          <table>
            <thead>
              <tr>
                <th>Right</th>
                <th>Stop</th>
                <th>Error</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{this.props.award.right}</td>
                <td>{this.props.award.stop}</td>
                <td>{this.props.award.wrong}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    questionData: state.questionData,
    award: state.awardData.value,
    shouldUpdateQuestion: state.questionData.shouldUpdateQuestion,
  };
}

const mapDispatchToProps = dispatch =>
  bindActionCreators({
    fetchQuestion,
    fetchAwards,
    updateAward,
  }, dispatch);

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(App);


App.propTypes = {
  fetchQuestion: PropTypes.func.isRequired,
  fetchAwards: PropTypes.func.isRequired,
  updateAward: PropTypes.func.isRequired,
  shouldUpdateQuestion: PropTypes.bool.isRequired,
  award: PropTypes.shape({
    number: PropTypes.number.isRequired,
    right: PropTypes.number.isRequired,
    stop: PropTypes.number.isRequired,
    wrong: PropTypes.number.isRequired,
    level: PropTypes.number.isRequired,
  }).isRequired,
  willUserStop: PropTypes.bool,
  shouldSkipQuestion: PropTypes.bool,
  userFailed: PropTypes.bool,
};

App.defaultProps = {
  willUserStop: false,
  shouldSkipQuestion: false,
  userFailed: false,
};
{'fraction_non_alphanumeric': 0.12936732766761094, 'fraction_numerical': 0.0, 'mean_word_length': 2.461437908496732, 'pattern_counts': {'":': 0, '<': 67, '<?xml version=': 0, '>': 71, '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': '3282987', 'n_tokens_mistral': 1575, 'n_tokens_neox': 1576, 'n_words': 280}