leofab86

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

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

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

export default class SearchResults extends React.Component {
  constructor (props) {
    super();
    this.state = {
      searchResults: [],
    }
    //initiate the worker array:
    this.workerArray = new WorkerArrayController({

leofab86

//searchResults.js

componentDidUpdate(prevProps) {
  const {searchTerm, searchEngine} = this.props;
  if(searchTerm && searchTerm !== prevProps.searchTerm) {
    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

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

export function useClickOutside ({container, handler, dependencies, addListenerConditional = true}) {
  useEffect(() => {
    if(addListenerConditional) {
      document.addEventListener('mousedown', handleClickOutside);
    }
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, dependencies);

  function handleClickOutside (e) {
    if(!container.current.contains(e.target)) {

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')  

leofab86

//webWorker.js

self.importScripts('...the search engine script, provides the SearchEngine constructor');
let searchEngine; 
let cache = {}

function initiateSearchEngine (data) {
  searchEngine = new SearchEngine(data);
  cache = {};
}