[DOP-21927] rewrite useDebouncedState

Author: Zabilsya

src/shared/hooks/useDebouncedState/index.ts

@@ -1,31 +1,30 @@
-import { SetStateAction, useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
-/**
- * Hook for handling debounced state
- *
- * @param initialValue - initial state
- * @param delay - state change timeout
- */
-export function useDebouncedState<T>(initialValue: T, delay: number) {
+import { UseDebouncedStateProps } from './types';
+
+/** Hook for handling debounced state */
+export function useDebouncedState<T>({ initialValue, delay, onDebounce = () => undefined }: UseDebouncedStateProps<T>) {
   const [value, setValue] = useState(initialValue);
   const timeoutRef = useRef<number | null>(null);
 
   const clearTimeout = () => window.clearTimeout(timeoutRef.current!);
   useEffect(() => clearTimeout, []);
 
   const setDebouncedValue = useCallback(
-    (newValue: SetStateAction<T>) => {
+    (newValue: T) => {
       clearTimeout();
       timeoutRef.current = window.setTimeout(() => {
         setValue(newValue);
+        onDebounce(newValue);
       }, delay);
     },
-    [delay],
+    [delay, onDebounce],
   );
 
   const setValueImmediately = (newValue: T) => {
     clearTimeout();
     setValue(newValue);
+    onDebounce(newValue);
   };
 
   return { value, setValue: setValueImmediately, setDebouncedValue };

src/shared/hooks/useDebouncedState/types.ts

@@ -0,0 +1,13 @@
+/**
+ * Interface as Props type of "useDebouncedState" hook.
+ *
+ * @template T - Value type.
+ */
+export interface UseDebouncedStateProps<T> {
+  /** Initial value */
+  initialValue: T;
+  /** Debounce timeout */
+  delay: number;
+  /** Callback for handling debounced state change */
+  onDebounce?: (value: T) => void;
+}

src/shared/ui/ManagedSelect/ManagedSelect.tsx

@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import { Select, Spin } from 'antd';
 import { DefaultOptionType } from 'antd/lib/select';
+import { useDebouncedState } from '@shared/hooks';
 
 import { ManagedSelectProps } from './types';
-import { useGetList, useGetSelectedItem, useHandleSelectEvents, usePrepareOptions, useSearch } from './hooks';
+import { useGetList, useGetSelectedItem, useHandleSelectEvents, usePrepareOptions } from './hooks';
+import { SEARCH_VALUE_CHANGE_DELAY, SEARCH_VALUE_DEFAULT } from './constants';
 
 /** Select component for infinite pagination of data in a dropdown */
 export const ManagedSelect = <T, V extends DefaultOptionType['value']>({
@@ -21,7 +23,11 @@ export const ManagedSelect = <T, V extends DefaultOptionType['value']>({
 }: ManagedSelectProps<T, V>) => {
   const [hasTouched, setTouched] = useState(false);
 
-  const { searchValue, setSearchValue, handleSearch } = useSearch({ onSearch });
+  const {
+    value: searchValue,
+    setValue: setSearchValue,
+    setDebouncedValue: handleDebouncedSearchValue,
+  } = useDebouncedState({ initialValue: SEARCH_VALUE_DEFAULT, delay: SEARCH_VALUE_CHANGE_DELAY, onDebounce: onSearch });
 
   const { data, hasNextPage, fetchNextPage, isLoading, isFetching } = useGetList({
     queryKey,
@@ -62,7 +68,7 @@ export const ManagedSelect = <T, V extends DefaultOptionType['value']>({
       showSearch
       onDropdownVisibleChange={handleOpenDropdown}
       onSelect={handleSelect}
-      onSearch={handleSearch}
+      onSearch={handleDebouncedSearchValue}
       filterOption={false}
       // render notFoundContent when first request data is in progress
       options={isLoading ? [] : options}

src/shared/ui/ManagedSelect/hooks/index.ts

@@ -1,5 +1,4 @@
 export * from './useGetList';
 export * from './useGetSelectedItem';
-export * from './useSearch';
 export * from './useHandleSelectEvents';
 export * from './usePrepareOptions';