Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-10 04:22:32 +10:00
Code Issues Packages Projects Releases Wiki Activity

chore: add transition and check for empty users array

Browse Source
This commit is contained in:
pit
2023-10-09 11:59:08 +03:00
parent 5f14f87406
commit d4ae733e9e
1 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
apps/web/src/app/(dashboard)/admin/users/users.tsx
View File

@ -1,11 +1,15 @@
'use client';
import { useEffect, useState } from 'react';
import { useEffect, useState, useTransition } from 'react';
import { Loader } from 'lucide-react';
import { Document, Role, Subscription } from '@documenso/prisma/client';
import { Button } from '@documenso/ui/primitives/button';
import { Input } from '@documenso/ui/primitives/input';
import { useDebouncedValue } from '~/hooks/use-debounced-value';
import { UsersDataTable } from './data-table-users';
export type SubscriptionLite = Pick<
@ -24,7 +28,7 @@ export type User = {
};
export type UsersProps = {
search: (search: string) => Promise<{ users: User[]; totalPages: number }>;
search: (_search: string) => Promise<{ users: User[]; totalPages: number }>;
perPage: number;
page: number;
};
@ -32,13 +36,14 @@ export type UsersProps = {
export const Users = ({ search, perPage, page }: UsersProps) => {
const [data, setData] = useState<User[]>([]);
const [totalPages, setTotalPages] = useState<number>(0);
const [isPending, startTransition] = useTransition();
const [searchString, setSearchString] = useState('');
const debouncedSearchString = useDebouncedValue(searchString, 500);
useEffect(() => {
const fetchData = async () => {
try {
const result = await search(searchString);
const result = await search(debouncedSearchString);
setData(result.users);
setTotalPages(result.totalPages);
} catch (err) {
@ -47,12 +52,14 @@ export const Users = ({ search, perPage, page }: UsersProps) => {
};
fetchData();
}, [searchString, search]);
}, [debouncedSearchString, search]);
const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const result = await search(searchString);
setData(result.users);
startTransition(async () => {
const result = await search(debouncedSearchString);
setData(result.users);
});
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@ -71,7 +78,13 @@ export const Users = ({ search, perPage, page }: UsersProps) => {
<Button type="submit">Search</Button>
</form>
<div className="mt-8">
<UsersDataTable users={data} perPage={perPage} page={page} totalPages={totalPages} />
{data.length === 0 || isPending ? (
<div className="absolute inset-0 flex items-center justify-center bg-white/50">
<Loader className="h-8 w-8 animate-spin text-gray-500" />
</div>
) : (
<UsersDataTable users={data} perPage={perPage} page={page} totalPages={totalPages} />
)}
</div>
</>
);