From 0a68db1f3895c0c5463b40a56e57aaf0269f96b8 Mon Sep 17 00:00:00 2001
From: Faheem Abrar <faheem.abrar@momentumtravel.com>
Date: Fri, 13 Dec 2019 10:55:47 -0500
Subject: [PATCH] Add debounce for 300 ms when searching

---
 src/components/SearchBox/SearchBox.tsx | 22 +++++++++++++++-------
 src/utils/__tests__/openapi.test.ts    |  4 +++-
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx
index e6ade2c3..5553a28a 100644
--- a/src/components/SearchBox/SearchBox.tsx
+++ b/src/components/SearchBox/SearchBox.tsx
@@ -7,6 +7,7 @@ import { MenuItem } from '../SideMenu/MenuItem';
 import { MarkerService } from '../../services/MarkerService';
 import { SearchResult } from '../../services/SearchWorker.worker';
 
+import { bind, debounce } from 'decko';
 import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar';
 import {
   ClearIcon,
@@ -99,6 +100,14 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
     this.props.marker.mark(term);
   }
 
+  @bind
+  @debounce(300)
+  searchCallback(searchTerm: string) {
+    this.props.search.search(searchTerm).then(res => {
+      this.setResults(res, searchTerm);
+    });
+  }
+
   search = (event: React.ChangeEvent<HTMLInputElement>) => {
     const q = event.target.value;
     if (q.length < 3) {
@@ -106,13 +115,12 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
       return;
     }
 
-    this.setState({
-      term: q,
-    });
-
-    this.props.search.search(event.target.value).then(res => {
-      this.setResults(res, q);
-    });
+    this.setState(
+      {
+        term: q,
+      },
+      () => this.searchCallback(this.state.term),
+    );
   };
 
   render() {
diff --git a/src/utils/__tests__/openapi.test.ts b/src/utils/__tests__/openapi.test.ts
index 244ab63c..db0fe388 100644
--- a/src/utils/__tests__/openapi.test.ts
+++ b/src/utils/__tests__/openapi.test.ts
@@ -387,7 +387,9 @@ describe('Utils', () => {
       expect(pluralizeType('objects (Pet)')).toEqual('objects (Pet)');
       expect(pluralizeType('strings <email>')).toEqual('strings <email>');
       expect(pluralizeType('objects or strings')).toEqual('objects or strings');
-      expect(pluralizeType('objects (Pet) or numbers <int64>')).toEqual('objects (Pet) or numbers <int64>');
+      expect(pluralizeType('objects (Pet) or numbers <int64>')).toEqual(
+        'objects (Pet) or numbers <int64>',
+      );
     });
   });