refactor(Storage): migrate StorageFilter to TS

Author: ariser

src/containers/Storage/Storage.js

@@ -5,7 +5,7 @@ import cn from 'bem-cn-lite';
 import DataTable from '@yandex-cloud/react-data-table';
 import {RadioButton, Label} from '@yandex-cloud/uikit';
 
-import StorageFilter from './StorageFilter/StorageFilter';
+import {StorageFilter} from './StorageFilter';
 import {AutoFetcher} from '../../utils/autofetcher';
 import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
 
@@ -234,6 +234,7 @@ class Storage extends React.Component {
 
     renderControls() {
         const {
+            filter,
             setStorageFilter,
             visibleEntities,
             storageType,
@@ -243,8 +244,9 @@ class Storage extends React.Component {
             <div className={b('controls')}>
                 <div className={b('search')}>
                     <StorageFilter
-                        changeReduxStorageFilter={setStorageFilter}
-                        storageType={storageType}
+                        placeholder={storageType === StorageTypes.groups ? 'Group ID, Pool name' : 'Node ID, FQDN'}
+                        onChange={setStorageFilter}
+                        value={filter}
                     />
                 </div>
                 <RadioButton value={visibleEntities} onUpdate={this.onGroupVisibilityChange}>

src/containers/Storage/StorageFilter/StorageFilter.js

@@ -0,0 +1,52 @@
+import {useEffect, useRef, useState} from 'react';
+
+import {TextInput} from '@yandex-cloud/uikit';
+
+interface StorageFilterProps {
+    className?: string;
+    value?: string;
+    placeholder?: string;
+    onChange?: (value: string) => void;
+    debounce?: number;
+}
+
+export const StorageFilter = (props: StorageFilterProps) => {
+    const {
+        className,
+        value = '',
+        placeholder,
+        onChange,
+        debounce = 200,
+    } = props;
+    const [filterValue, setFilterValue] = useState(value);
+    const timer = useRef<number>();
+
+    useEffect(() => {
+        setFilterValue((prevValue) => {
+            if (prevValue !== value) {
+                return value;
+            }
+
+            return prevValue;
+        });
+    }, [value]);
+
+    const changeFilter = (newValue: string) => {
+        setFilterValue(newValue);
+
+        window.clearTimeout(timer.current);
+        timer.current = window.setTimeout(() => {
+            onChange?.(newValue);
+        }, debounce);
+    };
+
+    return (
+        <TextInput
+            className={className}
+            placeholder={placeholder}
+            value={filterValue}
+            onUpdate={changeFilter}
+            hasClear
+        />
+    );
+}

src/containers/Storage/StorageFilter/StorageFilter.tsx

@@ -0,0 +1 @@
+export * from './StorageFilter';