Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-16 10:16: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';
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 (
<MainLayout>
<Head>
@@ -71,10 +62,7 @@ const ManageUserInvitesPage = () => {
</Button>
</Flex>
{activePage}
{currentPage ? 'current page is defined' : 'current page is not defined'}
{data && currentPage && (
{data && (
<>
<Table mb="md" withBorder highlightOnHover>
<thead>
@@ -85,7 +73,7 @@ const ManageUserInvitesPage = () => {
</tr>
</thead>
<tbody>
{currentPage.registrationTokens.map((token, index) => (
{data.registrationTokens.map((token, index) => (
<tr key={index}>
<td className={classes.tableIdCell}>
<Text lineClamp={1}>{token.id}</Text>
@@ -116,7 +104,7 @@ const ManageUserInvitesPage = () => {
</td>
</tr>
))}
{currentPage.registrationTokens.length === 0 && (
{data.registrationTokens.length === 0 && (
<tr>
<td colSpan={3}>
<Center p="md">
@@ -128,10 +116,20 @@ const ManageUserInvitesPage = () => {
</tbody>
</Table>
<Pagination
total={data.pages[0].countPages}
total={data.countPages}
value={activePage + 1}
onChange={(targetPage) => {
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;

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

@@ -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)
};
}),