<commit_before>// Connected component
import React, {Component} from 'react/addons';
import {connect} from 'react-redux';
import {Grid, ProgressBar} from 'react-bootstrap';
import TopNav from './TopNav';

class App extends Component {
  displayName = 'App component'
  _showLoading() {
    let loading = this.props.uiState.loading;
    if (loading.pending !== 0) {
      let percent = (loading.complete / loading.pending) * 100;
      if (percent < 10) {
        percent = 5;
      }
      return (
        <ProgressBar active now={percent} />
      );
    }
  }
  render() {
    return (
      <div>
        <TopNav />
        <Grid>
          {:: this._showLoading()}
          {this.props.children}
        </Grid>
      </div>
    );
  }
}

export default connect((reducers)=> { return {uiState: reducers.uiState}; })(App);<commit_msg>feat: move loading bar to own component<commit_after>// Connected component
import React, {Component} from 'react/addons';
import {connect} from 'react-redux';
import {Grid, ProgressBar} from 'react-bootstrap';
import TopNav from './TopNav';

class App extends Component {
  displayName = 'App component'
  render() {
    let loading = this.props.uiState.loading;
    return (
      <div>
        <TopNav />
        <Grid>
          <LoadingBar pending={loading.pending} complete={loading.complete} />
          {this.props.children}
        </Grid>
      </div>
    );
  }
}

class LoadingBar extends Component {
  displayName = 'LoadingBar component'
  constructor(props) {
    super(props);
    this.state = {pending: props.pending || 0, complete: props.complete || 0};
  }
  componentWillReceiveProps(nextProps) {
    let {pending, complete} = nextProps;
    let setNextProps = ()=> this.setState({pending, complete});
    if (this.props.complete > 0 && complete === 0) {
      this.setState({
        pending: this.props.pending,
        complete: this.props.pending
      });

      setTimeout(setNextProps, 1000);
    } else {
      setNextProps();
    }
  }
  render() {
    let result = null;
    if (this.state.pending !== 0) {
      let percent = (this.state.complete / this.state.pending) * 100;
      if (percent < 10) {
        percent = 5;
      }
      result = (
        <ProgressBar active now={percent} />
      );
    }

    return result;
  }
}

export default connect((reducers)=> { return {uiState: reducers.uiState}; })(App);
{'fraction_non_alphanumeric': 0.14195979899497488, 'fraction_numerical': 0.009212730318257957, 'mean_word_length': 2.549777117384844, 'pattern_counts': {'":': 0, '<': 18, '<?xml version=': 0, '>': 20, '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': '3063222', 'n_tokens_mistral': 743, 'n_tokens_neox': 719, 'n_words': 181}