leofab86

render () {
    return (
      <Autocomplete
        value={this.state.searchTerm}
        items={this.getSearchResults()}
        renderMenu={this.reactVirtualizedList}
        renderItem={this.renderItem}
        getItemValue={ item => item.name }
        onChange={(e, value) => this.setState({searchTerm: value})}
      />

leofab86

getSearchResults = () => {
  const {searchTerm} = this.state;
  return searchTerm ? this.searchEngine.search(searchTerm) : []
  // searchEngine.search is the expensive search algorithm
};

leofab86

//autocomplete.js

render () {
  return (
    <div>
      <input
        onChange={ e => this.setState({searchTerm: e.target.value})}
        value={this.state.searchTerm}/>
      
      <SearchResults

leofab86

//searchResults.js

componentDidUpdate(prevProps) {
  const {searchTerm, searchEngine} = this.props;
  if(searchTerm && searchTerm !== prevProps.searchTerm) {
    this.setState({
      searchResults: searchEngine.search(searchTerm)
    })
  }
}

leofab86

//searchResults.js

componentDidUpdate(prevProps) {
  const {searchTerm, searchEngine} = this.props;
  if(searchTerm && searchTerm !== prevProps.searchTerm) {
    /* stick the update with the expensive search method into
    a promise callback: */
    Promise.resolve().then(() => {
      this.setState({
        searchResults: searchEngine.search(searchTerm)

leofab86

//searchResults.js

componentDidUpdate(prevProps) {
  const {searchTerm, searchEngine} = this.props;
  if(searchTerm && searchTerm !== prevProps.searchTerm) {
    /* stick the update with the expensive search method into
    a setTimeout callback: */
    const setTimeoutCallback = () => {
      this.setState({
        searchResults: searchEngine.search(searchTerm)

leofab86

//autocomplete.js
render () {
  return (
    <div>
      <input
        onChange={ e => this.setState({searchTerm: e.target.value})}
        value={this.state.searchTerm}/>
      
      <SearchResults
        searchEngine={this.props.searchEngine}

leofab86

app.route('/prep-staging/testSearch')
  .post(bodyParser.json(), (req, res) => {

    const {data, searchTerm} = req.body

    const engine = new SearchEngine(data)

    const searchResults = engine.search(searchTerm)

    res.send({searchResult})

leofab86

//searchResults.js

componentDidUpdate(prevProps) {
  const {searchTerm, searchEngine, data} = this.props;
  if(searchTerm && searchTerm !== prevProps.searchTerm) {
    /* ping the search route with the searchTerm and update state
    with the results when they return: */
    fetch(`testSearch`, {
      method: 'POST',
      body: JSON.stringify({data, searchTerm}),

leofab86

//searchResults.js

export default class SearchResults extends React.Component {
  constructor (props) {
    super();
    this.state = {
      searchResults: [],
    }
    //initiate the webworker:
    this.webWorker = new Worker('...path to webWorker.js')