<commit_before>import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Session } from 'meteor/session'
import { createContainer } from 'meteor/react-meteor-data';
import Autocomplete from 'react-autocomplete';
// import algoliasearch from 'algoliasearch';


import { Things } from '../../common/collections/things.js';

const styles = {
  item: {
    padding: '2px 6px',
    cursor: 'default'
  },

  highlightedItem: {
    color: 'white',
    background: 'hsl(200, 50%, 50%)',
    padding: '2px 6px',
    cursor: 'default'
  },

  menu: {
    border: 'solid 1px #ccc'
  }
}

class Search extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: '',
      things: props.things
    };
  }

  componentWillReceiveProps(newProps) {
    const isThingsDefault = "isDefault" in this.state.things[0]

    if(isThingsDefault && newProps.things.length > 0) {
      this.setState({things: newProps.things})
    }
  }

  componentDidMount() {
    ReactDOM.findDOMNode(this.refs.iopleaseSearchAutocomplete).focus();
  }

  handleSearch(event, value, thingId) {
    const thiz = this;
    if(event)
      event.preventDefault()

    const client = window.algoliasearch(
      Meteor.settings.public.AGOLIA_SEARCH.applicationID,
      Meteor.settings.public.AGOLIA_SEARCH.searchApiKey
    );

    const thingsIndex = client.initIndex('things');

    thingsIndex.search(value, (err, content) => {
      if (err) {
        // console.error(err);
        return;
      }

      thiz.setState({things: content.hits})
    });


    this.setState({ value })

    this.props.setQuery(value, thingId);
  }

  renderItem(item, isHighlighted) {
    return (
      <div
        style={isHighlighted ? styles.highlightedItem : styles.item}
        key={item._id}>{item.name}</div>
    )
  }

  render() {
    return (
      <form className='m-t-2' id='ioplease-search'>
        <div className="form-group">
          <Autocomplete
            inputProps={{
                className: "form-control form-control-lg",
                id: "iothing-autocomplete",
                placeholder: "I want to do something with my...",
                type: "text",
              }}
              wrapperStyle={{}}
              wrapperProps={{className: 'ioplease-search-box'}}
              ref="iopleaseSearchAutocomplete"
              value={this.state.value}
              items={this.state.things}
              getItemValue={(item) => item.name}
              onSelect={(value, item) => {
                // set the menu to only the selected item
                this.setState({ value, things: [ item ] })
                this.handleSearch(undefined, value, item._id)
              }}
              onChange={this.handleSearch.bind(this)}
              renderItem={this.renderItem.bind(this)}
          />
        <small className="form-text ioplease-hint">Device name, manufacturer, etc.</small>
        </div>
      </form>
    );
  }
}

export default createContainer(({setQuery}) => {
  Session.setDefault("hits", [{name: "Loading...", isDefault: true}]);

  const client = window.algoliasearch(
    Meteor.settings.public.AGOLIA_SEARCH.applicationID,
    Meteor.settings.public.AGOLIA_SEARCH.searchApiKey
  );

  const thingsIndex = client.initIndex('things');

  thingsIndex.search("", (err, content) => {
    if (err) {
      // console.error(err);
      return;
    }
    Session.set("hits", content.hits)
  });

  return {
    things: Session.get("hits"),
    setQuery
  };
}, Search);<commit_msg>Progressivly conduct search while inputting<commit_after>import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Session } from 'meteor/session'
import { createContainer } from 'meteor/react-meteor-data';
import Autocomplete from 'react-autocomplete';
// import algoliasearch from 'algoliasearch';


import { Things } from '../../common/collections/things.js';

const styles = {
  item: {
    padding: '2px 6px',
    cursor: 'default'
  },

  highlightedItem: {
    color: 'white',
    background: 'hsl(200, 50%, 50%)',
    padding: '2px 6px',
    cursor: 'default'
  },

  menu: {
    border: 'solid 1px #ccc'
  }
}

class Search extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: '',
      things: props.things
    };
  }

  componentWillReceiveProps(newProps) {
    const isThingsDefault = (this.state.things.length > 0) && ("isDefault" in this.state.things[0])

    if(isThingsDefault && newProps.things.length > 0) {
      this.setState({things: newProps.things})
    }
  }

  componentDidMount() {
    ReactDOM.findDOMNode(this.refs.iopleaseSearchAutocomplete).focus();
  }

  handleSearch(event, value, thingId) {
    const thiz = this;
    if(event)
      event.preventDefault()

    const client = window.algoliasearch(
      Meteor.settings.public.AGOLIA_SEARCH.applicationID,
      Meteor.settings.public.AGOLIA_SEARCH.searchApiKey
    );

    const thingsIndex = client.initIndex('things');

    thingsIndex.search(value, (err, content) => {
      if (err) {
        // console.error(err);
        return;
      }

      thiz.setState({things: content.hits})

      if(content.hits.length > 0)
        this.props.setQuery(value, content.hits[0]._id);
    });


    this.setState({ value })

    this.props.setQuery(value, thingId);
  }

  renderItem(item, isHighlighted) {
    return (
      <div
        style={isHighlighted ? styles.highlightedItem : styles.item}
        key={item._id}>{item.name}</div>
    )
  }

  render() {
    return (
      <form className='m-t-2' id='ioplease-search'>
        <div className="form-group">
          <Autocomplete
            inputProps={{
                className: "form-control form-control-lg",
                id: "iothing-autocomplete",
                placeholder: "I want to do something with my...",
                type: "text",
              }}
              wrapperStyle={{}}
              wrapperProps={{className: 'ioplease-search-box'}}
              ref="iopleaseSearchAutocomplete"
              value={this.state.value}
              items={this.state.things}
              getItemValue={(item) => item.name}
              onSelect={(value, item) => {
                // set the menu to only the selected item
                this.setState({ value, things: [ item ] })
                this.handleSearch(undefined, value, item._id)
              }}
              onChange={this.handleSearch.bind(this)}
              renderItem={this.renderItem.bind(this)}
          />
        <small className="form-text ioplease-hint">Device name, manufacturer, etc.</small>
        </div>
      </form>
    );
  }
}

export default createContainer(({setQuery}) => {
  Session.setDefault("hits", [{name: "Loading...", isDefault: true}]);

  const client = window.algoliasearch(
    Meteor.settings.public.AGOLIA_SEARCH.applicationID,
    Meteor.settings.public.AGOLIA_SEARCH.searchApiKey
  );

  const thingsIndex = client.initIndex('things');

  thingsIndex.search("", (err, content) => {
    if (err) {
      // console.error(err);
      return;
    }
    Session.set("hits", content.hits)
  });

  let things = Session.get("hits")
  if(things.length === 0) {

  }

  return {
    things,
    setQuery
  };
}, Search);
{'fraction_non_alphanumeric': 0.1418974499588703, 'fraction_numerical': 0.004661365505895256, 'mean_word_length': 2.4041063929071393, 'pattern_counts': {'":': 0, '<': 21, '<?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': '2754778', 'n_tokens_mistral': 2339, 'n_tokens_neox': 2216, 'n_words': 419}