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 worker array:
    this.workerArray = new WorkerArrayController({

leofab86

//ww1.js

self.importScripts('...the search engine script, provides the SearchEngine constructor');

let searchEngine;
let port;

function initiate (data, port) {
  searchEngine = new SearchEngine(data);
  port = port;

leofab86

//workerArrayController.js

export default class WorkerArrayController {
  constructor ({data, handleResults, arraySize}) {
    this.workerArray = new Worker('... path to workerArray.js');
    let i = 1;
    this.webWorkers = {};

    while (i <= arraySize) {
      const workerName = `ww${i}`;

leofab86

//workerArray.js

const ports = {};
let cache = {};
let queue;

function initiatePort (workerName, port) {
  ports[workerName] = port;
  const webWorker = ports[workerName];
  webWorker.inUse = false;

leofab86

//searchResults.js

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

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 = {};
}

leofab86

//webWorker.js

self.importScripts('...the search engine script, provides the SearchEngine constructor');

let searchEngine; 
let cache = {} 
//thought I would add a simple cache... Wait till you see those deletes now :)

function initiateSearchEngine (data) {
  //initiate the search engine with the 13,000 item data set

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

//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}),