Skip to content

Commit 731cf28

Browse files
VenefilynVenefilyn
committed
Copr: Migrate to page-based pagination
1 parent 96e43fa commit 731cf28

File tree

2 files changed

+69
-80
lines changed

2 files changed

+69
-80
lines changed

‎frontend/src/components/copr/CoprBuildsTable.tsx‎

Lines changed: 61 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Copyright Contributors to the Packit project.
22
// SPDX-License-Identifier: MIT
33

4-
import React, { useMemo } from "react";
4+
import React, { useMemo, useState } from "react";
55

66
import {
77
Table,
@@ -14,10 +14,12 @@ import {
1414
} from "@patternfly/react-table";
1515

1616
import { SkeletonTable } from "@patternfly/react-component-groups";
17-
import { useInfiniteQuery } from "@tanstack/react-query";
17+
import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
1818
import { coprBuildsQueryOptions } from "../../queries/copr/coprBuildsQuery";
1919
import { ForgeIcon } from "../icons/ForgeIcon";
2020
import { LoadMore } from "../shared/LoadMore";
21+
import { PackitPagination } from "../shared/PackitPagination";
22+
import { PackitPaginationContext } from "../shared/PackitPaginationContext";
2123
import { Timestamp } from "../shared/Timestamp";
2224
import { StatusLabel } from "../statusLabels/StatusLabel";
2325
import { TriggerLink, TriggerSuffix } from "../trigger/TriggerLink";
@@ -53,8 +55,11 @@ const ChrootStatuses: React.FC<ChrootStatusesProps> = (props) => {
5355
};
5456

5557
const CoprBuildsTable = () => {
56-
const { data, isLoading, isFetchingNextPage, fetchNextPage, hasNextPage } =
57-
useInfiniteQuery(coprBuildsQueryOptions());
58+
const [page, setPage] = useState(1);
59+
const [perPage, setPerPage] = useState(10);
60+
const value = { page, setPage, perPage, setPerPage };
61+
62+
const { data, isLoading } = useQuery(coprBuildsQueryOptions(page, perPage));
5863

5964
// Headings
6065
const columnNames = {
@@ -65,9 +70,6 @@ const CoprBuildsTable = () => {
6570
coprBuild: "Copr Build",
6671
};
6772

68-
// Create a memoization of all the data when we flatten it out. Ideally one should render all the pages separately so that rendering will be done faster
69-
const rows = useMemo(() => (data ? data.pages.flat() : []), [data]);
70-
7173
const TableHeads = [
7274
<Th key={columnNames.forge}>
7375
<span className="pf-v6-u-screen-reader">{columnNames.forge}</span>
@@ -86,61 +88,59 @@ const CoprBuildsTable = () => {
8688
</Th>,
8789
];
8890

89-
if (isLoading) {
90-
return (
91-
<SkeletonTable
92-
variant={TableVariant.compact}
93-
rows={10}
94-
columns={TableHeads}
95-
/>
96-
);
97-
}
98-
9991
return (
100-
<>
101-
<Table aria-label="Copr builds" variant={TableVariant.compact}>
102-
<Thead>
103-
<Tr>{TableHeads}</Tr>
104-
</Thead>
105-
<Tbody>
106-
{rows.map((copr_build) => (
107-
<Tr key={copr_build.build_id}>
108-
<Td dataLabel={columnNames.forge}>
109-
<ForgeIcon url={copr_build.project_url} />
110-
</Td>
111-
<Td dataLabel={columnNames.trigger}>
112-
<strong>
113-
<TriggerLink trigger={copr_build}>
114-
<TriggerSuffix trigger={copr_build} />
115-
</TriggerLink>
116-
</strong>
117-
</Td>
118-
<Td dataLabel={columnNames.chroots}>
119-
<ChrootStatuses
120-
statuses={copr_build.status_per_chroot}
121-
ids={copr_build.packit_id_per_chroot}
122-
/>
123-
</Td>
124-
<Td dataLabel={columnNames.timeSubmitted}>
125-
<Timestamp stamp={copr_build.build_submitted_time} />
126-
</Td>
127-
<Td dataLabel={columnNames.coprBuild}>
128-
<strong>
129-
<a href={copr_build.web_url} target="_blank" rel="noreferrer">
130-
{copr_build.build_id}
131-
</a>
132-
</strong>
133-
</Td>
134-
</Tr>
135-
))}
136-
</Tbody>
137-
</Table>
138-
<LoadMore
139-
isFetchingNextPage={isFetchingNextPage}
140-
hasNextPage={hasNextPage}
141-
fetchNextPage={() => void fetchNextPage()}
142-
/>
143-
</>
92+
<PackitPaginationContext.Provider value={value}>
93+
<PackitPagination />
94+
{isLoading ? (
95+
<SkeletonTable
96+
variant={TableVariant.compact}
97+
rows={10}
98+
columns={TableHeads}
99+
/>
100+
) : (
101+
<Table aria-label="Copr builds" variant={TableVariant.compact}>
102+
<Thead>
103+
<Tr>{TableHeads}</Tr>
104+
</Thead>
105+
<Tbody>
106+
{data?.map((copr_build) => (
107+
<Tr key={copr_build.build_id}>
108+
<Td dataLabel={columnNames.forge}>
109+
<ForgeIcon url={copr_build.project_url} />
110+
</Td>
111+
<Td dataLabel={columnNames.trigger}>
112+
<strong>
113+
<TriggerLink trigger={copr_build}>
114+
<TriggerSuffix trigger={copr_build} />
115+
</TriggerLink>
116+
</strong>
117+
</Td>
118+
<Td dataLabel={columnNames.chroots}>
119+
<ChrootStatuses
120+
statuses={copr_build.status_per_chroot}
121+
ids={copr_build.packit_id_per_chroot}
122+
/>
123+
</Td>
124+
<Td dataLabel={columnNames.timeSubmitted}>
125+
<Timestamp stamp={copr_build.build_submitted_time} />
126+
</Td>
127+
<Td dataLabel={columnNames.coprBuild}>
128+
<strong>
129+
<a
130+
href={copr_build.web_url}
131+
target="_blank"
132+
rel="noreferrer"
133+
>
134+
{copr_build.build_id}
135+
</a>
136+
</strong>
137+
</Td>
138+
</Tr>
139+
))}
140+
</Tbody>
141+
</Table>
142+
)}
143+
</PackitPaginationContext.Provider>
144144
);
145145
};
146146

‎frontend/src/queries/copr/coprBuildsQuery.ts‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,14 @@
11
// Copyright Contributors to the Packit project.
22
// SPDX-License-Identifier: MIT
33

4-
import { infiniteQueryOptions } from "@tanstack/react-query";
4+
import { queryOptions } from "@tanstack/react-query";
55
import { fetchCoprBuilds } from "./coprBuilds";
66

7-
export const coprBuildsQueryOptions = () =>
8-
infiniteQueryOptions({
9-
queryKey: ["copr"],
10-
queryFn: async ({ pageParam, signal }) =>
11-
await fetchCoprBuilds({ pageParam, signal }),
12-
initialPageParam: 1,
13-
getNextPageParam: (lastPage, _allPages, lastPageParam) => {
14-
if (lastPage.length === 0) {
15-
return undefined;
16-
}
17-
return lastPageParam + 1;
18-
},
19-
getPreviousPageParam: (_firstPage, _allPages, firstPageParam) => {
20-
if (firstPageParam <= 1) {
21-
return undefined;
22-
}
23-
return firstPageParam - 1;
24-
},
7+
export const coprBuildsQueryOptions = (
8+
pageParam: number,
9+
perPage: number = 20,
10+
) =>
11+
queryOptions({
12+
queryKey: ["copr", { pageParam, perPage }],
13+
queryFn: async ({ signal }) => await fetchCoprBuilds({ pageParam, signal }),
2514
});

0 commit comments

Comments
 (0)