<commit_before>import React, {Component} from "react";
import {browserHistory, Link} from "react-router";

import {API} from "helpers/consts.js";
import axios from "axios";

import {event, select} from "d3-selection";

import {strip} from "d3plus-text";
import {dataFold} from "d3plus-viz";

function s() {
  return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
}

function uuid() {
  return `${s()}${s()}-${s()}-${s()}-${s()}-${s()}${s()}${s()}`;
}


class Search extends Component {

  constructor(props) {
    super(props);
    this.state = {
      active: false,
      id: uuid(),
      results: []
    };
  }

  onBlur() {
    this.setState({active: false});
  }

  onChange(e) {

    const userQuery = e.target.value;
    const {limit}  = this.props;

    if (userQuery.length === 0) this.setState({active: true, results: []});
    // else if (userQuery.length < 3) return;
    else {
      axios.get(`${API}attrs/search/?q=${strip(userQuery)}`)
        .then(res => {
          let results = dataFold(res.data);
          if (limit) results = results.slice(0, limit);
          this.setState({active: true, results});
        });
    }

  }

  onFocus() {
    this.setState({active: true});
  }

  onToggle() {

    if (this.state.active) this.input.blur();
    else this.input.focus();

  }

  componentDidMount() {

    const {primary} = this.props;
    const {id} = this.state;

    select(document).on(`keydown.${ id }`, () => {

      const {active} = this.state;
      const key = event.keyCode;
      const DOWN = 40,
            ENTER = 13,
            ESC = 27,
            S = 83,
            UP = 38;

      if (primary && !active && key === S && event.target.tagName.toLowerCase() !== "input") {
        event.preventDefault();
        this.onToggle();
      }
      else if (active && key === ESC && event.target === this.input) {
        event.preventDefault();
        this.onToggle();
      }
      else if (active && event.target === this.input) {

        const highlighted = document.querySelector(".highlighted");

        if (key === ENTER && highlighted) {
          this.input.value = highlighted.querySelector("a").innerHTML;
          this.onToggle();
          setTimeout(() => {
            browserHistory.push(highlighted.querySelector("a").href);
          }, 500);
        }
        else if (key === DOWN || key === UP) {

          if (!highlighted) {
            if (key === DOWN) document.querySelector(".results > li:first-child").classList.add("highlighted");
          }
          else {

            const results = document.querySelectorAll(".results > li");

            const currentIndex = [].indexOf.call(results, highlighted);

            if (key === DOWN && currentIndex < results.length - 1) {
              results[currentIndex + 1].classList.add("highlighted");
              highlighted.classList.remove("highlighted");
            }
            else if (key === UP) {
              if (currentIndex > 0) results[currentIndex - 1].classList.add("highlighted");
              highlighted.classList.remove("highlighted");
            }
          }
        }

      }<commit_msg>fixes html content appearing in search box (closes #118)<commit_after>import React, {Component} from "react";
import {browserHistory, Link} from "react-router";

import {API} from "helpers/consts.js";
import axios from "axios";

import {event, select} from "d3-selection";

import {strip} from "d3plus-text";
import {dataFold} from "d3plus-viz";

function s() {
  return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
}

function uuid() {
  return `${s()}${s()}-${s()}-${s()}-${s()}-${s()}${s()}${s()}`;
}


class Search extends Component {

  constructor(props) {
    super(props);
    this.state = {
      active: false,
      id: uuid(),
      results: []
    };
  }

  onBlur() {
    this.setState({active: false});
  }

  onChange(e) {

    const userQuery = e.target.value;
    const {limit}  = this.props;

    if (userQuery.length === 0) this.setState({active: true, results: []});
    // else if (userQuery.length < 3) return;
    else {
      axios.get(`${API}attrs/search/?q=${strip(userQuery)}`)
        .then(res => {
          let results = dataFold(res.data);
          if (limit) results = results.slice(0, limit);
          this.setState({active: true, results});
        });
    }

  }

  onFocus() {
    this.setState({active: true});
  }

  onToggle() {

    if (this.state.active) this.input.blur();
    else this.input.focus();

  }

  componentDidMount() {

    const {primary} = this.props;
    const {id} = this.state;

    select(document).on(`keydown.${ id }`, () => {

      const {active} = this.state;
      const key = event.keyCode;
      const DOWN = 40,
            ENTER = 13,
            ESC = 27,
            S = 83,
            UP = 38;

      if (primary && !active && key === S && event.target.tagName.toLowerCase() !== "input") {
        event.preventDefault();
        this.onToggle();
      }
      else if (active && key === ESC && event.target === this.input) {
        event.preventDefault();
        this.onToggle();
      }
      else if (active && event.target === this.input) {

        const highlighted = document.querySelector(".highlighted");

        if (key === ENTER && highlighted) {
          browserHistory.push(highlighted.querySelector("a").href);
        }
        else if (key === DOWN || key === UP) {

          if (!highlighted) {
            if (key === DOWN) document.querySelector(".results > li:first-child").classList.add("highlighted");
          }
          else {

            const results = document.querySelectorAll(".results > li");

            const currentIndex = [].indexOf.call(results, highlighted);

            if (key === DOWN && currentIndex < results.length - 1) {
              results[currentIndex + 1].classList.add("highlighted");
              highlighted.classList.remove("highlighted");
            }
            else if (key === UP) {
              if (currentIndex > 0) results[currentIndex - 1].classList.add("highlighted");
              highlighted.classList.remove("highlighted");
            }
          }
        }

      }
{'fraction_non_alphanumeric': 0.1716357775987107, 'fraction_numerical': 0.010636583400483481, 'mean_word_length': 2.2441191845269213, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 14, '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': '4899599', 'n_tokens_mistral': 1941, 'n_tokens_neox': 1863, 'n_words': 403}