fix(admin): debounce authorization user search

This commit is contained in:
2026-06-13 10:16:40 +03:30
parent 10992303de
commit 9e5be244f0

View File

@@ -1,6 +1,6 @@
"use client";
import { useState } from "react";
import { useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { Loader2, Search, ShieldCheck, UserCog } from "lucide-react";
import { useAuth } from "@/contexts/AuthContext";
@@ -16,6 +16,11 @@ import { Switch } from "@/components/ui/switch";
const PAGE_SIZE = 25;
const normalizeSearchDigits = (value: string) =>
value
.replace(/[۰-۹]/g, (digit) => String("۰۱۲۳۴۵۶۷۸۹".indexOf(digit)))
.replace(/[٠-٩]/g, (digit) => String("٠١٢٣٤٥٦٧٨٩".indexOf(digit)));
function fullName(user: Pick<Types.UserListSchema, "first_name" | "last_name" | "username">) {
return [user.first_name, user.last_name].filter(Boolean).join(" ") || user.username;
}
@@ -34,6 +39,14 @@ export default function AdminAuthorizations() {
queryFn: () => api.listUsers({ search: search || undefined, limit: PAGE_SIZE, offset: 0 }),
});
useEffect(() => {
const timeoutId = window.setTimeout(() => {
setSearch(normalizeSearchDigits(searchDraft).trim());
}, 400);
return () => window.clearTimeout(timeoutId);
}, [searchDraft]);
const authQuery = useQuery({
queryKey: ["admin", "authorizations", selectedUserId],
queryFn: () => api.getUserAuthorization(selectedUserId as number),
@@ -104,18 +117,13 @@ export default function AdminAuthorizations() {
<CardDescription>نام، موبایل، ایمیل یا نام کاربری را جستجو کنید.</CardDescription>
</CardHeader>
<CardContent className="space-y-4" dir="ltr">
<div className="flex gap-2">
<Button type="button" onClick={() => setSearch(searchDraft.trim())} size="icon" aria-label="جستجو">
<Search className="h-5 w-5 bold" />
</Button>
<div className="relative">
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
value={searchDraft}
onChange={(event) => setSearchDraft(event.target.value)}
onKeyDown={(event) => {
if (event.key === "Enter") setSearch(searchDraft.trim());
}}
placeholder="جستجو..."
className="text-right"
className="pl-10 text-right"
/>
</div>
{usersQuery.isLoading ? (
@@ -140,7 +148,10 @@ export default function AdminAuthorizations() {
</Badge>
<span className="font-medium">{fullName(item)}</span>
</div>
<p className="mt-1 text-xs text-muted-foreground">{item.mobile || item.email || item.username}</p>
<div className="mt-2 space-y-1 text-xs text-muted-foreground">
<p dir="ltr" className="text-right">{item.mobile || "بدون شماره موبایل"}</p>
<p>{item.email || item.username}</p>
</div>
</button>
))}
</div>