feat(Projects): Paginate with pages and context

This now has a context that each component under the provider can use.
With this we reduce the code we need to write to handle state handling
between components.

Infinite pagination has been replaced with per-page pagination which
should suit people better than infinitely loading.

feat: proper pagination

Author: Venefilyn

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 (
-    <>
+    <PackitPaginationContext.Provider value={value}>
       <PageSection hasBodyWrapper={false}>
         <Content>
           <Content component="h1">Projects</Content>
@@ -20,10 +27,11 @@ const Projects = () => {
       <PageGroup>
         <PageSection hasBodyWrapper={false}>
           <ProjectSearch />
+          <PackitPagination />
           <ProjectsList />
         </PageSection>
       </PageGroup>
-    </>
+    </PackitPaginationContext.Provider>
   );
 };
 

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<ProjectsListProps> = ({ 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<string, ColumnKey> = {};
 
   // Headings
@@ -65,9 +68,6 @@ const ProjectsList: React.FC<ProjectsListProps> = ({ 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 = [
     <Th width={25} key={columnNames.repositories}>
       {columnNames.repositories}
@@ -101,7 +101,7 @@ const ProjectsList: React.FC<ProjectsListProps> = ({ forge, namespace }) => {
         <Thead>
           <Tr>{TableHeads}</Tr>
         </Thead>
-        {rows.map((project) => {
+        {data?.map((project) => {
           const expandedCellKey = expandedCells
             ? expandedCells[project.repo_name]
             : null;
@@ -177,11 +177,6 @@ const ProjectsList: React.FC<ProjectsListProps> = ({ forge, namespace }) => {
           );
         })}
       </Table>
-      <LoadMore
-        isFetchingNextPage={isFetchingNextPage}
-        hasNextPage={hasNextPage}
-        fetchNextPage={() => void fetchNextPage()}
-      />
     </>
   );
 };

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<PackitPaginationProps> = ({
+  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 (
+    <Pagination
+      isCompact
+      toggleTemplate={({ firstIndex, lastIndex, itemCount }) => (
+        <>
+          <b>
+            {firstIndex} - {lastIndex}
+          </b>{" "}
+          of <b>{itemCount ? itemCount : "many"}</b>
+        </>
+      )}
+      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}
+    />
+  );
+};

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

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,14 +14,15 @@ 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,
 }: fetchProjectsProps): Promise<Project[]> => {
   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())

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