From 96e12a1d34b617ae7d047fa0215a2eec9ad85a61 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 1 Sep 2020 00:53:53 -0400
Subject: fixed search performance issue by not executing as soon as a
 character is typed.

---
 src/client/views/search/SearchBox.tsx | 26 ++++++++++----------------
 1 file changed, 10 insertions(+), 16 deletions(-)

(limited to 'src')

diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 7ce772748..d08cc7f5b 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -49,6 +49,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     private docsforfilter: Doc[] | undefined = [];
     private realTotalResults: number = 0;
+    private newsearchstring = "";
     private collectionRef = React.createRef<HTMLDivElement>();
 
     @observable _icons: string[] = this._allIcons;
@@ -63,7 +64,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     @observable _pageStart = 0;
     @observable open = false;
     @observable children = 0;
-    @observable newsearchstring = "";
     @computed get filter() { return this._results?.length && (this.currentSelectedCollection?.props.Document._searchFilterDocs || this.currentSelectedCollection?.props.Document._docFilters); }
 
     constructor(props: any) {
@@ -74,7 +74,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     componentDidMount = action(() => {
         if (this._inputRef.current) {
             this._inputRef.current.focus();
-            this._searchbarOpen = true;
         }
         this._disposers.filters = reaction(() => this.props.Document._docFilters,
             (filters: any) => this.setSearchFilter(this.currentSelectedCollection, !this.filter ? undefined : this.docsforfilter));
@@ -86,11 +85,10 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     @computed get currentSelectedCollection() { return CollectionDockingView.Instance; }
 
-    @action.bound
-    onChange(e: React.ChangeEvent<HTMLInputElement>) {
-        this.layoutDoc._searchString = e.target.value;
+    onChange = action((e: React.ChangeEvent<HTMLInputElement>) => {
         this.newsearchstring = e.target.value;
         if (e.target.value === "") {
+            console.log("Reset start");
             this.docsforfilter = undefined;
             this.setSearchFilter(this.currentSelectedCollection, undefined);
             this.resetSearch(false);
@@ -104,7 +102,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
             this._curRequest = undefined;
             this._maxSearchIndex = 0;
         }
-    }
+    })
 
     enter = action((e: React.KeyboardEvent | undefined) => {
         if (!e || e.key === "Enter") {
@@ -372,17 +370,15 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     openSearch(e: React.SyntheticEvent) {
         e.stopPropagation();
         this._results.forEach(result => Doc.BrushDoc(result[0]));
-        this._searchbarOpen = true;
     }
 
-    @action.bound
-    resetSearch = (close: boolean) => {
+    resetSearch = action((close: boolean) => {
         this._results.forEach(result => {
             Doc.UnBrushDoc(result[0]);
             Doc.ClearSearchMatches();
         });
         close && (this.open = this._searchbarOpen = false);
-    }
+    })
 
     @action.bound
     closeResults() {
@@ -481,16 +477,14 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         </div>;
     }
 
-    setSearchFilter = (collectionView: { props: { Document: Doc } }, docsForFilter: Doc[] | undefined) => {
+    setSearchFilter = action((collectionView: { props: { Document: Doc } }, docsForFilter: Doc[] | undefined) => {
         if (collectionView) {
             const docFilters = Cast(this.props.Document._docFilters, listSpec("string"), null);
             collectionView.props.Document._searchFilterDocs = docsForFilter?.length ? new List<Doc>(docsForFilter) : undefined;
             collectionView.props.Document._docFilters = docsForFilter?.length && docFilters?.length ? new List<string>(docFilters) : undefined;
         }
-    }
-    showLogout = () => {
+    })
 
-    }
     render() {
         const myDashboards = DocListCast(CurrentUserUtils.MyDashboards.data);
         return (
@@ -520,8 +514,8 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                         </div>
                     </div>
                     <div className="searchBox-query" >
-                        <input value={this.newsearchstring} autoComplete="off" onChange={this.onChange} type="text" placeholder="Search..." id="search-input" ref={this._inputRef}
-                            className="searchBox-barChild searchBox-input" onPointerDown={this.openSearch} onKeyPress={this.enter} onFocus={this.openSearch}
+                        <input defaultValue={""} autoComplete="off" onChange={this.onChange} type="text" placeholder="Search..." id="search-input" ref={this._inputRef}
+                            className="searchBox-barChild searchBox-input" onKeyPress={this.enter}
                             style={{ padding: 1, paddingLeft: 20, paddingRight: 60, color: "black", height: 20, width: 250 }} />
                         <div style={{ display: "flex", alignItems: "center" }}>
                             <div style={{ position: "absolute", left: 10 }}>
-- 
cgit v1.2.3-70-g09d2