diff --git a/src/pages/manage/users/invites.tsx b/src/pages/manage/users/invites.tsx index 73893ce7e..a8391e115 100644 --- a/src/pages/manage/users/invites.tsx +++ b/src/pages/manage/users/invites.tsx @@ -18,31 +18,22 @@ import { MainLayout } from '~/components/layout/admin/main-admin.layout'; import { api } from '~/utils/api'; const ManageUserInvitesPage = () => { - const { data, fetchPreviousPage, fetchNextPage, hasNextPage, hasPreviousPage } = - api.registrationTokens.getAllInvites.useInfiniteQuery( - { - limit: 10, - }, - { - getNextPageParam: (lastPage) => lastPage.nextCursor, - } - ); + const [activePage, setActivePage] = useState(0); + const { data } = + api.registrationTokens.getAllInvites.useQuery({ + page: activePage + }); const { classes } = useStyles(); - const [activePage, setActivePage] = useState(0); const handleFetchNextPage = async () => { - await fetchNextPage(); setActivePage((prev) => prev + 1); }; const handleFetchPreviousPage = async () => { - await fetchPreviousPage(); setActivePage((prev) => prev - 1); }; - const currentPage = data?.pages[activePage]; - return ( @@ -71,10 +62,7 @@ const ManageUserInvitesPage = () => { - {activePage} - {currentPage ? 'current page is defined' : 'current page is not defined'} - - {data && currentPage && ( + {data && ( <> @@ -85,7 +73,7 @@ const ManageUserInvitesPage = () => { - {currentPage.registrationTokens.map((token, index) => ( + {data.registrationTokens.map((token, index) => ( ))} - {currentPage.registrationTokens.length === 0 && ( + {data.registrationTokens.length === 0 && (
{token.id} @@ -116,7 +104,7 @@ const ManageUserInvitesPage = () => {
@@ -128,10 +116,20 @@ const ManageUserInvitesPage = () => {
{ + setActivePage(targetPage - 1); + }} onNextPage={handleFetchNextPage} onPreviousPage={handleFetchPreviousPage} + onFirstPage={() => { + setActivePage(0); + }} + onLastPage={() => { + setActivePage(data.countPages - 1); + }} + withEdges /> )} @@ -144,8 +142,8 @@ const useStyles = createStyles(() => ({ width: '100%', }, tableCell: { - whiteSpace: 'nowrap' - } + whiteSpace: 'nowrap', + }, })); export default ManageUserInvitesPage; diff --git a/src/server/api/routers/registrationTokens.ts b/src/server/api/routers/registrationTokens.ts index e03dcc895..a686515c7 100644 --- a/src/server/api/routers/registrationTokens.ts +++ b/src/server/api/routers/registrationTokens.ts @@ -8,24 +8,17 @@ export const inviteRouter = createTRPCRouter({ getAllInvites: publicProcedure .input( z.object({ - limit: z.number().min(1).max(100).nullish(), - cursor: z.string().nullish(), + limit: z.number().min(1).max(100).nullish().default(10), + page: z.number().min(0) }) ) .query(async ({ ctx, input }) => { const limit = input.limit ?? 50; - const cursor = input.cursor; const registrationTokens = await ctx.prisma.registrationToken.findMany({ - take: limit + 1, // get an extra item at the end which we'll use as next cursor - cursor: cursor ? { id: cursor } : undefined, + take: limit, + skip: limit * input.page, }); - let nextCursor: typeof cursor | undefined = undefined; - if (registrationTokens.length > limit) { - const nextItem = registrationTokens.pop(); - nextCursor = nextItem!.id; - } - const countRegistrationTokens = await ctx.prisma.registrationToken.count(); return { @@ -33,7 +26,6 @@ export const inviteRouter = createTRPCRouter({ id: token.id, expires: token.expires, })), - nextCursor, countPages: Math.ceil(countRegistrationTokens / limit) }; }),