diff --git a/frontend/src/components/bodhi/BodhiUpdatesTable.tsx b/frontend/src/components/bodhi/BodhiUpdatesTable.tsx index 2fbde430..e7be2506 100644 --- a/frontend/src/components/bodhi/BodhiUpdatesTable.tsx +++ b/frontend/src/components/bodhi/BodhiUpdatesTable.tsx @@ -1,7 +1,7 @@ // Copyright Contributors to the Packit project. // SPDX-License-Identifier: MIT -import { useMemo } from "react"; +import { useState } from "react"; import { Table, @@ -14,7 +14,7 @@ import { } from "@patternfly/react-table"; import { SkeletonTable } from "@patternfly/react-component-groups"; -import { useInfiniteQuery } from "@tanstack/react-query"; +import { useQuery } from "@tanstack/react-query"; import { ErrorConnection } from "../../components/errors/ErrorConnection"; import { Timestamp } from "../../components/shared/Timestamp"; import { @@ -23,10 +23,15 @@ import { } from "../../components/trigger/TriggerLink"; import { bodhiUpdatesQueryOptions } from "../../queries/bodhi/bodhiUpdatesQuery"; import { ForgeIcon, ForgeIconByForge } from "../icons/ForgeIcon"; -import { LoadMore } from "../shared/LoadMore"; +import { PackitPagination } from "../shared/PackitPagination"; +import { PackitPaginationContext } from "../shared/PackitPaginationContext"; import { StatusLabel } from "../statusLabels/StatusLabel"; const BodhiUpdatesTable = () => { + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(10); + const value = { page, setPage, perPage, setPerPage }; + // Headings const columnNames = { forge: "Forge", @@ -36,17 +41,9 @@ const BodhiUpdatesTable = () => { bodhiUpdate: "Bodhi Update", }; - const { - isLoading, - isError, - fetchNextPage, - data, - isFetchingNextPage, - hasNextPage, - } = useInfiniteQuery(bodhiUpdatesQueryOptions()); - - // 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 - const rows = useMemo(() => (data ? data.pages.flat() : []), [data]); + const { isLoading, isError, data } = useQuery( + bodhiUpdatesQueryOptions(page, perPage), + ); const TableHeads = [ @@ -71,70 +68,64 @@ const BodhiUpdatesTable = () => { return ; } - if (isLoading) { - return ( - - ); - } - return ( - <> - - - {TableHeads} - - - {rows.map((bodhi_update) => ( - - - - - - - - ))} - -
- {bodhi_update.project_url ? ( - - ) : ( - - )} - - - - - - - - - - - - - - {bodhi_update.alias} - - -
- void fetchNextPage()} - /> - + + + {isLoading ? ( + + ) : ( + + + {TableHeads} + + + {data?.map((bodhi_update) => ( + + + + + + + + ))} + +
+ {bodhi_update.project_url ? ( + + ) : ( + + )} + + + + + + + + + + + + + + {bodhi_update.alias} + + +
+ )} + ); }; diff --git a/frontend/src/components/copr/CoprBuildsTable.tsx b/frontend/src/components/copr/CoprBuildsTable.tsx index fb957f7e..0f2b5324 100644 --- a/frontend/src/components/copr/CoprBuildsTable.tsx +++ b/frontend/src/components/copr/CoprBuildsTable.tsx @@ -1,7 +1,7 @@ // Copyright Contributors to the Packit project. // SPDX-License-Identifier: MIT -import React, { useMemo } from "react"; +import React, { useState } from "react"; import { Table, @@ -14,10 +14,11 @@ import { } from "@patternfly/react-table"; import { SkeletonTable } from "@patternfly/react-component-groups"; -import { useInfiniteQuery } from "@tanstack/react-query"; +import { useQuery } from "@tanstack/react-query"; import { coprBuildsQueryOptions } from "../../queries/copr/coprBuildsQuery"; import { ForgeIcon } from "../icons/ForgeIcon"; -import { LoadMore } from "../shared/LoadMore"; +import { PackitPagination } from "../shared/PackitPagination"; +import { PackitPaginationContext } from "../shared/PackitPaginationContext"; import { Timestamp } from "../shared/Timestamp"; import { StatusLabel } from "../statusLabels/StatusLabel"; import { TriggerLink, TriggerSuffix } from "../trigger/TriggerLink"; @@ -53,8 +54,11 @@ const ChrootStatuses: React.FC = (props) => { }; const CoprBuildsTable = () => { - const { data, isLoading, isFetchingNextPage, fetchNextPage, hasNextPage } = - useInfiniteQuery(coprBuildsQueryOptions()); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(10); + const value = { page, setPage, perPage, setPerPage }; + + const { data, isLoading } = useQuery(coprBuildsQueryOptions(page, perPage)); // Headings const columnNames = { @@ -65,9 +69,6 @@ const CoprBuildsTable = () => { coprBuild: "Copr Build", }; - // 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 - const rows = useMemo(() => (data ? data.pages.flat() : []), [data]); - const TableHeads = [ {columnNames.forge} @@ -86,61 +87,59 @@ const CoprBuildsTable = () => { , ]; - if (isLoading) { - return ( - - ); - } - return ( - <> - - - {TableHeads} - - - {rows.map((copr_build) => ( - - - - - - - - ))} - -
- - - - - - - - - - - - - - - {copr_build.build_id} - - -
- void fetchNextPage()} - /> - + + + {isLoading ? ( + + ) : ( + + + {TableHeads} + + + {data?.map((copr_build) => ( + + + + + + + + ))} + +
+ + + + + + + + + + + + + + + {copr_build.build_id} + + +
+ )} + ); }; diff --git a/frontend/src/components/koji/KojiBuildsTable.tsx b/frontend/src/components/koji/KojiBuildsTable.tsx index b653c0eb..f456bffa 100644 --- a/frontend/src/components/koji/KojiBuildsTable.tsx +++ b/frontend/src/components/koji/KojiBuildsTable.tsx @@ -1,7 +1,7 @@ // Copyright Contributors to the Packit project. // SPDX-License-Identifier: MIT -import React, { useMemo } from "react"; +import React, { useState } from "react"; import { Table, @@ -14,7 +14,7 @@ import { } from "@patternfly/react-table"; import { SkeletonTable } from "@patternfly/react-component-groups"; -import { useInfiniteQuery } from "@tanstack/react-query"; +import { useQuery } from "@tanstack/react-query"; import { Timestamp } from "../../components/shared/Timestamp"; import { TriggerLink, @@ -22,15 +22,21 @@ import { } from "../../components/trigger/TriggerLink"; import { kojiBuildsQueryOptions } from "../../queries/koji/kojiBuildsQuery"; import { ForgeIcon } from "../icons/ForgeIcon"; -import { LoadMore } from "../shared/LoadMore"; +import { PackitPagination } from "../shared/PackitPagination"; +import { PackitPaginationContext } from "../shared/PackitPaginationContext"; import { StatusLabel } from "../statusLabels/StatusLabel"; interface KojiBuildTableProps { scratch: boolean; } export const KojiBuildsTable: React.FC = ({ scratch }) => { - const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } = - useInfiniteQuery(kojiBuildsQueryOptions({ scratch })); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(10); + const value = { page, setPage, perPage, setPerPage }; + + const { data, isLoading } = useQuery( + kojiBuildsQueryOptions({ scratch, pageParam: page, perPage }), + ); // Headings const columnNames = { @@ -41,9 +47,6 @@ export const KojiBuildsTable: React.FC = ({ scratch }) => { kojiBuildTask: "Koji Build Task", }; - // 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 - const rows = useMemo(() => (data ? data.pages.flat() : []), [data]); - const TableHeads = [ {columnNames.forge} @@ -62,61 +65,59 @@ export const KojiBuildsTable: React.FC = ({ scratch }) => { , ]; - if (isLoading) { - return ( - - ); - } - return ( - <> - - - {TableHeads} - - - {rows.map((koji_build) => ( - - - - - - - - ))} - -
- - - - - - - - - - - - - - - {koji_build.task_id} - - -
- void fetchNextPage()} - /> - + + + {isLoading ? ( + + ) : ( + + + {TableHeads} + + + {data?.map((koji_build) => ( + + + + + + + + ))} + +
+ + + + + + + + + + + + + + + {koji_build.task_id} + + +
+ )} + ); }; diff --git a/frontend/src/components/koji/KojiTagRequestsTable.tsx b/frontend/src/components/koji/KojiTagRequestsTable.tsx index 8110c86a..563cc2b0 100644 --- a/frontend/src/components/koji/KojiTagRequestsTable.tsx +++ b/frontend/src/components/koji/KojiTagRequestsTable.tsx @@ -1,7 +1,7 @@ // Copyright Contributors to the Packit project. // SPDX-License-Identifier: MIT -import React, { useMemo } from "react"; +import React, { useState } from "react"; import { Table, @@ -14,7 +14,7 @@ import { } from "@patternfly/react-table"; import { SkeletonTable } from "@patternfly/react-component-groups"; -import { useInfiniteQuery } from "@tanstack/react-query"; +import { useQuery } from "@tanstack/react-query"; import { Timestamp } from "../../components/shared/Timestamp"; import { TriggerLink, @@ -22,10 +22,15 @@ import { } from "../../components/trigger/TriggerLink"; import { kojiTagRequestsQueryOptions } from "../../queries/koji/kojiTagRequestsQuery"; import { ForgeIcon } from "../icons/ForgeIcon"; -import { LoadMore } from "../shared/LoadMore"; +import { PackitPagination } from "../shared/PackitPagination"; +import { PackitPaginationContext } from "../shared/PackitPaginationContext"; import { StatusLabel } from "../statusLabels/StatusLabel"; export const KojiTagRequestsTable = () => { + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(10); + const value = { page, setPage, perPage, setPerPage }; + // Headings const columnNames = { forge: "Forge", @@ -37,11 +42,9 @@ export const KojiTagRequestsTable = () => { kojiTagRequestTask: "Koji Tagging Request Task", }; - const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } = - useInfiniteQuery(kojiTagRequestsQueryOptions()); - - // 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 - const rows = useMemo(() => (data ? data.pages.flat() : []), [data]); + const { data, isLoading } = useQuery( + kojiTagRequestsQueryOptions(page, perPage), + ); const TableHeads = [ @@ -67,89 +70,86 @@ export const KojiTagRequestsTable = () => { , ]; - if (isLoading) { - return ( - - ); - } - return ( - <> - - - {TableHeads} - - - {rows.map((koji_tag_request) => ( - - - - - - - - - - ))} - -
- - - - - - - - - - - - - {koji_tag_request.sidetag} - - - - - - {koji_tag_request.nvr} - - - - - - - - {koji_tag_request.task_id} - - -
- void fetchNextPage()} - /> - + + + {isLoading ? ( + + ) : ( + + + {TableHeads} + + + {data?.map((koji_tag_request) => ( + + + + + + + + + + ))} + +
+ + + + + + + + + + + + + {koji_tag_request.sidetag} + + + + + + {koji_tag_request.nvr} + + + + + + + + {koji_tag_request.task_id} + + +
+ )} + ); }; diff --git a/frontend/src/components/osh/OSHScansTable.tsx b/frontend/src/components/osh/OSHScansTable.tsx index ddf9b0c6..343984e4 100644 --- a/frontend/src/components/osh/OSHScansTable.tsx +++ b/frontend/src/components/osh/OSHScansTable.tsx @@ -1,7 +1,7 @@ // Copyright Contributors to the Packit project. // SPDX-License-Identifier: MIT -import { useMemo } from "react"; +import { useState } from "react"; import { Table, @@ -14,7 +14,7 @@ import { } from "@patternfly/react-table"; import { SkeletonTable } from "@patternfly/react-component-groups"; -import { useInfiniteQuery } from "@tanstack/react-query"; +import { useQuery } from "@tanstack/react-query"; import { ErrorConnection } from "../../components/errors/ErrorConnection"; import { Timestamp } from "../../components/shared/Timestamp"; import { @@ -23,10 +23,15 @@ import { } from "../../components/trigger/TriggerLink"; import { oshScansQueryOptions } from "../../queries/osh/oshScansQuery"; import { ForgeIcon } from "../icons/ForgeIcon"; -import { LoadMore } from "../shared/LoadMore"; +import { PackitPagination } from "../shared/PackitPagination"; +import { PackitPaginationContext } from "../shared/PackitPaginationContext"; import { StatusLabel } from "../statusLabels/StatusLabel"; const OSHScansTable = () => { + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(10); + const value = { page, setPage, perPage, setPerPage }; + // Headings const columnNames = { forge: "Forge", @@ -37,17 +42,9 @@ const OSHScansTable = () => { newFindings: "New findings", }; - const { - isLoading, - isError, - fetchNextPage, - data, - isFetchingNextPage, - hasNextPage, - } = useInfiniteQuery(oshScansQueryOptions()); - - // 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 - const rows = useMemo(() => (data ? data.pages.flat() : []), [data]); + const { isLoading, isError, data } = useQuery( + oshScansQueryOptions(page, perPage), + ); const TableHeads = [ @@ -75,65 +72,59 @@ const OSHScansTable = () => { return ; } - if (isLoading) { - return ( - - ); - } - return ( - <> - - - {TableHeads} - - - {rows.map((scan) => ( - - - - - - - - - ))} - -
- - - - - - - - - - - {scan.issues_added_count ?? "N/A"} - - - - - - {scan.task_id} - - -
- void fetchNextPage()} - /> - + + + {isLoading ? ( + + ) : ( + + + {TableHeads} + + + {data?.map((scan) => ( + + + + + + + + + ))} + +
+ + + + + + + + + + + {scan.issues_added_count ?? "N/A"} + + + + + + {scan.task_id} + + +
+ )} + ); }; diff --git a/frontend/src/components/pipeline/PipelinesTable.tsx b/frontend/src/components/pipeline/PipelinesTable.tsx index 341cae19..9b2ee8ab 100644 --- a/frontend/src/components/pipeline/PipelinesTable.tsx +++ b/frontend/src/components/pipeline/PipelinesTable.tsx @@ -16,7 +16,7 @@ import { import { SkeletonTable } from "@patternfly/react-component-groups"; import { LabelGroup } from "@patternfly/react-core"; import { ExternalLinkAltIcon } from "@patternfly/react-icons"; -import { useInfiniteQuery } from "@tanstack/react-query"; +import { useQuery } from "@tanstack/react-query"; import { Link } from "@tanstack/react-router"; import { PipelineRun } from "../../apiDefinitions"; import { pipelinesQueryOptions } from "../../queries/pipeline/pipelinesQuery"; @@ -24,7 +24,8 @@ import coprLogo from "../../static/copr.ico"; import kojiLogo from "../../static/koji.ico"; import { ErrorConnection } from "../errors/ErrorConnection"; import { ForgeIcon, ForgeIconByForge } from "../icons/ForgeIcon"; -import { LoadMore } from "../shared/LoadMore"; +import { PackitPagination } from "../shared/PackitPagination"; +import { PackitPaginationContext } from "../shared/PackitPaginationContext"; import { Timestamp } from "../shared/Timestamp"; import { StatusLabel } from "../statusLabels/StatusLabel"; import { SyncReleaseTargetStatusLabel } from "../statusLabels/SyncReleaseTargetStatusLabel"; @@ -104,24 +105,20 @@ const columnNames = { external: "External", }; export function PipelinesTable() { - const { - isLoading, - isError, - fetchNextPage, - data, - isFetchingNextPage, - hasNextPage, - } = useInfiniteQuery(pipelinesQueryOptions()); - - // 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 - const rows = useMemo(() => (data ? data.pages.flat() : []), [data]); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(10); + const value = { page, setPage, perPage, setPerPage }; + + const { isLoading, isError, data } = useQuery( + pipelinesQueryOptions(page, perPage), + ); const mappedRows = useMemo( () => - rows - .filter((run) => run.trigger) + data + ?.filter((run) => run.trigger) .map((run) => ), - [columnNames, rows], + [columnNames, data], ); const TableHeads = [ @@ -142,30 +139,24 @@ export function PipelinesTable() { return ; } - if (isLoading) { - return ( - - ); - } - return ( - <> - - - {TableHeads} - - {mappedRows} -
- void fetchNextPage()} - /> - + + + {isLoading ? ( + + ) : ( + + + {TableHeads} + + {mappedRows} +
+ )} + ); } diff --git a/frontend/src/components/projects/Projects.tsx b/frontend/src/components/projects/Projects.tsx index d243cd7a..bc98e1be 100644 --- a/frontend/src/components/projects/Projects.tsx +++ b/frontend/src/components/projects/Projects.tsx @@ -3,12 +3,19 @@ import { Content, PageGroup, PageSection } from "@patternfly/react-core"; +import { useState } from "react"; +import { PackitPagination } from "../shared/PackitPagination"; +import { PackitPaginationContext } from "../shared/PackitPaginationContext"; import { ProjectSearch } from "./ProjectSearch"; import { ProjectsList } from "./ProjectsList"; const Projects = () => { + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(10); + const value = { page, setPage, perPage, setPerPage }; + return ( - <> + Projects @@ -20,10 +27,11 @@ const Projects = () => { + - + ); }; diff --git a/frontend/src/components/projects/ProjectsList.tsx b/frontend/src/components/projects/ProjectsList.tsx index 911277ff..d706e161 100644 --- a/frontend/src/components/projects/ProjectsList.tsx +++ b/frontend/src/components/projects/ProjectsList.tsx @@ -1,7 +1,7 @@ // Copyright Contributors to the Packit project. // SPDX-License-Identifier: MIT -import React, { useMemo } from "react"; +import React, { useContext, useMemo, useState } from "react"; import { BlueprintIcon, @@ -19,11 +19,13 @@ import { Thead, Tr, } from "@patternfly/react-table"; -import { useInfiniteQuery } from "@tanstack/react-query"; +import { useInfiniteQuery, useQuery } from "@tanstack/react-query"; import { Link } from "@tanstack/react-router"; import { Project } from "../../apiDefinitions"; import { projectsQueryOptions } from "../../queries/project/projectsQuery"; import { LoadMore } from "../shared/LoadMore"; +import { PackitPagination } from "../shared/PackitPagination"; +import { PackitPaginationContext } from "../shared/PackitPaginationContext"; function getProjectInfoURL(project: Project) { const urlArray = project.project_url?.split("/"); @@ -51,8 +53,9 @@ const columnNames = { type ColumnKey = keyof typeof columnNames; const ProjectsList: React.FC = ({ forge, namespace }) => { - const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } = - useInfiniteQuery(projectsQueryOptions(forge, namespace)); + const { page, perPage } = useContext(PackitPaginationContext); + const queryOptions = projectsQueryOptions(page, perPage, forge, namespace); + const { data, isLoading } = useQuery(queryOptions); const expandedCells: Record = {}; // Headings @@ -65,9 +68,6 @@ const ProjectsList: React.FC = ({ forge, namespace }) => { externalProjectLink: "External Project Link", }; - // 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 - const rows = useMemo(() => (data ? data.pages.flat() : []), [data]); - const TableHeads = [ {columnNames.repositories} @@ -92,7 +92,7 @@ const ProjectsList: React.FC = ({ forge, namespace }) => { ]; if (isLoading) { - return ; + return ; } return ( @@ -101,7 +101,7 @@ const ProjectsList: React.FC = ({ forge, namespace }) => { {TableHeads} - {rows.map((project) => { + {data?.map((project) => { const expandedCellKey = expandedCells ? expandedCells[project.repo_name] : null; @@ -177,11 +177,6 @@ const ProjectsList: React.FC = ({ forge, namespace }) => { ); })} - void fetchNextPage()} - /> ); }; diff --git a/frontend/src/components/shared/PackitPagination.tsx b/frontend/src/components/shared/PackitPagination.tsx new file mode 100644 index 00000000..bdb1b121 --- /dev/null +++ b/frontend/src/components/shared/PackitPagination.tsx @@ -0,0 +1,60 @@ +// Copyright Contributors to the Packit project. +// SPDX-License-Identifier: MIT + +import { Pagination } from "@patternfly/react-core"; +import React, { useContext } from "react"; +import { PackitPaginationContext } from "./PackitPaginationContext"; + +interface PackitPaginationProps { + itemCount?: number; +} + +export const PackitPagination: React.FC = ({ + itemCount, +}) => { + const { page, perPage, setPage, setPerPage } = useContext( + PackitPaginationContext, + ); + + const onSetPage = ( + _event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + newPage: number, + ) => { + setPage(newPage); + }; + + const onPerPageSelect = ( + _event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + newPerPage: number, + newPage: number, + ) => { + setPerPage(newPerPage); + setPage(newPage); + }; + + return ( + ( + <> + + {firstIndex} - {lastIndex} + {" "} + of {itemCount ? itemCount : "many"} + + )} + perPageOptions={[ + { title: "10", value: 10 }, + { title: "20", value: 20 }, + { title: "50", value: 50 }, + ]} + isSticky + itemCount={itemCount} + widgetId="indeterminate-loading" + perPage={perPage} + page={page} + onSetPage={onSetPage} + onPerPageSelect={onPerPageSelect} + /> + ); +}; diff --git a/frontend/src/components/shared/PackitPaginationContext.tsx b/frontend/src/components/shared/PackitPaginationContext.tsx new file mode 100644 index 00000000..8395e1db --- /dev/null +++ b/frontend/src/components/shared/PackitPaginationContext.tsx @@ -0,0 +1,16 @@ +// Copyright Contributors to the Packit project. +// SPDX-License-Identifier: MIT + +import { createContext } from "react"; + +// set the defaults +export const PackitPaginationContext = createContext({ + page: 1, // sane defaults + perPage: 10, // sane defaults + setPage: (_page: number) => { + // Implement when using context + }, + setPerPage: (_perPage: number) => { + // Implement when using context + }, +}); diff --git a/frontend/src/components/srpm/SRPMBuildsTable.tsx b/frontend/src/components/srpm/SRPMBuildsTable.tsx index 8afb047e..ef427b4a 100644 --- a/frontend/src/components/srpm/SRPMBuildsTable.tsx +++ b/frontend/src/components/srpm/SRPMBuildsTable.tsx @@ -1,7 +1,7 @@ // Copyright Contributors to the Packit project. // SPDX-License-Identifier: MIT -import { useMemo } from "react"; +import { useState } from "react"; import { Table, @@ -14,24 +14,24 @@ import { } from "@patternfly/react-table"; import { SkeletonTable } from "@patternfly/react-component-groups"; -import { useInfiniteQuery } from "@tanstack/react-query"; +import { useQuery } from "@tanstack/react-query"; import { srpmBuildsQueryOptions } from "../../queries/srpm/srpmBuildsQuery"; import { ErrorConnection } from "../errors/ErrorConnection"; import { ForgeIcon } from "../icons/ForgeIcon"; -import { LoadMore } from "../shared/LoadMore"; +import { PackitPagination } from "../shared/PackitPagination"; +import { PackitPaginationContext } from "../shared/PackitPaginationContext"; import { Timestamp } from "../shared/Timestamp"; import { StatusLabel } from "../statusLabels/StatusLabel"; import { TriggerLink, TriggerSuffix } from "../trigger/TriggerLink"; export const SRPMBuildsTable = () => { - const { - isLoading, - isError, - data, - isFetchingNextPage, - hasNextPage, - fetchNextPage, - } = useInfiniteQuery(srpmBuildsQueryOptions()); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(10); + const value = { page, setPage, perPage, setPerPage }; + + const { isLoading, isError, data } = useQuery( + srpmBuildsQueryOptions(page, perPage), + ); // Headings const columnNames = { @@ -41,9 +41,6 @@ export const SRPMBuildsTable = () => { timeSubmitted: "Time Submitted", }; - // 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 - const rows = useMemo(() => (data ? data.pages.flat() : []), [data]); - const TableHeads = [ {columnNames.forge} @@ -64,53 +61,47 @@ export const SRPMBuildsTable = () => { return ; } - if (isLoading) { - return ( - - ); - } - return ( - <> - - - {TableHeads} - - - {rows.map((srpm_build) => ( - - - - - - - ))} - -
- - - - - - - - - - - -
- void fetchNextPage()} - /> - + + + {isLoading ? ( + + ) : ( + + + {TableHeads} + + + {data?.map((srpm_build) => ( + + + + + + + ))} + +
+ + + + + + + + + + + +
+ )} + ); }; diff --git a/frontend/src/components/sync-release/SyncReleasesTable.tsx b/frontend/src/components/sync-release/SyncReleasesTable.tsx index f3962a4f..f846d367 100644 --- a/frontend/src/components/sync-release/SyncReleasesTable.tsx +++ b/frontend/src/components/sync-release/SyncReleasesTable.tsx @@ -1,7 +1,7 @@ // Copyright Contributors to the Packit project. // SPDX-License-Identifier: MIT -import React, { useMemo } from "react"; +import React, { useState } from "react"; import { Table, @@ -14,11 +14,12 @@ import { } from "@patternfly/react-table"; import { SkeletonTable } from "@patternfly/react-component-groups"; -import { useInfiniteQuery } from "@tanstack/react-query"; +import { useQuery } from "@tanstack/react-query"; import { syncReleasesQueryOptions } from "../../queries/sync-release/syncReleasesQuery"; import { ErrorConnection } from "../errors/ErrorConnection"; import { ForgeIcon } from "../icons/ForgeIcon"; -import { LoadMore } from "../shared/LoadMore"; +import { PackitPagination } from "../shared/PackitPagination"; +import { PackitPaginationContext } from "../shared/PackitPaginationContext"; import { Timestamp } from "../shared/Timestamp"; import { SyncReleaseTargetStatusLabel } from "../statusLabels/SyncReleaseTargetStatusLabel"; import { TriggerLink, TriggerSuffix } from "../trigger/TriggerLink"; @@ -28,6 +29,10 @@ interface SyncReleasesTableProps { export const SyncReleasesTable: React.FC = ({ job, }) => { + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(10); + const value = { page, setPage, perPage, setPerPage }; + // Headings const columnNames = { forge: "Forge", @@ -36,17 +41,9 @@ export const SyncReleasesTable: React.FC = ({ timeSubmitted: "Time Submitted", }; - const { - isLoading, - isError, - fetchNextPage, - data, - isFetchingNextPage, - hasNextPage, - } = useInfiniteQuery(syncReleasesQueryOptions({ job })); - - // 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 - const rows = useMemo(() => (data ? data.pages.flat() : []), [data]); + const { isLoading, isError, data } = useQuery( + syncReleasesQueryOptions({ job, pageParam: page, perPage }), + ); const TableHeads = [ @@ -68,59 +65,52 @@ export const SyncReleasesTable: React.FC = ({ return ; } - // Show preloader if waiting for API data - if (isLoading) { - return ( - - ); - } - return ( - <> - - - {TableHeads} - - - {rows.map((sync_release) => ( - - - - - - - ))} - -
- - - - - - - - - - - -
- void fetchNextPage()} - /> - + + + {isLoading ? ( + + ) : ( + + + {TableHeads} + + + {data?.map((sync_release) => ( + + + + + + + ))} + +
+ + + + + + + + + + + +
+ )} + ); }; interface SyncReleaseStatusesProps { diff --git a/frontend/src/components/testing-farm/TestingFarmRunsTable.tsx b/frontend/src/components/testing-farm/TestingFarmRunsTable.tsx index ccd91275..e72917f0 100644 --- a/frontend/src/components/testing-farm/TestingFarmRunsTable.tsx +++ b/frontend/src/components/testing-farm/TestingFarmRunsTable.tsx @@ -1,7 +1,7 @@ // Copyright Contributors to the Packit project. // SPDX-License-Identifier: MIT -import { useMemo } from "react"; +import { useState } from "react"; import { Table, @@ -14,16 +14,21 @@ import { } from "@patternfly/react-table"; import { SkeletonTable } from "@patternfly/react-component-groups"; -import { useInfiniteQuery } from "@tanstack/react-query"; +import { useQuery } from "@tanstack/react-query"; import { testingFarmRunsQueryOptions } from "../../queries/testingFarm/testingFarmRunsQuery"; import { ErrorConnection } from "../errors/ErrorConnection"; import { ForgeIcon } from "../icons/ForgeIcon"; -import { LoadMore } from "../shared/LoadMore"; +import { PackitPagination } from "../shared/PackitPagination"; +import { PackitPaginationContext } from "../shared/PackitPaginationContext"; import { Timestamp } from "../shared/Timestamp"; import { StatusLabel } from "../statusLabels/StatusLabel"; import { TriggerLink, TriggerSuffix } from "../trigger/TriggerLink"; export const TestingFarmRunsTable = () => { + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(10); + const value = { page, setPage, perPage, setPerPage }; + // Headings const columnNames = { forge: "Forge", @@ -33,17 +38,9 @@ export const TestingFarmRunsTable = () => { timeSubmitted: "Time Submitted", }; - const { - isLoading, - isError, - fetchNextPage, - data, - isFetchingNextPage, - hasNextPage, - } = useInfiniteQuery(testingFarmRunsQueryOptions()); - - // 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 - const rows = useMemo(() => (data ? data.pages.flat() : []), [data]); + const { isLoading, isError, data } = useQuery( + testingFarmRunsQueryOptions(page, perPage), + ); const TableHeads = [ @@ -68,60 +65,55 @@ export const TestingFarmRunsTable = () => { return ; } - if (isLoading) { - return ( - - ); - } return ( - <> - - - {TableHeads} - - - {rows.map((testing_farm_run) => ( - - - - - - - - ))} - -
- - - - - - - - - - - - - - - {testing_farm_run.pipeline_id} - - -
- void fetchNextPage()} - /> - + + + {isLoading ? ( + + ) : ( + + + {TableHeads} + + + {data?.map((testing_farm_run) => ( + + + + + + + + ))} + +
+ + + + + + + + + + + + + + + {testing_farm_run.pipeline_id} + + +
+ )} + ); }; diff --git a/frontend/src/queries/bodhi/bodhiUpdates.ts b/frontend/src/queries/bodhi/bodhiUpdates.ts index aa6f25b3..0636c977 100644 --- a/frontend/src/queries/bodhi/bodhiUpdates.ts +++ b/frontend/src/queries/bodhi/bodhiUpdates.ts @@ -5,16 +5,18 @@ import { BodhiUpdateGroup } from "../../apiDefinitions"; export interface fetchBodhiUpdatesProps { pageParam: number; + perPage: number; signal?: AbortSignal; } // Fetch data from dashboard backend (or if we want, directly from the API) export const fetchBodhiUpdates = async ({ pageParam = 1, + perPage, signal, }: fetchBodhiUpdatesProps): Promise => { const data = await fetch( - `${import.meta.env.VITE_API_URL}/bodhi-updates?page=${pageParam}`, + `${import.meta.env.VITE_API_URL}/bodhi-updates?page=${pageParam}&per_page=${perPage}`, { signal }, ) .then((response) => response.json()) diff --git a/frontend/src/queries/bodhi/bodhiUpdatesQuery.ts b/frontend/src/queries/bodhi/bodhiUpdatesQuery.ts index cdc3516b..95705879 100644 --- a/frontend/src/queries/bodhi/bodhiUpdatesQuery.ts +++ b/frontend/src/queries/bodhi/bodhiUpdatesQuery.ts @@ -1,25 +1,15 @@ // Copyright Contributors to the Packit project. // SPDX-License-Identifier: MIT -import { infiniteQueryOptions } from "@tanstack/react-query"; +import { queryOptions } from "@tanstack/react-query"; import { fetchBodhiUpdates } from "./bodhiUpdates"; -export const bodhiUpdatesQueryOptions = () => - infiniteQueryOptions({ - queryKey: ["bodhi"], - queryFn: async ({ pageParam, signal }) => - await fetchBodhiUpdates({ pageParam, signal }), - initialPageParam: 1, - getNextPageParam: (lastPage, _allPages, lastPageParam) => { - if (lastPage.length === 0) { - return undefined; - } - return lastPageParam + 1; - }, - getPreviousPageParam: (_firstPage, _allPages, firstPageParam) => { - if (firstPageParam <= 1) { - return undefined; - } - return firstPageParam - 1; - }, +export const bodhiUpdatesQueryOptions = ( + pageParam: number, + perPage: number = 20, +) => + queryOptions({ + queryKey: ["bodhi", { pageParam, perPage }], + queryFn: async ({ signal }) => + await fetchBodhiUpdates({ pageParam, perPage, signal }), }); diff --git a/frontend/src/queries/copr/coprBuilds.ts b/frontend/src/queries/copr/coprBuilds.ts index 08024893..25ef2733 100644 --- a/frontend/src/queries/copr/coprBuilds.ts +++ b/frontend/src/queries/copr/coprBuilds.ts @@ -5,16 +5,18 @@ import { CoprBuildGroup } from "../../apiDefinitions"; interface fetchCoprBuildsProps { pageParam: number; + perPage: number; signal?: AbortSignal; } // Fetch data from dashboard backend (or if we want, directly from the API) export const fetchCoprBuilds = async ({ pageParam = 1, + perPage, signal, }: fetchCoprBuildsProps): Promise => { const data = await fetch( - `${import.meta.env.VITE_API_URL}/copr-builds?page=${pageParam}`, + `${import.meta.env.VITE_API_URL}/copr-builds?page=${pageParam}&per_page=${perPage}`, { signal }, ) .then((response) => response.json()) diff --git a/frontend/src/queries/copr/coprBuildsQuery.ts b/frontend/src/queries/copr/coprBuildsQuery.ts index 111502dc..19c781b6 100644 --- a/frontend/src/queries/copr/coprBuildsQuery.ts +++ b/frontend/src/queries/copr/coprBuildsQuery.ts @@ -1,25 +1,15 @@ // Copyright Contributors to the Packit project. // SPDX-License-Identifier: MIT -import { infiniteQueryOptions } from "@tanstack/react-query"; +import { queryOptions } from "@tanstack/react-query"; import { fetchCoprBuilds } from "./coprBuilds"; -export const coprBuildsQueryOptions = () => - infiniteQueryOptions({ - queryKey: ["copr"], - queryFn: async ({ pageParam, signal }) => - await fetchCoprBuilds({ pageParam, signal }), - initialPageParam: 1, - getNextPageParam: (lastPage, _allPages, lastPageParam) => { - if (lastPage.length === 0) { - return undefined; - } - return lastPageParam + 1; - }, - getPreviousPageParam: (_firstPage, _allPages, firstPageParam) => { - if (firstPageParam <= 1) { - return undefined; - } - return firstPageParam - 1; - }, +export const coprBuildsQueryOptions = ( + pageParam: number, + perPage: number = 20, +) => + queryOptions({ + queryKey: ["copr", { pageParam, perPage }], + queryFn: async ({ signal }) => + await fetchCoprBuilds({ pageParam, perPage, signal }), }); diff --git a/frontend/src/queries/koji/kojiBuilds.ts b/frontend/src/queries/koji/kojiBuilds.ts index acc0b1cd..e834683e 100644 --- a/frontend/src/queries/koji/kojiBuilds.ts +++ b/frontend/src/queries/koji/kojiBuilds.ts @@ -5,6 +5,7 @@ import { KojiBuildGroup } from "../../apiDefinitions"; export interface fetchKojiBuildsProps { pageParam: number; + perPage: number; scratch?: boolean; signal?: AbortSignal; } @@ -12,13 +13,14 @@ export interface fetchKojiBuildsProps { // Fetch data from dashboard backend (or if we want, directly from the API) export const fetchKojiBuilds = async ({ pageParam = 1, + perPage, scratch = false, signal, }: fetchKojiBuildsProps): Promise => { const data = await fetch( `${ import.meta.env.VITE_API_URL - }/koji-builds?page=${pageParam}&scratch=${scratch.toString()}`, + }/koji-builds?page=${pageParam}&per_page=${perPage}&scratch=${scratch.toString()}`, { signal }, ) .then((response) => response.json()) diff --git a/frontend/src/queries/koji/kojiBuildsQuery.ts b/frontend/src/queries/koji/kojiBuildsQuery.ts index 223f3a7b..db0b5684 100644 --- a/frontend/src/queries/koji/kojiBuildsQuery.ts +++ b/frontend/src/queries/koji/kojiBuildsQuery.ts @@ -1,31 +1,23 @@ // Copyright Contributors to the Packit project. // SPDX-License-Identifier: MIT -import { infiniteQueryOptions } from "@tanstack/react-query"; +import { queryOptions } from "@tanstack/react-query"; import { fetchKojiBuilds, fetchKojiBuildsProps } from "./kojiBuilds"; type kojiBuildsQueryOptionsProps = Required< Pick ->; +> & { + pageParam: number; + perPage?: number; +}; export const kojiBuildsQueryOptions = ({ scratch, + pageParam, + perPage = 20, }: kojiBuildsQueryOptionsProps) => - infiniteQueryOptions({ - queryKey: ["koji", { scratch }], - queryFn: async ({ pageParam, signal }) => - await fetchKojiBuilds({ pageParam, scratch, signal }), - initialPageParam: 1, - getNextPageParam: (lastPage, _allPages, lastPageParam) => { - if (lastPage.length === 0) { - return undefined; - } - return lastPageParam + 1; - }, - getPreviousPageParam: (_firstPage, _allPages, firstPageParam) => { - if (firstPageParam <= 1) { - return undefined; - } - return firstPageParam - 1; - }, + queryOptions({ + queryKey: ["koji", { scratch, pageParam, perPage }], + queryFn: async ({ signal }) => + await fetchKojiBuilds({ scratch, pageParam, perPage, signal }), }); diff --git a/frontend/src/queries/koji/kojiTagRequests.ts b/frontend/src/queries/koji/kojiTagRequests.ts index 4c3c7d10..abbae243 100644 --- a/frontend/src/queries/koji/kojiTagRequests.ts +++ b/frontend/src/queries/koji/kojiTagRequests.ts @@ -5,16 +5,18 @@ import { KojiTagRequestGroup } from "../../apiDefinitions"; export interface fetchKojiTagRequestsProps { pageParam: number; + perPage: number; signal?: AbortSignal; } // Fetch data from dashboard backend (or if we want, directly from the API) export const fetchKojiTagRequests = async ({ pageParam = 1, + perPage, signal, }: fetchKojiTagRequestsProps): Promise => { const data = await fetch( - `${import.meta.env.VITE_API_URL}/koji-tag-requests?page=${pageParam}`, + `${import.meta.env.VITE_API_URL}/koji-tag-requests?page=${pageParam}&per_page=${perPage}`, { signal }, ) .then((response) => response.json()) diff --git a/frontend/src/queries/koji/kojiTagRequestsQuery.ts b/frontend/src/queries/koji/kojiTagRequestsQuery.ts index 863c296e..14714fcb 100644 --- a/frontend/src/queries/koji/kojiTagRequestsQuery.ts +++ b/frontend/src/queries/koji/kojiTagRequestsQuery.ts @@ -1,25 +1,15 @@ // Copyright Contributors to the Packit project. // SPDX-License-Identifier: MIT -import { infiniteQueryOptions } from "@tanstack/react-query"; +import { queryOptions } from "@tanstack/react-query"; import { fetchKojiTagRequests } from "./kojiTagRequests"; -export const kojiTagRequestsQueryOptions = () => - infiniteQueryOptions({ - queryKey: ["koji_tag"], - queryFn: async ({ pageParam, signal }) => - await fetchKojiTagRequests({ pageParam, signal }), - initialPageParam: 1, - getNextPageParam: (lastPage, _allPages, lastPageParam) => { - if (lastPage.length === 0) { - return undefined; - } - return lastPageParam + 1; - }, - getPreviousPageParam: (_firstPage, _allPages, firstPageParam) => { - if (firstPageParam <= 1) { - return undefined; - } - return firstPageParam - 1; - }, +export const kojiTagRequestsQueryOptions = ( + pageParam: number, + perPage: number = 20, +) => + queryOptions({ + queryKey: ["koji_tag", { pageParam, perPage }], + queryFn: async ({ signal }) => + await fetchKojiTagRequests({ pageParam, perPage, signal }), }); diff --git a/frontend/src/queries/osh/oshScans.ts b/frontend/src/queries/osh/oshScans.ts index bc039d6c..f59dcb8a 100644 --- a/frontend/src/queries/osh/oshScans.ts +++ b/frontend/src/queries/osh/oshScans.ts @@ -5,16 +5,18 @@ import { OSHScanGroup } from "../../apiDefinitions"; export interface fetchScansProps { pageParam: number; + perPage: number; signal?: AbortSignal; } // Fetch data from dashboard backend (or if we want, directly from the API) export const fetchScans = async ({ pageParam = 1, + perPage, signal, }: fetchScansProps): Promise => { const data = await fetch( - `${import.meta.env.VITE_API_URL}/openscanhub-scans?page=${pageParam}`, + `${import.meta.env.VITE_API_URL}/openscanhub-scans?page=${pageParam}&per_page=${perPage}`, { signal }, ) .then((response) => response.json()) diff --git a/frontend/src/queries/osh/oshScansQuery.ts b/frontend/src/queries/osh/oshScansQuery.ts index 50abfaa6..cff176c8 100644 --- a/frontend/src/queries/osh/oshScansQuery.ts +++ b/frontend/src/queries/osh/oshScansQuery.ts @@ -1,25 +1,12 @@ // Copyright Contributors to the Packit project. // SPDX-License-Identifier: MIT -import { infiniteQueryOptions } from "@tanstack/react-query"; +import { queryOptions } from "@tanstack/react-query"; import { fetchScans } from "./oshScans"; -export const oshScansQueryOptions = () => - infiniteQueryOptions({ - queryKey: ["openscanhub"], - queryFn: async ({ pageParam, signal }) => - await fetchScans({ pageParam, signal }), - initialPageParam: 1, - getNextPageParam: (lastPage, _allPages, lastPageParam) => { - if (lastPage.length === 0) { - return undefined; - } - return lastPageParam + 1; - }, - getPreviousPageParam: (_firstPage, _allPages, firstPageParam) => { - if (firstPageParam <= 1) { - return undefined; - } - return firstPageParam - 1; - }, +export const oshScansQueryOptions = (pageParam: number, perPage: number = 20) => + queryOptions({ + queryKey: ["openscanhub", { pageParam, perPage }], + queryFn: async ({ signal }) => + await fetchScans({ pageParam, perPage, signal }), }); diff --git a/frontend/src/queries/pipeline/pipelines.ts b/frontend/src/queries/pipeline/pipelines.ts index 3c9fb2b3..cb87d3ec 100644 --- a/frontend/src/queries/pipeline/pipelines.ts +++ b/frontend/src/queries/pipeline/pipelines.ts @@ -5,16 +5,18 @@ import { PipelineRun } from "../../apiDefinitions"; export interface fetchPipelinesProps { pageParam: number; + perPage: number; signal?: AbortSignal; } // Fetch data from dashboard backend (or if we want, directly from the API) export const fetchPipelines = async ({ pageParam = 1, + perPage, signal, }: fetchPipelinesProps): Promise => { const data = await fetch( - `${import.meta.env.VITE_API_URL}/runs?page=${pageParam}`, + `${import.meta.env.VITE_API_URL}/runs?page=${pageParam}&per_page=${perPage}`, { signal }, ) .then((response) => response.json()) diff --git a/frontend/src/queries/pipeline/pipelinesQuery.ts b/frontend/src/queries/pipeline/pipelinesQuery.ts index e75f0dab..ad54ff6e 100644 --- a/frontend/src/queries/pipeline/pipelinesQuery.ts +++ b/frontend/src/queries/pipeline/pipelinesQuery.ts @@ -1,25 +1,15 @@ // Copyright Contributors to the Packit project. // SPDX-License-Identifier: MIT -import { infiniteQueryOptions } from "@tanstack/react-query"; +import { queryOptions } from "@tanstack/react-query"; import { fetchPipelines } from "./pipelines"; -export const pipelinesQueryOptions = () => - infiniteQueryOptions({ - queryKey: ["pipeline"], - queryFn: async ({ pageParam, signal }) => - await fetchPipelines({ pageParam, signal }), - initialPageParam: 1, - getNextPageParam: (lastPage, _allPages, lastPageParam) => { - if (lastPage.length === 0) { - return undefined; - } - return lastPageParam + 1; - }, - getPreviousPageParam: (_firstPage, _allPages, firstPageParam) => { - if (firstPageParam <= 1) { - return undefined; - } - return firstPageParam - 1; - }, +export const pipelinesQueryOptions = ( + pageParam: number, + perPage: number = 20, +) => + queryOptions({ + queryKey: ["pipeline", { pageParam, perPage }], + queryFn: async ({ signal }) => + await fetchPipelines({ pageParam, perPage, signal }), }); diff --git a/frontend/src/queries/project/projects.ts b/frontend/src/queries/project/projects.ts index f877c822..0f07281d 100644 --- a/frontend/src/queries/project/projects.ts +++ b/frontend/src/queries/project/projects.ts @@ -5,6 +5,7 @@ import { Project } from "../../apiDefinitions"; interface fetchProjectsProps { pageParam: number; + perPage?: number; signal?: AbortSignal; forge?: string; namespace?: string; @@ -13,6 +14,7 @@ interface fetchProjectsProps { // Fetch data from dashboard backend (or if we want, directly from the API) export const fetchProjects = async ({ pageParam = 1, + perPage = 10, signal, forge, namespace, @@ -20,7 +22,7 @@ export const fetchProjects = async ({ const projects = await fetch( `${import.meta.env.VITE_API_URL}/projects${forge ? "/" + forge : ""}${ namespace ? "/" + namespace : "" - }?page=${pageParam}`, + }?page=${pageParam}&per_page=${perPage}`, { signal }, ) .then((response) => response.json()) diff --git a/frontend/src/queries/project/projectsQuery.ts b/frontend/src/queries/project/projectsQuery.ts index f280d1a8..f5728db1 100644 --- a/frontend/src/queries/project/projectsQuery.ts +++ b/frontend/src/queries/project/projectsQuery.ts @@ -1,25 +1,17 @@ // Copyright Contributors to the Packit project. // SPDX-License-Identifier: MIT -import { infiniteQueryOptions } from "@tanstack/react-query"; +import { queryOptions } from "@tanstack/react-query"; import { fetchProjects } from "./projects"; -export const projectsQueryOptions = (forge?: string, namespace?: string) => - infiniteQueryOptions({ - queryKey: ["projects", { forge, namespace }], - queryFn: async ({ pageParam, signal }) => - await fetchProjects({ pageParam, signal, forge, namespace }), - initialPageParam: 1, - getNextPageParam: (lastPage, _allPages, lastPageParam) => { - if (lastPage.length === 0) { - return undefined; - } - return lastPageParam + 1; - }, - getPreviousPageParam: (_firstPage, _allPages, firstPageParam) => { - if (firstPageParam <= 1) { - return undefined; - } - return firstPageParam - 1; - }, +export const projectsQueryOptions = ( + pageParam: number, + perPage: number = 20, + forge?: string, + namespace?: string, +) => + queryOptions({ + queryKey: ["projects", { pageParam, perPage, forge, namespace }], + queryFn: async ({ signal }) => + await fetchProjects({ pageParam, perPage, signal, forge, namespace }), }); diff --git a/frontend/src/queries/srpm/srpmBuilds.ts b/frontend/src/queries/srpm/srpmBuilds.ts index 8223b72f..a7a7eacf 100644 --- a/frontend/src/queries/srpm/srpmBuilds.ts +++ b/frontend/src/queries/srpm/srpmBuilds.ts @@ -5,16 +5,18 @@ import { SRPMBuildGroup } from "../../apiDefinitions"; export interface fetchSRPMBuildsProps { pageParam: number; + perPage: number; signal?: AbortSignal; } // Fetch data from dashboard backend (or if we want, directly from the API) export const fetchSRPMBuilds = async ({ pageParam = 1, + perPage, signal, }: fetchSRPMBuildsProps): Promise => { const data = await fetch( - `${import.meta.env.VITE_API_URL}/srpm-builds?page=${pageParam}`, + `${import.meta.env.VITE_API_URL}/srpm-builds?page=${pageParam}&per_page=${perPage}`, { signal }, ) .then((response) => response.json()) diff --git a/frontend/src/queries/srpm/srpmBuildsQuery.ts b/frontend/src/queries/srpm/srpmBuildsQuery.ts index b2871877..7a3e7b50 100644 --- a/frontend/src/queries/srpm/srpmBuildsQuery.ts +++ b/frontend/src/queries/srpm/srpmBuildsQuery.ts @@ -1,25 +1,15 @@ // Copyright Contributors to the Packit project. // SPDX-License-Identifier: MIT -import { infiniteQueryOptions } from "@tanstack/react-query"; +import { queryOptions } from "@tanstack/react-query"; import { fetchSRPMBuilds } from "./srpmBuilds"; -export const srpmBuildsQueryOptions = () => - infiniteQueryOptions({ - queryKey: ["srpm"], - queryFn: async ({ pageParam, signal }) => - await fetchSRPMBuilds({ pageParam, signal }), - initialPageParam: 1, - getNextPageParam: (lastPage, _allPages, lastPageParam) => { - if (lastPage.length === 0) { - return undefined; - } - return lastPageParam + 1; - }, - getPreviousPageParam: (_firstPage, _allPages, firstPageParam) => { - if (firstPageParam <= 1) { - return undefined; - } - return firstPageParam - 1; - }, +export const srpmBuildsQueryOptions = ( + pageParam: number, + perPage: number = 20, +) => + queryOptions({ + queryKey: ["srpm", { pageParam, perPage }], + queryFn: async ({ signal }) => + await fetchSRPMBuilds({ pageParam, perPage, signal }), }); diff --git a/frontend/src/queries/sync-release/syncReleases.ts b/frontend/src/queries/sync-release/syncReleases.ts index c0c1b274..2bc8a9d3 100644 --- a/frontend/src/queries/sync-release/syncReleases.ts +++ b/frontend/src/queries/sync-release/syncReleases.ts @@ -6,6 +6,7 @@ import { SyncReleaseJobGroup } from "../../apiDefinitions"; export interface fetchSyncReleasesProps { job: "propose-downstream" | "pull-from-upstream"; pageParam: number; + perPage: number; signal?: AbortSignal; } @@ -13,10 +14,11 @@ export interface fetchSyncReleasesProps { export const fetchSyncReleases = async ({ job, pageParam = 1, + perPage, signal, }: fetchSyncReleasesProps): Promise => { const data = await fetch( - `${import.meta.env.VITE_API_URL}/${job}?page=${pageParam}`, + `${import.meta.env.VITE_API_URL}/${job}?page=${pageParam}&per_page=${perPage}`, { signal }, ) .then((response) => response.json()) diff --git a/frontend/src/queries/sync-release/syncReleasesQuery.ts b/frontend/src/queries/sync-release/syncReleasesQuery.ts index 8c7c02f2..6a88a5c2 100644 --- a/frontend/src/queries/sync-release/syncReleasesQuery.ts +++ b/frontend/src/queries/sync-release/syncReleasesQuery.ts @@ -1,29 +1,21 @@ // Copyright Contributors to the Packit project. // SPDX-License-Identifier: MIT -import { infiniteQueryOptions } from "@tanstack/react-query"; +import { queryOptions } from "@tanstack/react-query"; import { fetchSyncReleases, fetchSyncReleasesProps } from "./syncReleases"; -type syncReleasesQueryOptionsProps = Pick; +type syncReleasesQueryOptionsProps = Pick & { + pageParam: number; + perPage: number; +}; export const syncReleasesQueryOptions = ({ job, + pageParam, + perPage = 20, }: syncReleasesQueryOptionsProps) => - infiniteQueryOptions({ - queryKey: ["sync-release", job], - queryFn: async ({ pageParam, signal }) => - await fetchSyncReleases({ job, pageParam, signal }), - initialPageParam: 1, - getNextPageParam: (lastPage, _allPages, lastPageParam) => { - if (lastPage.length === 0) { - return undefined; - } - return lastPageParam + 1; - }, - getPreviousPageParam: (_firstPage, _allPages, firstPageParam) => { - if (firstPageParam <= 1) { - return undefined; - } - return firstPageParam - 1; - }, + queryOptions({ + queryKey: ["sync-release", { job, pageParam, perPage }], + queryFn: async ({ signal }) => + await fetchSyncReleases({ job, pageParam, perPage, signal }), }); diff --git a/frontend/src/queries/testingFarm/testingFarmRuns.ts b/frontend/src/queries/testingFarm/testingFarmRuns.ts index 74dce0b8..59022e1f 100644 --- a/frontend/src/queries/testingFarm/testingFarmRuns.ts +++ b/frontend/src/queries/testingFarm/testingFarmRuns.ts @@ -5,16 +5,18 @@ import { TestingFarmRunGroup } from "../../apiDefinitions"; export interface fetchTestingFarmRunsProps { pageParam: number; + perPage: number; signal?: AbortSignal; } // Fetch data from dashboard backend (or if we want, directly from the API) export const fetchTestingFarmRuns = async ({ pageParam = 1, + perPage, signal, }: fetchTestingFarmRunsProps): Promise => { const data = await fetch( - `${import.meta.env.VITE_API_URL}/testing-farm/results?page=${pageParam}`, + `${import.meta.env.VITE_API_URL}/testing-farm/results?page=${pageParam}&per_page=${perPage}`, { signal }, ) .then((response) => response.json()) diff --git a/frontend/src/queries/testingFarm/testingFarmRunsQuery.ts b/frontend/src/queries/testingFarm/testingFarmRunsQuery.ts index d906d72c..c28ca3ff 100644 --- a/frontend/src/queries/testingFarm/testingFarmRunsQuery.ts +++ b/frontend/src/queries/testingFarm/testingFarmRunsQuery.ts @@ -1,25 +1,15 @@ // Copyright Contributors to the Packit project. // SPDX-License-Identifier: MIT -import { infiniteQueryOptions } from "@tanstack/react-query"; +import { queryOptions } from "@tanstack/react-query"; import { fetchTestingFarmRuns } from "./testingFarmRuns"; -export const testingFarmRunsQueryOptions = () => - infiniteQueryOptions({ - queryKey: ["testing-farm-runs"], - queryFn: async ({ pageParam, signal }) => - await fetchTestingFarmRuns({ pageParam, signal }), - initialPageParam: 1, - getNextPageParam: (lastPage, _allPages, lastPageParam) => { - if (lastPage.length === 0) { - return undefined; - } - return lastPageParam + 1; - }, - getPreviousPageParam: (_firstPage, _allPages, firstPageParam) => { - if (firstPageParam <= 1) { - return undefined; - } - return firstPageParam - 1; - }, +export const testingFarmRunsQueryOptions = ( + pageParam: number, + perPage: number = 20, +) => + queryOptions({ + queryKey: ["testing-farm-runs", { pageParam, perPage }], + queryFn: async ({ signal }) => + await fetchTestingFarmRuns({ pageParam, perPage, signal }), });