Search working

src/Gridler/components/Computer.tsx

@@ -1,4 +1,5 @@
 import { CompactSelection } from '@glideapps/glide-data-grid';
+import { useDebouncedValue } from '@mantine/hooks';
 import React, { useEffect, useRef } from 'react';
 
 import { useGridlerStore } from './GridlerStore';
@@ -21,6 +22,7 @@ export const Computer = React.memo(() => {
     ready,
 
     scrollToRowKey,
+    searchStr,
     selectedRowKey,
     setState,
     setStateFN,
@@ -39,6 +41,7 @@ export const Computer = React.memo(() => {
     ready: s.ready,
 
     scrollToRowKey: s.scrollToRowKey,
+    searchStr: s.searchStr,
     selectedRowKey: s.selectedRowKey,
     setState: s.setState,
     setStateFN: s.setStateFN,
@@ -46,6 +49,10 @@ export const Computer = React.memo(() => {
     values: s.values,
   }));
 
+  const debouncedSearchStr = useDebouncedValue(searchStr, 400, {
+    leading: true,
+  });
+
   useEffect(() => {
     const searchSelection = async () => {
       const page_data = getState('_page_data');
@@ -161,6 +168,21 @@ export const Computer = React.memo(() => {
     );
   }, [columns]);
 
+  useEffect(() => {
+    if (debouncedSearchStr === undefined || debouncedSearchStr === null) {
+      return;
+    }
+
+    loadPage(0, 'all').then(() => {
+      getState('refreshCells')?.();
+      getState('_events')?.dispatchEvent?.(
+        new CustomEvent('onSearched', {
+          detail: { search: debouncedSearchStr },
+        })
+      );
+    });
+  }, [debouncedSearchStr]);
+
   useEffect(() => {
     if (!colSort) {
       return;