refactor: optimize user fetching logic in UsersPageClient component by using useCallback for fetchUsers function
This commit is contained in:
parent
9d4fcbe36d
commit
9711d13804
@ -6,7 +6,7 @@ import type { User } from '@/lib/auth-types';
|
|||||||
import { useUsersStore } from '@/stores/users-store';
|
import { useUsersStore } from '@/stores/users-store';
|
||||||
import type { SortingState } from '@tanstack/react-table';
|
import type { SortingState } from '@tanstack/react-table';
|
||||||
import { useTranslations } from 'next-intl';
|
import { useTranslations } from 'next-intl';
|
||||||
import { useEffect, useState } from 'react';
|
import { useCallback, useEffect, useState } from 'react';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
export function UsersPageClient() {
|
export function UsersPageClient() {
|
||||||
@ -22,39 +22,39 @@ export function UsersPageClient() {
|
|||||||
]);
|
]);
|
||||||
const refreshTrigger = useUsersStore((state) => state.refreshTrigger);
|
const refreshTrigger = useUsersStore((state) => state.refreshTrigger);
|
||||||
|
|
||||||
useEffect(() => {
|
const fetchUsers = useCallback(async () => {
|
||||||
const fetchUsers = async () => {
|
try {
|
||||||
try {
|
setLoading(true);
|
||||||
setLoading(true);
|
const result = await getUsersAction({
|
||||||
const result = await getUsersAction({
|
pageIndex,
|
||||||
pageIndex,
|
pageSize,
|
||||||
pageSize,
|
search,
|
||||||
search,
|
sorting,
|
||||||
sorting,
|
});
|
||||||
});
|
|
||||||
|
|
||||||
if (result?.data?.success) {
|
if (result?.data?.success) {
|
||||||
setData(result.data.data?.items || []);
|
setData(result.data.data?.items || []);
|
||||||
setTotal(result.data.data?.total || 0);
|
setTotal(result.data.data?.total || 0);
|
||||||
} else {
|
} else {
|
||||||
const errorMessage = result?.data?.error || t('error');
|
const errorMessage = result?.data?.error || t('error');
|
||||||
toast.error(errorMessage);
|
toast.error(errorMessage);
|
||||||
setData([]);
|
|
||||||
setTotal(0);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to fetch users:', error);
|
|
||||||
toast.error(t('error'));
|
|
||||||
setData([]);
|
setData([]);
|
||||||
setTotal(0);
|
setTotal(0);
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
}
|
||||||
};
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch users:', error);
|
||||||
fetchUsers();
|
toast.error(t('error'));
|
||||||
|
setData([]);
|
||||||
|
setTotal(0);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
}, [pageIndex, pageSize, search, sorting, refreshTrigger]);
|
}, [pageIndex, pageSize, search, sorting, refreshTrigger]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchUsers();
|
||||||
|
}, [fetchUsers]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<UsersTable
|
<UsersTable
|
||||||
|
Loading…
Reference in New Issue
Block a user