From 2420af209340e5ead0f443817aa529df2e912170 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Wed, 1 Feb 2023 16:32:50 +0800
Subject: [PATCH] refactor(console): useDebounce (#3040)

---
 .../components/SourceUsersBox/index.tsx              |  3 +--
 .../components/SourceRolesBox/index.tsx              |  3 +--
 packages/console/src/hooks/use-debounce.ts           | 12 +++++++-----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/console/src/components/RoleUsersTransfer/components/SourceUsersBox/index.tsx b/packages/console/src/components/RoleUsersTransfer/components/SourceUsersBox/index.tsx
index 49a420602..34ca951d6 100644
--- a/packages/console/src/components/RoleUsersTransfer/components/SourceUsersBox/index.tsx
+++ b/packages/console/src/components/RoleUsersTransfer/components/SourceUsersBox/index.tsx
@@ -26,7 +26,6 @@ type Props = {
 };
 
 const pageSize = defaultPageSize;
-const searchDelay = 500;
 
 const SourceUsersBox = ({ roleId, selectedUsers, onChange }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
@@ -52,7 +51,7 @@ const SourceUsersBox = ({ roleId, selectedUsers, onChange }: Props) => {
     debounce(() => {
       setPage(1);
       setKeyword(event.target.value);
-    }, searchDelay);
+    });
   };
 
   const isUserAdded = (user: User) => selectedUsers.findIndex(({ id }) => id === user.id) >= 0;
diff --git a/packages/console/src/components/UserRolesTransfer/components/SourceRolesBox/index.tsx b/packages/console/src/components/UserRolesTransfer/components/SourceRolesBox/index.tsx
index 497593e24..8e2c81514 100644
--- a/packages/console/src/components/UserRolesTransfer/components/SourceRolesBox/index.tsx
+++ b/packages/console/src/components/UserRolesTransfer/components/SourceRolesBox/index.tsx
@@ -26,7 +26,6 @@ type Props = {
 };
 
 const pageSize = defaultPageSize;
-const searchDelay = 500;
 
 const SourceRolesBox = ({ userId, selectedRoles, onChange }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
@@ -56,7 +55,7 @@ const SourceRolesBox = ({ userId, selectedRoles, onChange }: Props) => {
     debounce(() => {
       setPage(1);
       setKeyword(event.target.value);
-    }, searchDelay);
+    });
   };
 
   const isEmpty = !isLoading && !error && dataSource.length === 0;
diff --git a/packages/console/src/hooks/use-debounce.ts b/packages/console/src/hooks/use-debounce.ts
index 65e2de363..c85ef54e2 100644
--- a/packages/console/src/hooks/use-debounce.ts
+++ b/packages/console/src/hooks/use-debounce.ts
@@ -1,7 +1,9 @@
 import { useEffect, useRef } from 'react';
 
-const useDebounce = () => {
-  const timerRef = useRef<NodeJS.Timeout>();
+const defaultDelay = 500;
+
+const useDebounce = (delay: number = defaultDelay) => {
+  const timerRef = useRef<number>();
 
   const clearTimer = () => {
     if (timerRef.current) {
@@ -15,13 +17,13 @@ const useDebounce = () => {
     };
   }, []);
 
-  return (callback: () => void, wait: number) => {
+  return (callback: () => void) => {
     clearTimer();
     // eslint-disable-next-line @silverhand/fp/no-mutation
-    timerRef.current = setTimeout(() => {
+    timerRef.current = window.setTimeout(() => {
       callback();
       clearTimer();
-    }, wait);
+    }, delay);
   };
 };