Paginate category images

Author: DanielOaks

src/app/apiSlice.ts

@@ -75,6 +75,13 @@ interface GetCategoryImagesRequest {
   page: number;
 }
 
+interface GetCategoryImagesResponse {
+  images: Image[];
+  total_images: number;
+  page: number;
+  total_pages: number;
+}
+
 interface GetSessionRequest {
   category: string;
   tags: TagMap;
@@ -231,7 +238,7 @@ export const api = createApi({
       }),
       invalidatesTags: ["category-images"],
     }),
-    getCategoryImages: build.query<Image[], GetCategoryImagesRequest>({
+    getCategoryImages: build.query<GetCategoryImagesResponse, GetCategoryImagesRequest>({
       query: ({ category, page }) => ({
         url: `categories/${category}/images`,
         method: "GET",

src/components/Pagination.tsx

@@ -0,0 +1,71 @@
+interface Props {
+  totalPages: number;
+  currentPage: number;
+  onPageSelected?: (newPage: number) => void;
+}
+
+function Pagination({ totalPages, currentPage, onPageSelected }: Props) {
+  const selectPage = (page: number) => {
+    if (onPageSelected) {
+      onPageSelected(page);
+    }
+  };
+
+  return (
+    <div className="flex rounded-lg bg-slate-800 px-2">
+      {currentPage > 1 && (
+        <a
+          href="#"
+          className="px-2 py-1.5"
+          onClick={(e) => {
+            e.preventDefault();
+            selectPage(1);
+          }}
+        >
+          {1}
+        </a>
+      )}
+      {currentPage - 1 > 2 && <span className="px-1 py-1.5">…</span>}
+      {currentPage - 1 > 1 && (
+        <a
+          href="#"
+          className="px-2 py-1.5"
+          onClick={(e) => {
+            e.preventDefault();
+            selectPage(currentPage - 1);
+          }}
+        >
+          {currentPage - 1}
+        </a>
+      )}
+      <span className="cursor-default px-2 py-1.5 font-bold opacity-40">{currentPage}</span>
+      {currentPage + 1 < totalPages && (
+        <a
+          href="#"
+          className="px-2 py-1.5"
+          onClick={(e) => {
+            e.preventDefault();
+            selectPage(currentPage + 1);
+          }}
+        >
+          {currentPage + 1}
+        </a>
+      )}
+      {currentPage + 1 < totalPages - 1 && <span className="px-1 py-1.5">…</span>}
+      {currentPage < totalPages && (
+        <a
+          href="#"
+          className="px-2 py-1.5"
+          onClick={(e) => {
+            e.preventDefault();
+            selectPage(totalPages);
+          }}
+        >
+          {totalPages}
+        </a>
+      )}
+    </div>
+  );
+}
+
+export default Pagination;

src/routes/AdminEditCategory.tsx

@@ -22,6 +22,7 @@ import { useUploadImageMutation } from "../app/uploadSlice";
 import NotFound from "./NotFound";
 import { TagMap } from "../types/drawref";
 import { parseError } from "../app/utilities";
+import Pagination from "../components/Pagination";
 
 type Params = {
   categoryId: string;
@@ -35,12 +36,14 @@ function AdminEditCategory() {
     return <NotFound />;
   }
 
+  const [imagesPage, setImagesPage] = useState(1);
+
   const { data: categoryData, isLoading } = useGetCategoryQuery(categoryId);
   const {
     data: categoryImages,
     isLoading: isLoadingCategoryImages,
     error: getCategoryImagesError,
-  } = useGetCategoryImagesQuery({ category: categoryId, page: 0 });
+  } = useGetCategoryImagesQuery({ category: categoryId, page: imagesPage - 1 });
 
   const [existingAuthor, setExistingAuthor] = useState("");
   const [typeOfUpload, setTypeOfUpload] = useState("upload");
@@ -285,9 +288,16 @@ function AdminEditCategory() {
               {!isLoadingCategoryImages && (
                 <div className="box-border flex w-[28em] max-w-full flex-col gap-3 border-[5px] border-primary-700 bg-primary-900 px-4 py-6">
                   <h2 className="text-xl font-medium">Images</h2>
+                  <div className="flex justify-center">
+                    <Pagination
+                      totalPages={categoryImages?.total_pages || 0}
+                      currentPage={imagesPage}
+                      onPageSelected={(newPage) => setImagesPage(newPage)}
+                    />
+                  </div>
                   <div className="flex flex-wrap items-center justify-center gap-4">
                     {categoryImages &&
-                      categoryImages.map((img) => (
+                      categoryImages.images.map((img) => (
                         <button
                           key={img.id}
                           className="h-20 w-20 rounded-lg bg-cover hover:border-8 hover:border-red-500 hover:blur"