Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-14 16:51:38 +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
committed by Mythie
parent 9682f8ea36
commit d54710ca07
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'; '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 { Document, Role, Subscription } from '@documenso/prisma/client';
import { Button } from '@documenso/ui/primitives/button'; import { Button } from '@documenso/ui/primitives/button';
import { Input } from '@documenso/ui/primitives/input'; import { Input } from '@documenso/ui/primitives/input';
import { useDebouncedValue } from '~/hooks/use-debounced-value';
import { UsersDataTable } from './data-table-users'; import { UsersDataTable } from './data-table-users';
export type SubscriptionLite = Pick< export type SubscriptionLite = Pick<
@ -24,7 +28,7 @@ export type User = {
}; };
export type UsersProps = { export type UsersProps = {
search: (search: string) => Promise<{ users: User[]; totalPages: number }>; search: (_search: string) => Promise<{ users: User[]; totalPages: number }>;
perPage: number; perPage: number;
page: number; page: number;
}; };
@ -32,13 +36,14 @@ export type UsersProps = {
export const Users = ({ search, perPage, page }: UsersProps) => { export const Users = ({ search, perPage, page }: UsersProps) => {
const [data, setData] = useState<User[]>([]); const [data, setData] = useState<User[]>([]);
const [totalPages, setTotalPages] = useState<number>(0); const [totalPages, setTotalPages] = useState<number>(0);
const [isPending, startTransition] = useTransition();
const [searchString, setSearchString] = useState(''); const [searchString, setSearchString] = useState('');
const debouncedSearchString = useDebouncedValue(searchString, 500);
useEffect(() => { useEffect(() => {
const fetchData = async () => { const fetchData = async () => {
try { try {
const result = await search(searchString); const result = await search(debouncedSearchString);
setData(result.users); setData(result.users);
setTotalPages(result.totalPages); setTotalPages(result.totalPages);
} catch (err) { } catch (err) {
@ -47,12 +52,14 @@ export const Users = ({ search, perPage, page }: UsersProps) => {
}; };
fetchData(); fetchData();
}, [searchString, search]); }, [debouncedSearchString, search]);
const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => { const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
const result = await search(searchString); startTransition(async () => {
setData(result.users); const result = await search(debouncedSearchString);
setData(result.users);
});
}; };
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@ -71,7 +78,13 @@ export const Users = ({ search, perPage, page }: UsersProps) => {
<Button type="submit">Search</Button> <Button type="submit">Search</Button>
</form> </form>
<div className="mt-8"> <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> </div>
</> </>
); );