Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-16 18:26:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix paging on manage user invites

Browse Source
This commit is contained in:
Manuel
2023-07-31 21:20:46 +02:00
parent ddfd9fb286
commit 9fcbdb43e6
2 changed files with 25 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/pages/manage/users/invites.tsx
View File

@@ -18,31 +18,22 @@ import { MainLayout } from '~/components/layout/admin/main-admin.layout';
import { api } from '~/utils/api'; import { api } from '~/utils/api';
const ManageUserInvitesPage = () => { const ManageUserInvitesPage = () => {
const { data, fetchPreviousPage, fetchNextPage, hasNextPage, hasPreviousPage } = const [activePage, setActivePage] = useState(0);
api.registrationTokens.getAllInvites.useInfiniteQuery( const { data } =
{ api.registrationTokens.getAllInvites.useQuery({
limit: 10, page: activePage
}, });
{
getNextPageParam: (lastPage) => lastPage.nextCursor,
}
);
const { classes } = useStyles(); const { classes } = useStyles();
const [activePage, setActivePage] = useState(0);
const handleFetchNextPage = async () => { const handleFetchNextPage = async () => {
await fetchNextPage();
setActivePage((prev) => prev + 1); setActivePage((prev) => prev + 1);
}; };
const handleFetchPreviousPage = async () => { const handleFetchPreviousPage = async () => {
await fetchPreviousPage();
setActivePage((prev) => prev - 1); setActivePage((prev) => prev - 1);
}; };
const currentPage = data?.pages[activePage];
return ( return (
<MainLayout> <MainLayout>
<Head> <Head>
@@ -71,10 +62,7 @@ const ManageUserInvitesPage = () => {
</Button> </Button>
</Flex> </Flex>
{activePage} {data && (
{currentPage ? 'current page is defined' : 'current page is not defined'}
{data && currentPage && (
<> <>
<Table mb="md" withBorder highlightOnHover> <Table mb="md" withBorder highlightOnHover>
<thead> <thead>
@@ -85,7 +73,7 @@ const ManageUserInvitesPage = () => {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{currentPage.registrationTokens.map((token, index) => ( {data.registrationTokens.map((token, index) => (
<tr key={index}> <tr key={index}>
<td className={classes.tableIdCell}> <td className={classes.tableIdCell}>
<Text lineClamp={1}>{token.id}</Text> <Text lineClamp={1}>{token.id}</Text>
@@ -116,7 +104,7 @@ const ManageUserInvitesPage = () => {
</td> </td>
</tr> </tr>
))} ))}
{currentPage.registrationTokens.length === 0 && ( {data.registrationTokens.length === 0 && (
<tr> <tr>
<td colSpan={3}> <td colSpan={3}>
<Center p="md"> <Center p="md">
@@ -128,10 +116,20 @@ const ManageUserInvitesPage = () => {
</tbody> </tbody>
</Table> </Table>
<Pagination <Pagination
total={data.pages[0].countPages} total={data.countPages}
value={activePage + 1} value={activePage + 1}
onChange={(targetPage) => {
setActivePage(targetPage - 1);
}}
onNextPage={handleFetchNextPage} onNextPage={handleFetchNextPage}
onPreviousPage={handleFetchPreviousPage} onPreviousPage={handleFetchPreviousPage}
onFirstPage={() => {
setActivePage(0);
}}
onLastPage={() => {
setActivePage(data.countPages - 1);
}}
withEdges
/> />
</> </>
)} )}
@@ -144,8 +142,8 @@ const useStyles = createStyles(() => ({
width: '100%', width: '100%',
}, },
tableCell: { tableCell: {
whiteSpace: 'nowrap' whiteSpace: 'nowrap',
} },
})); }));
export default ManageUserInvitesPage; export default ManageUserInvitesPage;

16
src/server/api/routers/registrationTokens.ts
View File

@@ -8,24 +8,17 @@ export const inviteRouter = createTRPCRouter({
getAllInvites: publicProcedure getAllInvites: publicProcedure
.input( .input(
z.object({ z.object({
limit: z.number().min(1).max(100).nullish(), limit: z.number().min(1).max(100).nullish().default(10),
cursor: z.string().nullish(), page: z.number().min(0)
}) })
) )
.query(async ({ ctx, input }) => { .query(async ({ ctx, input }) => {
const limit = input.limit ?? 50; const limit = input.limit ?? 50;
const cursor = input.cursor;
const registrationTokens = await ctx.prisma.registrationToken.findMany({ const registrationTokens = await ctx.prisma.registrationToken.findMany({
take: limit + 1, // get an extra item at the end which we'll use as next cursor take: limit,
cursor: cursor ? { id: cursor } : undefined, 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(); const countRegistrationTokens = await ctx.prisma.registrationToken.count();
return { return {
@@ -33,7 +26,6 @@ export const inviteRouter = createTRPCRouter({
id: token.id, id: token.id,
expires: token.expires, expires: token.expires,
})), })),
nextCursor,
countPages: Math.ceil(countRegistrationTokens / limit) countPages: Math.ceil(countRegistrationTokens / limit)
}; };
}), }),