<commit_before>import React from 'react'

import Rx from 'rx'
import fromHistory from '../lib/Rx.History.js'
Rx.Observable.fromHistory = fromHistory

import assign from 'object-assign'

// Other Components
import GithubOctocat from './GithubOctocat'

import { Command } from '../actions/Command'
import { Page } from '../actions/Page'

const ENTER_KEY_CODE = 13

export default React.createClass({
  handlers: {},

  node: function () {
    // god please add this as a helper function
    //
    // All nodes with a ref value should be included
    // in a this.nodes object, so in this case we
    // can call this.nodes.searchInput and it'll be the node
    //
    // this.nodes should be populated as soon as the component
    // is mounted
    return React.findDOMNode(this.refs.searchInput)
  },

  cleanPath: (path) => (path[0] === "/" ? path.slice(1) : path),
  notEnter: (e) => (e.keyCode !== ENTER_KEY_CODE),

  componentWillMount: function () {
    this.handlers.history = Rx.Observable.fromHistory(this.props.history)
      .pluck("pathname")
      .map( this.cleanPath )
      .subscribe( this.fill )
  },

  componentDidMount: function () {
    // Listen reactively to DOM key up events
    this.handlers.key = Rx.Observable.fromEvent(this.node(), 'keyup')
      .filter( this.notEnter )
      .pluck("target", "value")
      .subscribe( this.navigate )
  },

  componentWillUnmount: function () {
    // unsubscribe all handlers
    // Abstract this pattern into a mixin
    this.handlers.keys( key => key() )
  },

  getInitialState: function () {
    return { query: '' }
  },

  clearButton: function () {
    if (this.state.query.length > 0) {
      return <span className="icon-close" onClick={this.clear} />
    }
  },

  render: function () {
    return (
      <div id="search-bar">
        <span>&gt tldr </span>
        <input
          autoComplete="off"
          autofocus="true"
          placeholder='command'
          ref="searchInput"
          size="10"
          id="search"
          value={this.state.query}
          onChange={this.onChange}
        />
        {this.clearButton()}
        <GithubOctocat path="ostera/tldr.jsx"/>
      </div>
    )
  },

  onChange: function (e) {<commit_msg>Bring back &gt;<commit_after>import React from 'react'

import Rx from 'rx'
import fromHistory from '../lib/Rx.History.js'
Rx.Observable.fromHistory = fromHistory

import assign from 'object-assign'

// Other Components
import GithubOctocat from './GithubOctocat'

import { Command } from '../actions/Command'
import { Page } from '../actions/Page'

const ENTER_KEY_CODE = 13

export default React.createClass({
  handlers: {},

  node: function () {
    // god please add this as a helper function
    //
    // All nodes with a ref value should be included
    // in a this.nodes object, so in this case we
    // can call this.nodes.searchInput and it'll be the node
    //
    // this.nodes should be populated as soon as the component
    // is mounted
    return React.findDOMNode(this.refs.searchInput)
  },

  cleanPath: (path) => (path[0] === "/" ? path.slice(1) : path),
  notEnter: (e) => (e.keyCode !== ENTER_KEY_CODE),

  componentWillMount: function () {
    this.handlers.history = Rx.Observable.fromHistory(this.props.history)
      .pluck("pathname")
      .map( this.cleanPath )
      .subscribe( this.fill )
  },

  componentDidMount: function () {
    // Listen reactively to DOM key up events
    this.handlers.key = Rx.Observable.fromEvent(this.node(), 'keyup')
      .filter( this.notEnter )
      .pluck("target", "value")
      .subscribe( this.navigate )
  },

  componentWillUnmount: function () {
    // unsubscribe all handlers
    // Abstract this pattern into a mixin
    this.handlers.keys( key => key() )
  },

  getInitialState: function () {
    return { query: '' }
  },

  clearButton: function () {
    if (this.state.query.length > 0) {
      return <span className="icon-close" onClick={this.clear} />
    }
  },

  render: function () {
    return (
      <div id="search-bar">
        <span>&gt; tldr </span>
        <input
          autoComplete="off"
          autofocus="true"
          placeholder='command'
          ref="searchInput"
          size="10"
          id="search"
          value={this.state.query}
          onChange={this.onChange}
        />
        {this.clearButton()}
        <GithubOctocat path="ostera/tldr.jsx"/>
      </div>
    )
  },

  onChange: function (e) {
{'fraction_non_alphanumeric': 0.1377996863096572, 'fraction_numerical': 0.003136903428187318, 'mean_word_length': 2.4847775175644027, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 25, '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': '940544', 'n_tokens_mistral': 1411, 'n_tokens_neox': 1374, 'n_words': 352}