<commit_before>import React, { Component, PropTypes } from 'react';
import Relay from 'react-relay';
import { Link, hashHistory } from 'react-router';
import EllipsisText from 'react-ellipsis-text';
import FRC from 'formsy-react-components';

const { Input } = FRC;

class WelcomeView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: false,
      searchInput: null,
      type: 'title',
      searching: false,
      searchResults: [],
    };

    this.renderAllMemoirs = this.renderAllMemoirs.bind(this);
    this.goToMemoir = this.goToMemoir.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
    this.handleChange = this.handleChange.bind(this);

    this.props.relay.forceFetch();
  }

  handleSearch({ searchInput, type }) {
    const searchSet = this.props.viewer.memoirs.items.edges;
    const resultSet = [];
    for (let i = 0, n = searchSet.length; i < n; i++) {
      if (searchSet[i].node[type].toLowerCase().includes(searchInput.toLowerCase())) {
        resultSet.push(searchSet[i].node);
      }
    }
    this.setState({ searchResults: resultSet, searching: true });
  }

  handleChange(e) {
    const { name, value } = e.target;
    this.setState({ [name]: value });
    this.handleSearch({ searchInput: this.state.searchInput, type: this.state.type });
  }

  goToMemoir(memoirId) {
    hashHistory.push(`/memoir/view?memoirId=${memoirId}`);
  }

  renderSearchMemoirs(memoirs) {
    return memoirs.map(memoir => (
      <div
        key={memoir.memoirId}
        className="flex-child"
        onClick={() => this.goToMemoir(memoir.memoirId)}
      >
        <h4 style={{ color: '#000' }}>
          {memoir.title}
        </h4>
        <EllipsisText text={memoir.content} length={39} />
      </div>
    ));
  }

  renderAllMemoirs(memoirs) {
    return memoirs.map(memoir => (
      <div
        key={memoir.node.memoirId}
        className="flex-child"
        onClick={() => this.goToMemoir(memoir.node.memoirId)}
      >
        <h4 style={{ color: '#000' }}>{memoir.node.title}</h4>
        <EllipsisText text={memoir.node.content} length={40} />
      </div>
    ));
  }

  render() {
    let searchForm = null;
    return (
      <div className="flex-container">
        <div style={{ marginBottom: '20px' }}>
          <span
            className="input-group-addon"
            style={{ width: '10%', display: 'inline-block' }}
          >
            <span className="glyphicon glyphicon-search" />
          </span>
          <input
            maxLength="10"
            type="text"
            onChange={this.handleChange}
            name="searchInput"
            className="form-control search-input"
          />
          <select
            name="type"
            defaultValue={this.state.type}
            onChange={this.handleChange}
            className="input-group-addon search-select"
          >
            <option value="">Select...</option><commit_msg>Adds on key up event handler<commit_after>import React, { Component, PropTypes } from 'react';
import Relay from 'react-relay';
import { Link, hashHistory } from 'react-router';
import EllipsisText from 'react-ellipsis-text';
import FRC from 'formsy-react-components';

const { Input } = FRC;

class WelcomeView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: false,
      searchInput: null,
      type: 'title',
      searching: false,
      searchResults: [],
    };

    this.renderAllMemoirs = this.renderAllMemoirs.bind(this);
    this.goToMemoir = this.goToMemoir.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleKeyUp = this.handleKeyUp.bind(this);

    this.props.relay.forceFetch();
  }

  handleSearch({ searchInput, type }) {
    const searchSet = this.props.viewer.memoirs.items.edges;
    const resultSet = [];
    for (let i = 0, n = searchSet.length; i < n; i++) {
      if (searchSet[i].node[type].toLowerCase().includes(searchInput.toLowerCase())) {
        resultSet.push(searchSet[i].node);
      }
    }
    this.setState({ searchResults: resultSet, searching: true });
  }

  /*
  * Add an onChange event on the search input tag and assign this function
  * in order to do the search as the user types
  */
  handleChange(e) {
    const { name, value } = e.target;
    this.setState({ [name]: value });
    this.handleSearch({ searchInput: this.state.searchInput, type: this.state.type });
  }

  handleKeyUp(e) {
    const { name, value } = e.target;
    this.setState({ [name]: value });
    if (e.keyCode === 13) {
      this.handleSearch({ searchInput: this.state.searchInput, type: this.state.type });
    }
  }

  goToMemoir(memoirId) {
    hashHistory.push(`/memoir/view?memoirId=${memoirId}`);
  }

  renderSearchMemoirs(memoirs) {
    return memoirs.map(memoir => (
      <div
        key={memoir.memoirId}
        className="flex-child"
        onClick={() => this.goToMemoir(memoir.memoirId)}
      >
        <h4 style={{ color: '#000' }}>
          {memoir.title}
        </h4>
        <EllipsisText text={memoir.content} length={39} />
      </div>
    ));
  }

  renderAllMemoirs(memoirs) {
    return memoirs.map(memoir => (
      <div
        key={memoir.node.memoirId}
        className="flex-child"
        onClick={() => this.goToMemoir(memoir.node.memoirId)}
      >
        <h4 style={{ color: '#000' }}>{memoir.node.title}</h4>
        <EllipsisText text={memoir.node.content} length={40} />
      </div>
    ));
  }

  render() {
    let searchForm = null;
    return (
      <div className="flex-container">
        <div style={{ marginBottom: '20px' }}>
          <span
            className="input-group-addon"
            style={{ width: '10%', display: 'inline-block' }}
          >
            <span className="glyphicon glyphicon-search" />
          </span>
          <input
            maxLength="10"
            type="text"
            name="searchInput"
            onKeyUp={this.handleKeyUp}
            className="form-control search-input"
          />
          <select
            name="type"
            defaultValue={this.state.type}
            onChange={this.handleChange}
            className="input-group-addon search-select"
          >
            <option value="">Select...</option>
{'fraction_non_alphanumeric': 0.14862096138691883, 'fraction_numerical': 0.006934594168636721, 'mean_word_length': 2.4191810344827585, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 49, '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': '3689859', 'n_tokens_mistral': 2007, 'n_tokens_neox': 2010, 'n_words': 371}