Skip to content

Instantly share code, notes, and snippets.

View useClickOutside.js
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
leofab86 / searchResults-workerArray.js
Last active May 20, 2019
Fuzzy search autocomplete v1.2.4
View searchResults-workerArray.js
//searchResults.js
export default class SearchResults extends React.Component {
constructor (props) {
super();
this.state = {
searchResults: [],
}
//initiate the worker array:
this.workerArray = new WorkerArrayController({
@leofab86
leofab86 / ww1.js
Last active May 28, 2019
Fuzzy search automcomplete v1.2.4
View ww1.js
//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
leofab86 / workerArrayController.js
Last active May 28, 2019
Fuzzy search automcomplete v1.2.4
View workerArrayController.js
//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
leofab86 / workerArray.js
Last active May 23, 2019
Fuzzy search automcomplete v1.2.4
View workerArray.js
//workerArray.js
const ports = {};
let cache = {};
let queue;
function initiatePort (workerName, port) {
ports[workerName] = port;
const webWorker = ports[workerName];
webWorker.inUse = false;
@leofab86
leofab86 / searchResults-confirm.js
Last active May 23, 2019
Fuzzy search autocomplete v1.2.2
View searchResults-confirm.js
//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
leofab86 / webWorker-confirm.js
Last active May 23, 2019
Fuzzy search autocomplete v1.2.2
View webWorker-confirm.js
//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
leofab86 / webWorker.js
Last active May 23, 2019
Fuzzy search autocomplete v1.2.2
View webWorker.js
//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
leofab86 / searchResults.js
Last active May 23, 2019
Fuzzy search autocomplete v1.2.2
View searchResults.js
//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
leofab86 / searchResults-fetch.js
Last active May 23, 2019
Fuzzy search autocomplete v1.2.0
View searchResults-fetch.js
//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}),