refactor(dashboard): replace complex API calls with simplified versions for groups and admins across components

x0sina · x0sina · commit c5527cf1ac5c · 2026-02-09T18:56:23.000+03:30
diff --git a/dashboard/src/components/bulk/bulk-flow.tsx b/dashboard/src/components/bulk/bulk-flow.tsx
@@ -2,9 +2,9 @@
 
 import { useState, useRef, useEffect } from 'react'
 import {
-  useGetAllGroups,
-  useGetUsers,
-  useGetAdmins,
+  useGetGroupsSimple,
+  useGetUsersSimple,
+  useGetAdminsSimple,
   useBulkModifyUsersProxySettings,
   useBulkModifyUsersDatalimit,
   useBulkModifyUsersExpire,
@@ -105,9 +105,9 @@ export default function BulkFlow({ operationType }: BulkFlowProps) {
     setExpireSeconds(seconds)
   }, [expireAmount, expireUnit])
 
-  const { data: groupsData, isLoading: groupsLoading } = useGetAllGroups({ limit: PAGE_SIZE, offset: 0 })
-  const { data: usersData, isLoading: usersLoading } = useGetUsers({ limit: PAGE_SIZE, offset: 0, search: debouncedUserSearch || undefined })
-  const { data: adminsData, isLoading: adminsLoading } = useGetAdmins({ limit: PAGE_SIZE, offset: 0, username: debouncedAdminSearch || undefined })
+  const { data: groupsData, isLoading: groupsLoading } = useGetGroupsSimple({ limit: PAGE_SIZE, offset: 0, all: true })
+  const { data: usersData, isLoading: usersLoading } = useGetUsersSimple({ limit: PAGE_SIZE, offset: 0, search: debouncedUserSearch || undefined })
+  const { data: adminsData, isLoading: adminsLoading } = useGetAdminsSimple({ limit: PAGE_SIZE, offset: 0, username: debouncedAdminSearch || undefined })
 
   const statusOptions: { value: UserStatus; label: string }[] = [
     { value: 'active', label: t('status.active', { defaultValue: 'Active' }) },
@@ -806,7 +806,7 @@ export default function BulkFlow({ operationType }: BulkFlowProps) {
                 <SelectorPanel
                   icon={Shield}
                   title={t('bulk.selectAdmins', { defaultValue: 'Select Admins' })}
-                  items={(adminsData?.admins || []).filter(a => typeof a.id === 'number' && typeof a.username === 'string').map(a => ({ id: a.id as number, username: a.username as string }))}
+                  items={adminsData?.admins || []}
                   selected={selectedAdmins}
                   setSelected={setSelectedAdmins}
                   search={adminSearch}
diff --git a/dashboard/src/components/charts/user-sub-update-pie-chart.tsx b/dashboard/src/components/charts/user-sub-update-pie-chart.tsx
@@ -5,7 +5,7 @@ import { Skeleton } from '@/components/ui/skeleton'
 import { Badge } from '@/components/ui/badge'
 import useDirDetection from '@/hooks/use-dir-detection'
 import { useTheme } from 'next-themes'
-import { type GetUsersSubUpdateChartParams, useGetAdmins, useGetUsersSubUpdateChart, type UserSubscriptionUpdateChartSegment } from '@/service/api'
+import { type GetUsersSubUpdateChartParams, useGetAdminsSimple, useGetUsersSubUpdateChart, type UserSubscriptionUpdateChartSegment } from '@/service/api'
 import { numberWithCommas } from '@/utils/formatByte'
 import { TrendingUp, Users } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
@@ -144,7 +144,7 @@ function UserSubUpdatePieChart({ username, adminId }: UserSubUpdatePieChartProps
     }
   }, [adminId])
 
-  const { data: admins, isLoading: isLoadingAdmins } = useGetAdmins(undefined, {
+  const { data: admins, isLoading: isLoadingAdmins } = useGetAdminsSimple({ all: true }, {
     query: {
       enabled: true,
       staleTime: 5 * 60 * 1000,
diff --git a/dashboard/src/components/common/admin-filter-combobox.tsx b/dashboard/src/components/common/admin-filter-combobox.tsx
@@ -5,8 +5,8 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import useDirDetection from '@/hooks/use-dir-detection'
 import { useDebouncedSearch } from '@/hooks/use-debounced-search'
 import { cn } from '@/lib/utils'
-import { type AdminDetails, useGetAdmins } from '@/service/api'
-import { Check, ChevronDown, Loader2, Sigma, UserCog, UserRound } from 'lucide-react'
+import { type AdminDetails, type AdminSimple, useGetAdminsSimple } from '@/service/api'
+import { Check, ChevronDown, Loader2, Sigma, UserRound } from 'lucide-react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -25,7 +25,7 @@ export default function AdminFilterCombobox({ value, onValueChange, onAdminSelec
 
   const [open, setOpen] = useState(false)
   const [offset, setOffset] = useState(0)
-  const [admins, setAdmins] = useState<AdminDetails[]>([])
+  const [admins, setAdmins] = useState<AdminSimple[]>([])
   const [hasMore, setHasMore] = useState(true)
   const [isLoadingMore, setIsLoadingMore] = useState(false)
   const listRef = useRef<HTMLDivElement>(null)
@@ -38,7 +38,7 @@ export default function AdminFilterCombobox({ value, onValueChange, onAdminSelec
     setIsLoadingMore(false)
   }, [adminSearch])
 
-  const { data: fetchedAdminsResponse, isLoading, isFetching } = useGetAdmins(
+  const { data: fetchedAdminsResponse, isLoading, isFetching } = useGetAdminsSimple(
     {
       limit: PAGE_SIZE,
       offset,
@@ -57,7 +57,7 @@ export default function AdminFilterCombobox({ value, onValueChange, onAdminSelec
     const fetchedAdmins = (fetchedAdminsResponse.admins || []).filter(admin => admin.username !== 'system')
     setAdmins(prev => {
       const merged = offset === 0 ? fetchedAdmins : [...prev, ...fetchedAdmins]
-      const byUsername = new Map<string, AdminDetails>()
+      const byUsername = new Map<string, AdminSimple>()
       merged.forEach(admin => {
         byUsername.set(admin.username, admin)
       })
@@ -97,7 +97,7 @@ export default function AdminFilterCombobox({ value, onValueChange, onAdminSelec
                 <AvatarFallback className="bg-muted text-xs font-medium">{value === 'all' ? <Sigma className="h-3 w-3" /> : triggerLabel.charAt(0).toUpperCase()}</AvatarFallback>
               </Avatar>
               <span className="truncate">{triggerLabel}</span>
-              {value !== 'all' && selectedAdmin && <div className="flex-shrink-0">{selectedAdmin.is_sudo ? <UserCog className="h-3 w-3 text-primary" /> : <UserRound className="h-3 w-3 text-primary" />}</div>}
+              {value !== 'all' && selectedAdmin && <div className="flex-shrink-0"><UserRound className="h-3 w-3 text-primary" /></div>}
             </div>
             <ChevronDown className="ml-1 h-3 w-3 flex-shrink-0 text-muted-foreground" />
           </Button>
@@ -141,7 +141,10 @@ export default function AdminFilterCombobox({ value, onValueChange, onAdminSelec
                   value={admin.username}
                   onSelect={() => {
                     onValueChange(admin.username)
-                    onAdminSelect?.(admin)
+                    onAdminSelect?.({
+                      ...admin,
+                      is_sudo: false,
+                    })
                     setOpen(false)
                   }}
                   className={cn('flex min-w-0 items-center gap-2 px-2 py-1.5 text-xs sm:text-sm', dir === 'rtl' ? 'flex-row-reverse' : 'flex-row')}
@@ -151,7 +154,7 @@ export default function AdminFilterCombobox({ value, onValueChange, onAdminSelec
                   </Avatar>
                   <span className="flex-1 truncate">{admin.username}</span>
                   <div className="flex flex-shrink-0 items-center gap-1">
-                    {admin.is_sudo ? <UserCog className="h-3 w-3 text-primary" /> : <UserRound className="h-3 w-3 text-primary" />}
+                    <UserRound className="h-3 w-3 text-primary" />
                     {value === admin.username && <Check className="h-3 w-3 text-primary" />}
                   </div>
                 </CommandItem>
diff --git a/dashboard/src/components/common/admins-selector.tsx b/dashboard/src/components/common/admins-selector.tsx
@@ -2,7 +2,7 @@ import { Checkbox } from '@/components/ui/checkbox'
 import { FormItem, FormMessage } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { Skeleton } from '@/components/ui/skeleton'
-import { useGetAdmins } from '@/service/api'
+import { useGetAdminsSimple } from '@/service/api'
 import { Search } from 'lucide-react'
 import { useState } from 'react'
 import { Control, FieldPath, FieldValues, useController } from 'react-hook-form'
@@ -26,7 +26,7 @@ export default function AdminsSelector<T extends FieldValues>({ control, name, o
     name,
   })
 
-  const { data: adminsData, isLoading: adminsLoading } = useGetAdmins(undefined, {
+  const { data: adminsData, isLoading: adminsLoading } = useGetAdminsSimple({ all: true }, {
     query: {
       staleTime: 5 * 60 * 1000, // 5 minutes
       gcTime: 10 * 60 * 1000, // 10 minutes
diff --git a/dashboard/src/components/common/groups-selector.tsx b/dashboard/src/components/common/groups-selector.tsx
@@ -2,7 +2,7 @@ import { Checkbox } from '@/components/ui/checkbox'
 import { FormItem, FormMessage } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { Skeleton } from '@/components/ui/skeleton'
-import { useGetAllGroups } from '@/service/api'
+import { useGetGroupsSimple } from '@/service/api'
 import { Search } from 'lucide-react'
 import { useState } from 'react'
 import { Control, FieldPath, FieldValues, useController } from 'react-hook-form'
@@ -29,7 +29,7 @@ export default function GroupsSelector<T extends FieldValues>({ control, name, o
     name,
   })
 
-  const { data: groupsData, isLoading: groupsLoading } = useGetAllGroups(undefined, {
+  const { data: groupsData, isLoading: groupsLoading } = useGetGroupsSimple({ all: true }, {
     query: {
       staleTime: 5 * 60 * 1000, // 5 minutes
       gcTime: 10 * 60 * 1000, // 10 minutes
diff --git a/dashboard/src/components/dialogs/advance-search-modal.tsx b/dashboard/src/components/dialogs/advance-search-modal.tsx
@@ -12,7 +12,7 @@ import GroupsSelector from '@/components/common/groups-selector.tsx'
 import AdminsSelector from '@/components/common/admins-selector.tsx'
 import { Badge } from '@/components/ui/badge.tsx'
 import { X } from 'lucide-react'
-import { useGetAllGroups } from '@/service/api'
+import { useGetGroupsSimple } from '@/service/api'
 import type { AdvanceSearchFormValue } from '@/components/forms/advance-search-form'
 
 interface AdvanceSearchModalProps {
@@ -26,7 +26,7 @@ export default function AdvanceSearchModal({ isDialogOpen, onOpenChange, form, o
   const dir = useDirDetection()
   const { t } = useTranslation()
 
-  const { data: groupsData } = useGetAllGroups(undefined, {
+  const { data: groupsData } = useGetGroupsSimple({ all: true }, {
     query: {
       staleTime: 5 * 60 * 1000, // 5 minutes
       gcTime: 10 * 60 * 1000, // 10 minutes
diff --git a/dashboard/src/components/dialogs/user-modal.tsx b/dashboard/src/components/dialogs/user-modal.tsx
@@ -19,6 +19,7 @@ import {
   getGetGeneralSettingsQueryKey,
   useCreateUser,
   useCreateUserFromTemplate,
+  useGetGroupsSimple,
   useGetUsers,
   useGetUserTemplates,
   useModifyUser,
@@ -510,6 +511,21 @@ export default function UserModal({ isDialogOpen, onOpenChange, form, editingUse
     },
   })
 
+  // Prefetch lightweight groups while modal is open so the Groups tab can render immediately.
+  useGetGroupsSimple(
+    { all: true },
+    {
+      query: {
+        staleTime: 5 * 60 * 1000,
+        gcTime: 10 * 60 * 1000,
+        refetchOnWindowFocus: true,
+        refetchOnMount: true,
+        refetchOnReconnect: true,
+        enabled: isDialogOpen,
+      },
+    },
+  )
+
   const { data: generalSettings } = useQuery({
     queryKey: getGetGeneralSettingsQueryKey(),
     queryFn: () => getGeneralSettings(),
diff --git a/dashboard/src/service/api/index.ts b/dashboard/src/service/api/index.ts
