<commit_before>import React, { PropTypes, Component } from 'react';
import momentPropTypes from 'react-moment-proptypes';
import DatePicker from 'react-datepicker';

class FilterByDate extends Component {

  render() {
    const { startDate, endDate, startDateChange, endDateChange } = this.props;

    return (
      <ul className="filter-by-date filter-list">
        <li className="start-date">
          <p className="filter-date-label">Start Date:</p>
          <DatePicker
            dateFormat={'YYYY-MM-DD'}
            selected={startDate}
            onChange={date => startDateChange(date)}
          />
        </li>
        <li className="end-date">
          <p className="filter-date-label">End Date:</p>
          <DatePicker
            dateFormat={'YYYY-MM-DD'}
            selected={endDate}
            onChange={date => endDateChange(date)}
          />
        </li>
      </ul>
    );
  }
}

// react-datepicker requires dates to be moment objects<commit_msg>Validate start & end dates in FilterByDate before calling action creators<commit_after>import React, { PropTypes, Component } from 'react';
import momentPropTypes from 'react-moment-proptypes';
import DatePicker from 'react-datepicker';

class FilterByDate extends Component {

  handleStartDateChange(date) {
    if (date.isBefore(this.props.endDate)) {
      this.props.startDateChange(date);
    }
  }

  handleEndDateChange(date) {
    if (date.isAfter(this.props.startDate)) {
      this.props.endDateChange(date);
    }
  }

  render() {
    const { startDate, endDate } = this.props;

    return (
      <ul className="filter-by-date filter-list">
        <li className="start-date">
          <p className="filter-date-label">Start Date:</p>
          <DatePicker
            dateFormat={'YYYY-MM-DD'}
            selected={startDate}
            onChange={date => this.handleStartDateChange(date)}
          />
        </li>
        <li className="end-date">
          <p className="filter-date-label">End Date:</p>
          <DatePicker
            dateFormat={'YYYY-MM-DD'}
            selected={endDate}
            onChange={date => this.handleEndDateChange(date)}
          />
        </li>
      </ul>
    );
  }
}

// react-datepicker requires dates to be moment objects
{'fraction_non_alphanumeric': 0.13089466725429705, 'fraction_numerical': 0.0, 'mean_word_length': 2.393124065769806, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 31, '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': '5619914', 'n_tokens_mistral': 648, 'n_tokens_neox': 649, 'n_words': 132}