refactor(hooks): add useDebouncedSearch hook and use it enitre app

x0sina · x0sina · commit 860e8117872f · 2025-11-22T11:12:04.000+03:30
diff --git a/dashboard/src/components/admins/filters.tsx b/dashboard/src/components/admins/filters.tsx
@@ -4,9 +4,9 @@ import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, Pagi
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import useDirDetection from '@/hooks/use-dir-detection'
 import { cn } from '@/lib/utils'
-import { debounce } from 'es-toolkit'
+import { useDebouncedSearch } from '@/hooks/use-debounced-search'
 import { RefreshCw, SearchIcon, X } from 'lucide-react'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useGetAdmins } from '@/service/api'
 import { LoaderCircle } from 'lucide-react'
@@ -29,41 +29,25 @@ export function Filters<T extends BaseFilters>({ filters, onFilterChange }: Filt
   const { t } = useTranslation()
   const dir = useDirDetection()
   const { refetch } = useGetAdmins(filters)
-  const [search, setSearch] = useState(filters.username || '')
-  const onFilterChangeRef = useRef(onFilterChange)
-
-  // Keep the ref in sync with the prop
-  onFilterChangeRef.current = onFilterChange
-
-  // Debounced search function
-  const setSearchField = useCallback(
-    debounce((value: string) => {
-      onFilterChangeRef.current({
-        username: value || undefined,
-        offset: 0, // Reset to first page when search is updated
-      } as Partial<T>)
-    }, 300),
-    [],
-  )
+  const { search, debouncedSearch, setSearch } = useDebouncedSearch(filters.username || '', 300)
 
-  // Cleanup on unmount
+  // Update filters when debounced search changes
   useEffect(() => {
-    return () => {
-      setSearchField.cancel()
-    }
-  }, [setSearchField])
+    onFilterChange({
+      username: debouncedSearch || undefined,
+      offset: 0,
+    } as Partial<T>)
+  }, [debouncedSearch, onFilterChange])
 
   // Handle input change
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value)
-    setSearchField(e.target.value)
   }
 
   // Clear search field
   const clearSearch = () => {
     setSearch('')
-    setSearchField.cancel()
-    onFilterChangeRef.current({
+    onFilterChange({
       username: undefined,
       offset: 0,
     } as Partial<T>)
diff --git a/dashboard/src/components/dialogs/user-online-stats-modal.tsx b/dashboard/src/components/dialogs/user-online-stats-modal.tsx
@@ -1,4 +1,5 @@
-import { useState, useEffect, useMemo, useCallback, useRef } from 'react'
+import { useState, useEffect, useMemo, useCallback } from 'react'
+import { useDebouncedSearch } from '@/hooks/use-debounced-search'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -150,11 +151,17 @@ EmptyState.displayName = 'EmptyState'
 export default function UserOnlineStatsModal({ isOpen, onOpenChange, nodeId, nodeName }: UserOnlineStatsDialogProps) {
   const { t } = useTranslation()
   const dir = useDirDetection()
-  const [searchTerm, setSearchTerm] = useState('')
   const [specificUsername, setSpecificUsername] = useState('')
   const [refreshing, setRefreshing] = useState(false)
   const [viewingIPs, setViewingIPs] = useState<string | null>(null)
-  const searchTimeoutRef = useRef<NodeJS.Timeout>()
+  const { search: searchTerm, debouncedSearch: debouncedSearchTerm, setSearch: setSearchTerm } = useDebouncedSearch('', 500)
+
+  // Update specificUsername when debounced search changes
+  useEffect(() => {
+    if (debouncedSearchTerm?.trim()) {
+      setSpecificUsername(debouncedSearchTerm.trim())
+    }
+  }, [debouncedSearchTerm])
 
   // Reset state when modal closes
   useEffect(() => {
@@ -163,22 +170,8 @@ export default function UserOnlineStatsModal({ isOpen, onOpenChange, nodeId, nod
       setSpecificUsername('')
       setViewingIPs(null)
       setRefreshing(false)
-
-      // Clear any pending search timeout
-      if (searchTimeoutRef.current) {
-        clearTimeout(searchTimeoutRef.current)
-      }
     }
-  }, [isOpen])
-
-  // Cleanup timeout on unmount
-  useEffect(() => {
-    return () => {
-      if (searchTimeoutRef.current) {
-        clearTimeout(searchTimeoutRef.current)
-      }
-    }
-  }, [])
+  }, [isOpen, setSearchTerm])
 
   // Memoize query options to prevent unnecessary re-renders
   const userStatsQueryOptions = useMemo(
@@ -285,22 +278,10 @@ export default function UserOnlineStatsModal({ isOpen, onOpenChange, nodeId, nod
     setSpecificUsername(searchTerm.trim())
   }, [searchTerm, t])
 
-  // Debounced search to reduce API calls
+  // Handle search input (debounced automatically by hook)
   const handleSearchInput = useCallback((value: string) => {
     setSearchTerm(value)
-
-    // Clear existing timeout
-    if (searchTimeoutRef.current) {
-      clearTimeout(searchTimeoutRef.current)
-    }
-
-    // Set new timeout for debounced search
-    searchTimeoutRef.current = setTimeout(() => {
-      if (value.trim()) {
-        setSpecificUsername(value.trim())
-      }
-    }, 500) // 500ms delay
-  }, [])
+  }, [setSearchTerm])
 
   const handleRefresh = useCallback(async () => {
     setRefreshing(true)
diff --git a/dashboard/src/components/nodes/node-filters.tsx b/dashboard/src/components/nodes/node-filters.tsx
@@ -2,9 +2,9 @@ import { Input } from '@/components/ui/input'
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '@/components/ui/pagination'
 import useDirDetection from '@/hooks/use-dir-detection'
 import { cn } from '@/lib/utils'
-import { debounce } from 'es-toolkit'
+import { useDebouncedSearch } from '@/hooks/use-debounced-search'
 import { SearchIcon, X, RefreshCw } from 'lucide-react'
-import { useState, useRef, useEffect } from 'react'
+import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RefetchOptions } from '@tanstack/react-query'
 import { LoaderCircle } from 'lucide-react'
@@ -24,35 +24,22 @@ interface NodeFiltersProps {
 export const NodeFilters = ({ filters, onFilterChange, refetch, isFetching }: NodeFiltersProps) => {
   const { t } = useTranslation()
   const dir = useDirDetection()
-  const [search, setSearch] = useState(filters.search || '')
-
-  const onFilterChangeRef = useRef(onFilterChange)
-  onFilterChangeRef.current = onFilterChange
-
-  const debouncedFilterChangeRef = useRef(
-    debounce((value: string) => {
-      onFilterChangeRef.current({
-        search: value || undefined,
-        offset: 0,
-      })
-    }, 300),
-  )
+  const { search, debouncedSearch, setSearch } = useDebouncedSearch(filters.search || '', 300)
 
+  // Update filters when debounced search changes
   useEffect(() => {
-    return () => {
-      debouncedFilterChangeRef.current.cancel()
-    }
-  }, [])
+    onFilterChange({
+      search: debouncedSearch || undefined,
+      offset: 0,
+    })
+  }, [debouncedSearch, onFilterChange])
 
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value
-    setSearch(value)
-    debouncedFilterChangeRef.current(value)
+    setSearch(e.target.value)
   }
 
   const clearSearch = () => {
     setSearch('')
-    debouncedFilterChangeRef.current.cancel()
     onFilterChange({
       search: undefined,
       offset: 0,
diff --git a/dashboard/src/components/users/filters.tsx b/dashboard/src/components/users/filters.tsx
@@ -7,9 +7,9 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator, DropdownMenuLabel } from '@/components/ui/dropdown-menu'
 import useDirDetection from '@/hooks/use-dir-detection'
 import { cn } from '@/lib/utils'
-import { debounce } from 'es-toolkit'
+import { useDebouncedSearch } from '@/hooks/use-debounced-search'
 import { RefreshCw, SearchIcon, Filter, X, ArrowUpDown, User, Calendar, ChartPie, ChevronDown, Check, Clock } from 'lucide-react'
-import { useState, useRef, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useGetUsers, UserStatus } from '@/service/api'
 import { RefetchOptions } from '@tanstack/react-query'
@@ -86,10 +86,11 @@ interface FiltersProps {
 export const Filters = ({ filters, onFilterChange, refetch, autoRefetch, advanceSearchOnOpen, onClearAdvanceSearch, handleSort }: FiltersProps) => {
   const { t } = useTranslation()
   const dir = useDirDetection()
-  const [search, setSearch] = useState(filters.search || '')
   const [isRefreshing, setIsRefreshing] = useState(false)
   const [autoRefreshInterval, setAutoRefreshInterval] = useState<number>(() => getUsersAutoRefreshIntervalSeconds())
   const { refetch: queryRefetch, isFetching } = useGetUsers(filters)
+  const { search, debouncedSearch, setSearch } = useDebouncedSearch(filters.search || '', 300)
+  
   const refetchUsers = useCallback(
     async (showLoading = false, isAutoRefresh = false) => {
       if (showLoading) {
@@ -138,39 +139,23 @@ export const Filters = ({ filters, onFilterChange, refetch, autoRefetch, advance
         ? t('autoRefresh.shortSeconds', { count: autoRefreshInterval })
         : t('autoRefresh.shortMinutes', { count: Math.round(autoRefreshInterval / 60) })
   const currentAutoRefreshDescription = t(currentAutoRefreshOption.labelKey)
-  const onFilterChangeRef = useRef(onFilterChange)
 
-  // Keep the ref in sync with the prop
-  onFilterChangeRef.current = onFilterChange
-
-  // Create debounced function using es-toolkit, stored in ref to avoid recreation
-  const debouncedFilterChangeRef = useRef(
-    debounce((value: string) => {
-      onFilterChangeRef.current({
-        search: value,
-        offset: 0,
-      })
-    }, 300),
-  )
-
-  // Cleanup on unmount
+  // Update filters when debounced search changes
   useEffect(() => {
-    return () => {
-      debouncedFilterChangeRef.current.cancel()
-    }
-  }, [])
+    onFilterChange({
+      search: debouncedSearch || '',
+      offset: 0,
+    })
+  }, [debouncedSearch, onFilterChange])
 
   // Handle input change
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value
-    setSearch(value)
-    debouncedFilterChangeRef.current(value)
+    setSearch(e.target.value)
   }
 
   // Clear search field
   const clearSearch = () => {
     setSearch('')
-    debouncedFilterChangeRef.current.cancel()
     onFilterChange({
       search: '',
       offset: 0,
diff --git a/dashboard/src/hooks/use-debounced-search.ts b/dashboard/src/hooks/use-debounced-search.ts
@@ -0,0 +1,31 @@
+import { useState, useRef, useEffect, useCallback } from 'react'
+import { debounce } from 'es-toolkit'
+
+export function useDebouncedSearch(initialValue: string = '', delay: number = 300) {
+  const [search, setSearch] = useState(initialValue)
+  const [debouncedSearch, setDebouncedSearch] = useState<string | undefined>(undefined)
+
+  const debouncedSearchRef = useRef(
+    debounce((value: string) => {
+      setDebouncedSearch(value || undefined)
+    }, delay),
+  )
+
+  useEffect(() => {
+    return () => {
+      debouncedSearchRef.current.cancel()
+    }
+  }, [])
+
+  const handleSearchChange = useCallback((value: string) => {
+    setSearch(value)
+    debouncedSearchRef.current(value)
+  }, [])
+
+  return {
+    search,
+    debouncedSearch,
+    setSearch: handleSearchChange,
+  }
+}
+
diff --git a/dashboard/src/pages/_dashboard._index.tsx b/dashboard/src/pages/_dashboard._index.tsx
@@ -21,7 +21,7 @@ import type { AdminDetails, UserResponse } from '@/service/api'
 import { useGetAdmins, useGetCurrentAdmin, useGetSystemStats } from '@/service/api'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useQueryClient } from '@tanstack/react-query'
-import { debounce } from 'es-toolkit'
+import { useDebouncedSearch } from '@/utils/use-debounced-search'
 import { Bookmark, Check, ChevronDown, Loader2, Sigma, UserCog, UserRound } from 'lucide-react'
 import { lazy, Suspense, useCallback, useEffect, useRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
@@ -53,25 +53,21 @@ const Dashboard = () => {
 
   // Admin search state - only for sudo admins
   const [selectedAdmin, setSelectedAdmin] = useState<AdminDetails | undefined>(totalAdmin)
-  const [adminSearch, setAdminSearch] = useState('')
   const [offset, setOffset] = useState(0)
   const [admins, setAdmins] = useState<AdminDetails[]>([])
   const [hasMore, setHasMore] = useState(true)
   const [isLoading, setIsLoading] = useState(false)
   const [dropdownOpen, setDropdownOpen] = useState(false)
   const listRef = useRef<HTMLDivElement>(null)
+  const { debouncedSearch: adminSearch, setSearch: setAdminSearchInput } = useDebouncedSearch('', 300)
 
-  // Debounced search - only for sudo admins
-  const debouncedSearch = useCallback(
-    debounce((value: string) => {
-      if (!is_sudo) return // Don't run for non-sudo admins
-      setOffset(0)
-      setAdmins([])
-      setHasMore(true)
-      setAdminSearch(value)
-    }, 300),
-    [is_sudo],
-  )
+  // Handle debounced search side effects - only for sudo admins
+  useEffect(() => {
+    if (!is_sudo) return // Don't run for non-sudo admins
+    setOffset(0)
+    setAdmins([])
+    setHasMore(true)
+  }, [adminSearch, is_sudo])
 
   // In the useGetAdmins call, only set username if searching and not current admin or 'system'
   let usernameParam: string | undefined = undefined
@@ -382,7 +378,7 @@ const Dashboard = () => {
                     </PopoverTrigger>
                     <PopoverContent className="w-64 p-1 sm:w-72 lg:w-80" sideOffset={4} align={dir === 'rtl' ? 'end' : 'start'}>
                       <Command>
-                        <CommandInput placeholder={t('search')} onValueChange={debouncedSearch} className="mb-1 h-7 text-xs sm:h-8 sm:text-sm" />
+                        <CommandInput placeholder={t('search')} onValueChange={setAdminSearchInput} className="mb-1 h-7 text-xs sm:h-8 sm:text-sm" />
                         <CommandList ref={listRef}>
                           <CommandEmpty>
                             <div className="py-3 text-center text-xs text-muted-foreground sm:py-4 sm:text-sm">{t('noAdminsFound') || 'No admins found'}</div>
diff --git a/dashboard/src/pages/_dashboard.settings.cleanup.tsx b/dashboard/src/pages/_dashboard.settings.cleanup.tsx
@@ -21,7 +21,7 @@ import { formatDateByLocale } from '@/utils/datePickerUtils'
 import useDirDetection from '@/hooks/use-dir-detection'
 import { cn } from '@/lib/utils'
 import { useClearUsageData, useDeleteExpiredUsers, useGetAdmins, useGetCurrentAdmin, useResetUsersDataUsage, type AdminDetails, type UsageTable } from '@/service/api'
-import { debounce } from 'es-toolkit'
+import { useDebouncedSearch } from '@/hooks/use-debounced-search'
 import { AlertTriangle, Check, ChevronDown, Database, Loader2, RotateCcw, Server, Trash2, UserCog, UserRound } from 'lucide-react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -44,24 +44,20 @@ export default function CleanupSettings() {
 
   // Admin search state
   const [selectedAdmin, setSelectedAdmin] = useState<AdminDetails | undefined>()
-  const [adminSearch, setAdminSearch] = useState('')
   const [offset, setOffset] = useState(0)
   const [admins, setAdmins] = useState<AdminDetails[]>([])
   const [hasMore, setHasMore] = useState(true)
   const [isLoading, setIsLoading] = useState(false)
   const [dropdownOpen, setDropdownOpen] = useState(false)
   const listRef = useRef<HTMLDivElement>(null)
+  const { debouncedSearch: adminSearch, setSearch: setAdminSearchInput } = useDebouncedSearch('', 300)
 
-  // Debounced search
-  const debouncedSearch = useCallback(
-    debounce((value: string) => {
-      setOffset(0)
-      setAdmins([])
-      setHasMore(true)
-      setAdminSearch(value)
-    }, 300),
-    [],
-  )
+  // Handle debounced search side effects
+  useEffect(() => {
+    setOffset(0)
+    setAdmins([])
+    setHasMore(true)
+  }, [adminSearch])
 
   let usernameParam: string | undefined = undefined
   if (adminSearch && adminSearch !== 'system' && adminSearch !== currentAdmin?.username) {
@@ -294,7 +290,7 @@ export default function CleanupSettings() {
               </PopoverTrigger>
               <PopoverContent className="w-64 p-1 sm:w-72 lg:w-80" sideOffset={4} align={dir === 'rtl' ? 'end' : 'start'}>
                 <Command>
-                  <CommandInput placeholder={t('search')} onValueChange={debouncedSearch} className="mb-1 h-7 text-xs sm:h-8 sm:text-sm" />
+                  <CommandInput placeholder={t('search')} onValueChange={setAdminSearchInput} className="mb-1 h-7 text-xs sm:h-8 sm:text-sm" />
                   <CommandList ref={listRef}>
                     <CommandEmpty>
                       <div className="py-3 text-center text-xs text-muted-foreground sm:py-4 sm:text-sm">{t('noAdminsFound') || 'No admins found'}</div>
