diff --git a/src/pages/manage/users/create.tsx b/src/pages/manage/users/create.tsx index 3d0ced3c3..56b8f8ec6 100644 --- a/src/pages/manage/users/create.tsx +++ b/src/pages/manage/users/create.tsx @@ -19,6 +19,7 @@ import { IconMail, IconMailCheck, IconUser, + IconUserPlus, } from '@tabler/icons-react'; import Head from 'next/head'; import Link from 'next/link'; @@ -59,7 +60,7 @@ const CreateNewUserPage = () => { }); const context = api.useContext(); - const { mutateAsync, isSuccess, isLoading } = api.user.createUser.useMutation({ + const { mutateAsync, isLoading } = api.user.createUser.useMutation({ onSettled: () => { void context.user.getAll.invalidate(); }, @@ -173,10 +174,6 @@ const CreateNewUserPage = () => { + + + + diff --git a/src/pages/manage/users/index.tsx b/src/pages/manage/users/index.tsx index 7d252b3c1..3519cfe26 100644 --- a/src/pages/manage/users/index.tsx +++ b/src/pages/manage/users/index.tsx @@ -2,6 +2,7 @@ import { ActionIcon, Autocomplete, Avatar, + Box, Button, Flex, Group, @@ -11,6 +12,7 @@ import { Text, Title, } from '@mantine/core'; +import { useDebouncedValue } from '@mantine/hooks'; import { openContextModal } from '@mantine/modals'; import { IconPlus, IconTrash } from '@tabler/icons-react'; import Head from 'next/head'; @@ -20,16 +22,13 @@ import { MainLayout } from '~/components/layout/admin/main-admin.layout'; import { api } from '~/utils/api'; const ManageUsersPage = () => { - const { data, fetchNextPage, fetchPreviousPage } = api.user.getAll.useInfiniteQuery( - { - limit: 10, - }, - { - getNextPageParam: (lastPage) => lastPage.nextCursor, - } - ); - - const [activePage, _] = useState(0); + const [activePage, setActivePage] = useState(0); + const [nonDebouncedSearch, setNonDebouncedSearch] = useState(''); + const [debouncedSearch] = useDebouncedValue(nonDebouncedSearch, 200); + const { data } = api.user.getAll.useQuery({ + page: activePage, + search: debouncedSearch, + }); return ( @@ -46,8 +45,13 @@ const ManageUsersPage = () => { user.name).filter((name) => name !== null) as string[]) ?? [] + } variant="filled" + onChange={(value) => { + setNonDebouncedSearch(value); + }} />