<commit_before>import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Link } from 'react-router';
import DatePicker from 'material-ui/lib/date-picker/date-picker';
import Welcome from '../components/Welcome';
import Incident from '../components/Incident';
import styles from './Home.css';
import * as HomeActions from '../actions/HomeActions';
import { getSelectedData, getSelectedDate, getBetterDates } from '../selectors';
const moment = require('moment');

class Home extends Component {
  componentDidMount() {
    const { actions } = this.props;
    actions.fetchPostsIfNeeded();
    actions.updateWelcomeMessage();
  }

  render() {
    const { welcomeMessage, date, actions, selectedData, betterDates } = this.props;
    const closeFn = actions.closeWelcomeMessage;
    const suggestions = selectedData.length !== 0 ? null : (
      <div>
        No incidents happened on {moment(date).format('LL')}, how about trying the following:
          {betterDates.map((x) =>
            <Link to={`/date/${moment(x).format('YYYY-MM-DD')}`}>{moment(x).format('LL')}</Link>
          )}
      </div>
    );

    return (
      <main>
        { welcomeMessage !== false ? <Welcome closeFn={closeFn} /> : null }
        <div className={styles['date-label']}>
          <h2>Date of Incidents</h2>
          <DatePicker
            className={styles['date-picker']}
            value={date}
            onChange={(e, d) => actions.mapDateChange(d)}
          />
        </div>
        { suggestions }
        <div className={styles['incident-container']}>
            {selectedData.map((x) =>
              <div key={x.id} className={styles.incident}><commit_msg>Provide key for better dates<commit_after>import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Link } from 'react-router';
import DatePicker from 'material-ui/lib/date-picker/date-picker';
import Welcome from '../components/Welcome';
import Incident from '../components/Incident';
import styles from './Home.css';
import * as HomeActions from '../actions/HomeActions';
import { getSelectedData, getSelectedDate, getBetterDates } from '../selectors';
const moment = require('moment');

class Home extends Component {
  componentDidMount() {
    const { actions } = this.props;
    actions.fetchPostsIfNeeded();
    actions.updateWelcomeMessage();
  }

  render() {
    const { welcomeMessage, date, actions, selectedData, betterDates } = this.props;
    const closeFn = actions.closeWelcomeMessage;
    const suggestions = selectedData.length !== 0 ? null : (
      <div>
        No incidents happened on {moment(date).format('LL')}, how about trying the following:
          {betterDates.map((x) =>
            <Link key={x} to={`/date/${moment(x).format('YYYY-MM-DD')}`}>{moment(x).format('LL')}</Link>
          )}
      </div>
    );

    return (
      <main>
        { welcomeMessage !== false ? <Welcome closeFn={closeFn} /> : null }
        <div className={styles['date-label']}>
          <h2>Date of Incidents</h2>
          <DatePicker
            className={styles['date-picker']}
            value={date}
            onChange={(e, d) => actions.mapDateChange(d)}
          />
        </div>
        { suggestions }
        <div className={styles['incident-container']}>
            {selectedData.map((x) =>
              <div key={x.id} className={styles.incident}>
{'fraction_non_alphanumeric': 0.1539118065433855, 'fraction_numerical': 0.0017069701280227596, 'mean_word_length': 2.9594594594594597, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 35, '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': '4514495', 'n_tokens_mistral': 1006, 'n_tokens_neox': 991, 'n_words': 234}