Move setSearch debounce to parent component

deephaven · Jun 6, 2023 · d842961 · d842961
1 parent 02b8d4f
commit d842961
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 16 deletions.
diff --git a/packages/console/src/command-history/CommandHistory.tsx b/packages/console/src/command-history/CommandHistory.tsx
@@ -1,4 +1,5 @@
 import React, { ChangeEvent, Component, ReactElement, RefObject } from 'react';
+import debounce from 'lodash.debounce';
 import {
   ContextActions,
   ItemList,
@@ -55,6 +56,7 @@ interface CommandHistoryState {
   offset: number;
   selectedRanges: Range[];
   searchText: string;
+  debouncedSearchText: string;
 }
 
 class CommandHistory extends Component<
@@ -65,6 +67,8 @@ class CommandHistory extends Component<
 
   static MAX_SELECTION_COUNT = 10000;
 
+  static SET_SEARCH_DEBOUNCE_MS = 150;
+
   static menuGroups = {
     send: ContextActions.groups.medium + 100,
   };
@@ -189,10 +193,12 @@ class CommandHistory extends Component<
       offset: 0,
       selectedRanges: [],
       searchText: '',
+      debouncedSearchText: '',
     };
   }
 
   componentWillUnmount(): void {
+    this.debouncedSearchChange.cancel();
     this.pending.cancel();
   }
 
@@ -271,6 +277,14 @@ class CommandHistory extends Component<
       .catch(log.error);
   }
 
+  debouncedSearchChange = debounce((): void => {
+    this.setState(({ searchText }) => ({
+      debouncedSearchText: searchText,
+      // clear selected range, as old selection could be filtered from list
+      selectedRanges: [],
+    }));
+  }, CommandHistory.SET_SEARCH_DEBOUNCE_MS);
+
   sendToNotebook(): void {
     this.getSelectedCommandText()
       .then(commandText => {
@@ -316,8 +330,8 @@ class CommandHistory extends Component<
   }
 
   handleSearchChange(e: ChangeEvent<HTMLInputElement>): void {
-    // clear selected range, as old selection could be filtered from list
-    this.setState({ searchText: e.target.value, selectedRanges: [] });
+    this.setState({ searchText: e.target.value });
+    this.debouncedSearchChange();
   }
 
   handleViewportUpdate({
@@ -361,6 +375,7 @@ class CommandHistory extends Component<
       actions,
       historyActions,
       searchText,
+      debouncedSearchText,
       top,
       bottom,
       items,
@@ -404,7 +419,7 @@ class CommandHistory extends Component<
             table={table}
             top={top}
             bottom={bottom}
-            search={searchText}
+            search={debouncedSearchText}
             onUpdate={this.handleViewportUpdate}
           />
           <ContextActions actions={actions} />

diff --git a/packages/console/src/command-history/CommandHistoryViewportUpdater.tsx b/packages/console/src/command-history/CommandHistoryViewportUpdater.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useMemo } from 'react';
-import debounce from 'lodash.debounce';
 import throttle from 'lodash.throttle';
 import {
   StorageTableViewport,
@@ -22,8 +21,6 @@ export type CommandHistoryViewportUpdaterProps = {
   onUpdate: ViewportUpdateCallback<CommandHistoryStorageItem>;
 };
 
-const SET_SEARCH_DEBOUNCE_MS = 150;
-
 const UPDATE_DELAY = 150;
 
 const ROW_BUFFER_PAGES = 3;
@@ -39,14 +36,6 @@ function CommandHistoryViewportUpdater({
   isReversed = false,
   onUpdate,
 }: CommandHistoryViewportUpdaterProps): null {
-  const debounceSetSearch = useMemo(
-    () =>
-      debounce((searchText?: string) => {
-        table.setSearch(searchText ?? '');
-      }, SET_SEARCH_DEBOUNCE_MS),
-    [table]
-  );
-
   const throttledUpdateViewport = useMemo(
     () =>
       throttle((viewport: StorageTableViewport) => {
@@ -87,9 +76,9 @@ function CommandHistoryViewportUpdater({
 
   useEffect(
     function setSearchText() {
-      debounceSetSearch(search);
+      table.setSearch(search ?? '');
     },
-    [debounceSetSearch, search]
+    [table, search]
   );
   useEffect(
     function updateViewport() {