Skip to content

Commit 382abef

Browse files
VenefilynVenefilyn
committed
Bodhi: Migrate to page-based pagination
1 parent 3c9da57 commit 382abef

File tree

2 files changed

+76
-95
lines changed

2 files changed

+76
-95
lines changed

‎frontend/src/components/bodhi/BodhiUpdatesTable.tsx‎

Lines changed: 68 additions & 77 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 { useMemo } from "react";
4+
import { useState } from "react";
55

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

1616
import { SkeletonTable } from "@patternfly/react-component-groups";
17-
import { useInfiniteQuery } from "@tanstack/react-query";
17+
import { useQuery } from "@tanstack/react-query";
1818
import { ErrorConnection } from "../../components/errors/ErrorConnection";
1919
import { Timestamp } from "../../components/shared/Timestamp";
2020
import {
@@ -23,10 +23,15 @@ import {
2323
} from "../../components/trigger/TriggerLink";
2424
import { bodhiUpdatesQueryOptions } from "../../queries/bodhi/bodhiUpdatesQuery";
2525
import { ForgeIcon, ForgeIconByForge } from "../icons/ForgeIcon";
26-
import { LoadMore } from "../shared/LoadMore";
26+
import { PackitPagination } from "../shared/PackitPagination";
27+
import { PackitPaginationContext } from "../shared/PackitPaginationContext";
2728
import { StatusLabel } from "../statusLabels/StatusLabel";
2829

2930
const BodhiUpdatesTable = () => {
31+
const [page, setPage] = useState(1);
32+
const [perPage, setPerPage] = useState(10);
33+
const value = { page, setPage, perPage, setPerPage };
34+
3035
// Headings
3136
const columnNames = {
3237
forge: "Forge",
@@ -36,17 +41,9 @@ const BodhiUpdatesTable = () => {
3641
bodhiUpdate: "Bodhi Update",
3742
};
3843

39-
const {
40-
isLoading,
41-
isError,
42-
fetchNextPage,
43-
data,
44-
isFetchingNextPage,
45-
hasNextPage,
46-
} = useInfiniteQuery(bodhiUpdatesQueryOptions());
47-
48-
// 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
49-
const rows = useMemo(() => (data ? data.pages.flat() : []), [data]);
44+
const { isLoading, isError, data } = useQuery(
45+
bodhiUpdatesQueryOptions(page, perPage),
46+
);
5047

5148
const TableHeads = [
5249
<Th key={columnNames.forge}>
@@ -71,70 +68,64 @@ const BodhiUpdatesTable = () => {
7168
return <ErrorConnection />;
7269
}
7370

74-
if (isLoading) {
75-
return (
76-
<SkeletonTable
77-
variant={TableVariant.compact}
78-
rows={10}
79-
columns={TableHeads}
80-
/>
81-
);
82-
}
83-
8471
return (
85-
<>
86-
<Table aria-label="Bodhi updates" variant={TableVariant.compact}>
87-
<Thead>
88-
<Tr>{TableHeads}</Tr>
89-
</Thead>
90-
<Tbody>
91-
{rows.map((bodhi_update) => (
92-
<Tr key={bodhi_update.packit_id}>
93-
<Td dataLabel={columnNames.forge}>
94-
{bodhi_update.project_url ? (
95-
<ForgeIcon url={bodhi_update.project_url} />
96-
) : (
97-
<ForgeIconByForge />
98-
)}
99-
</Td>
100-
<Td dataLabel={columnNames.trigger}>
101-
<strong>
102-
<TriggerLink trigger={bodhi_update}>
103-
<TriggerSuffix trigger={bodhi_update} />
104-
</TriggerLink>
105-
</strong>
106-
</Td>
107-
<Td dataLabel={columnNames.branch}>
108-
<StatusLabel
109-
target={bodhi_update.branch}
110-
status={bodhi_update.status}
111-
link={`/jobs/bodhi/${bodhi_update.packit_id}`}
112-
/>
113-
</Td>
114-
<Td dataLabel={columnNames.timeProcessed}>
115-
<Timestamp stamp={bodhi_update.submitted_time} />
116-
</Td>
117-
<Td dataLabel={columnNames.bodhiUpdate}>
118-
<strong>
119-
<a
120-
href={bodhi_update.web_url ?? ""}
121-
target="_blank"
122-
rel="noreferrer"
123-
>
124-
{bodhi_update.alias}
125-
</a>
126-
</strong>
127-
</Td>
128-
</Tr>
129-
))}
130-
</Tbody>
131-
</Table>
132-
<LoadMore
133-
isFetchingNextPage={isFetchingNextPage}
134-
hasNextPage={hasNextPage}
135-
fetchNextPage={() => void fetchNextPage()}
136-
/>
137-
</>
72+
<PackitPaginationContext.Provider value={value}>
73+
<PackitPagination />
74+
{isLoading ? (
75+
<SkeletonTable
76+
variant={TableVariant.compact}
77+
rows={10}
78+
columns={TableHeads}
79+
/>
80+
) : (
81+
<Table aria-label="Bodhi updates" variant={TableVariant.compact}>
82+
<Thead>
83+
<Tr>{TableHeads}</Tr>
84+
</Thead>
85+
<Tbody>
86+
{data?.map((bodhi_update) => (
87+
<Tr key={bodhi_update.packit_id}>
88+
<Td dataLabel={columnNames.forge}>
89+
{bodhi_update.project_url ? (
90+
<ForgeIcon url={bodhi_update.project_url} />
91+
) : (
92+
<ForgeIconByForge />
93+
)}
94+
</Td>
95+
<Td dataLabel={columnNames.trigger}>
96+
<strong>
97+
<TriggerLink trigger={bodhi_update}>
98+
<TriggerSuffix trigger={bodhi_update} />
99+
</TriggerLink>
100+
</strong>
101+
</Td>
102+
<Td dataLabel={columnNames.branch}>
103+
<StatusLabel
104+
target={bodhi_update.branch}
105+
status={bodhi_update.status}
106+
link={`/jobs/bodhi/${bodhi_update.packit_id}`}
107+
/>
108+
</Td>
109+
<Td dataLabel={columnNames.timeProcessed}>
110+
<Timestamp stamp={bodhi_update.submitted_time} />
111+
</Td>
112+
<Td dataLabel={columnNames.bodhiUpdate}>
113+
<strong>
114+
<a
115+
href={bodhi_update.web_url ?? ""}
116+
target="_blank"
117+
rel="noreferrer"
118+
>
119+
{bodhi_update.alias}
120+
</a>
121+
</strong>
122+
</Td>
123+
</Tr>
124+
))}
125+
</Tbody>
126+
</Table>
127+
)}
128+
</PackitPaginationContext.Provider>
138129
);
139130
};
140131

‎frontend/src/queries/bodhi/bodhiUpdatesQuery.ts‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,15 @@
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 { fetchBodhiUpdates } from "./bodhiUpdates";
66

7-
export const bodhiUpdatesQueryOptions = () =>
8-
infiniteQueryOptions({
9-
queryKey: ["bodhi"],
10-
queryFn: async ({ pageParam, signal }) =>
7+
export const bodhiUpdatesQueryOptions = (
8+
pageParam: number,
9+
perPage: number = 20,
10+
) =>
11+
queryOptions({
12+
queryKey: ["bodhi", { pageParam, perPage }],
13+
queryFn: async ({ signal }) =>
1114
await fetchBodhiUpdates({ 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-
},
2515
});

0 commit comments

Comments
 (0)