Add search and filtering functionality to useAdminUsers hook and associated components
- Enhanced `useAdminUsers` to support `search`, `is_active`, and `is_superuser` filters. - Updated `UserManagementContent` to read filters from URL parameters and convert them to API-compatible formats. - Introduced E2E and unit tests to validate filtering behavior and URL param synchronization. - Ensured proper handling of combined filters and empty states in tests.
This commit is contained in:
@@ -26,6 +26,10 @@ export function UserManagementContent() {
|
||||
const filterActive = searchParams.get('active') || null;
|
||||
const filterSuperuser = searchParams.get('superuser') || null;
|
||||
|
||||
// Convert filter strings to booleans for API
|
||||
const isActiveFilter = filterActive === 'true' ? true : filterActive === 'false' ? false : null;
|
||||
const isSuperuserFilter = filterSuperuser === 'true' ? true : filterSuperuser === 'false' ? false : null;
|
||||
|
||||
// Local state
|
||||
const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
@@ -33,7 +37,13 @@ export function UserManagementContent() {
|
||||
const [editingUser, setEditingUser] = useState<User | null>(null);
|
||||
|
||||
// Fetch users with query params
|
||||
const { data, isLoading } = useAdminUsers(page, 20);
|
||||
const { data, isLoading } = useAdminUsers(
|
||||
page,
|
||||
20,
|
||||
searchQuery || null,
|
||||
isActiveFilter,
|
||||
isSuperuserFilter
|
||||
);
|
||||
|
||||
const users: User[] = data?.data || [];
|
||||
const pagination: PaginationMeta = data?.pagination || {
|
||||
|
||||
@@ -161,16 +161,31 @@ export interface PaginatedUserResponse {
|
||||
*
|
||||
* @param page - Page number (1-indexed)
|
||||
* @param limit - Number of records per page
|
||||
* @param search - Search query for email or name
|
||||
* @param is_active - Filter by active status (true, false, or null for all)
|
||||
* @param is_superuser - Filter by superuser status (true, false, or null for all)
|
||||
* @returns Paginated list of users
|
||||
*/
|
||||
export function useAdminUsers(page = 1, limit = DEFAULT_PAGE_LIMIT) {
|
||||
export function useAdminUsers(
|
||||
page = 1,
|
||||
limit = DEFAULT_PAGE_LIMIT,
|
||||
search?: string | null,
|
||||
is_active?: boolean | null,
|
||||
is_superuser?: boolean | null
|
||||
) {
|
||||
const { user } = useAuth();
|
||||
|
||||
return useQuery({
|
||||
queryKey: ['admin', 'users', page, limit],
|
||||
queryKey: ['admin', 'users', page, limit, search, is_active, is_superuser],
|
||||
queryFn: async (): Promise<PaginatedUserResponse> => {
|
||||
const response = await adminListUsers({
|
||||
query: { page, limit },
|
||||
query: {
|
||||
page,
|
||||
limit,
|
||||
...(search ? { search } : {}),
|
||||
...(is_active !== null && is_active !== undefined ? { is_active } : {}),
|
||||
...(is_superuser !== null && is_superuser !== undefined ? { is_superuser } : {}),
|
||||
},
|
||||
throwOnError: false,
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user