diff --git a/apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx b/apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx index 737029a05..b6b475ea2 100644 --- a/apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx +++ b/apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx @@ -13,9 +13,6 @@ import { Button } from '@documenso/ui/primitives/button'; import { DataTable } from '@documenso/ui/primitives/data-table'; import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination'; import { Input } from '@documenso/ui/primitives/input'; -import { useToast } from '@documenso/ui/primitives/use-toast'; - -import { search } from './fetch-users.actions'; interface User { id: number; @@ -34,19 +31,27 @@ type SubscriptionLite = Pick< type DocumentLite = Pick; type UsersDataTableProps = { + users: User[]; + totalPages: number; perPage: number; page: number; }; -export const UsersDataTable = ({ perPage, page }: UsersDataTableProps) => { - const { toast } = useToast(); - +export const UsersDataTable = ({ users, totalPages, perPage, page }: UsersDataTableProps) => { const [isPending, startTransition] = useTransition(); const updateSearchParams = useUpdateSearchParams(); - const [data, setData] = useState([]); const [searchString, setSearchString] = useState(''); - const [totalPages, setTotalPages] = useState(0); - const debouncedSearchString = useDebouncedValue(searchString, 500); + const debouncedSearchString = useDebouncedValue(searchString, 1000); + + useEffect(() => { + startTransition(() => { + updateSearchParams({ + search: debouncedSearchString, + page: 1, + perPage, + }); + }); + }, [debouncedSearchString]); const onPaginationChange = (page: number, perPage: number) => { startTransition(() => { @@ -57,35 +62,6 @@ export const UsersDataTable = ({ perPage, page }: UsersDataTableProps) => { }); }; - useEffect(() => { - const fetchData = async () => { - try { - const result = await search(debouncedSearchString, page, perPage); - setData(result.users); - setTotalPages(result.totalPages); - - if (result.totalPages < page) { - startTransition(() => { - updateSearchParams({ - page: 1, - perPage, - }); - }); - } - } catch (err) { - throw new Error(err); - } - }; - - fetchData().catch(() => { - toast({ - title: 'Something went wrong', - description: 'Please try again', - variant: 'destructive', - }); - }); - }, [debouncedSearchString, page, perPage]); - const handleChange = (e: React.ChangeEvent) => { setSearchString(e.target.value); }; @@ -174,7 +150,7 @@ export const UsersDataTable = ({ perPage, page }: UsersDataTableProps) => { }, }, ]} - data={data} + data={users} perPage={perPage} currentPage={page} totalPages={totalPages} diff --git a/apps/web/src/app/(dashboard)/admin/users/page.tsx b/apps/web/src/app/(dashboard)/admin/users/page.tsx index b11d4a4b2..686ce7669 100644 --- a/apps/web/src/app/(dashboard)/admin/users/page.tsx +++ b/apps/web/src/app/(dashboard)/admin/users/page.tsx @@ -1,20 +1,25 @@ import { UsersDataTable } from './data-table-users'; +import { search } from './fetch-users.actions'; type AdminManageUsersProps = { searchParams?: { + search?: string; page?: number; perPage?: number; }; }; -export default function AdminManageUsers({ searchParams = {} }: AdminManageUsersProps) { +export default async function AdminManageUsers({ searchParams = {} }: AdminManageUsersProps) { const page = Number(searchParams.page) || 1; const perPage = Number(searchParams.perPage) || 10; + const searchString = searchParams.search || ''; + + const { users, totalPages } = await search(searchString, page, perPage); return (

Manage users

- +
); }