From 7d1872920c69c92c8fddb96fad10fb0900954d12 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Mon, 21 Jun 2021 10:21:25 -0700
Subject: [PATCH] Add page numbers to item search

I'm gonna make this a bit more powerful later, but just for now, the text "Page 1 of 27" shows up!

I also don't like that the page number has to blink out while we load the new stuff; there are multiple solutions, but tbh I think the Apollo Cache should be the one to handle this, and that we can do it by refactoring the query structure a bit!
---
 src/app/components/PaginationToolbar.js | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/app/components/PaginationToolbar.js b/src/app/components/PaginationToolbar.js
index 759901d..1744f9c 100644
--- a/src/app/components/PaginationToolbar.js
+++ b/src/app/components/PaginationToolbar.js
@@ -1,27 +1,33 @@
 import React from "react";
-import { Button, Flex } from "@chakra-ui/react";
+import { Box, Button, Flex } from "@chakra-ui/react";
 import { Link, useLocation } from "react-router-dom";
 
+const PER_PAGE = 30;
+
 function PaginationToolbar({ isLoading, totalCount, ...props }) {
   const { search } = useLocation();
 
   const currentOffset =
     parseInt(new URLSearchParams(search).get("offset")) || 0;
 
+  const currentPageIndex = Math.floor(currentOffset / PER_PAGE);
+  const currentPageNumber = currentPageIndex + 1;
+  const numTotalPages = totalCount ? Math.ceil(totalCount / PER_PAGE) : null;
+
   const prevPageSearchParams = new URLSearchParams(search);
-  const prevPageOffset = currentOffset - 30;
+  const prevPageOffset = currentOffset - PER_PAGE;
   prevPageSearchParams.set("offset", prevPageOffset);
   const prevPageUrl = "?" + prevPageSearchParams.toString();
   const prevPageIsDisabled = isLoading || prevPageOffset < 0;
 
   const nextPageSearchParams = new URLSearchParams(search);
-  const nextPageOffset = currentOffset + 30;
+  const nextPageOffset = currentOffset + PER_PAGE;
   nextPageSearchParams.set("offset", nextPageOffset);
   const nextPageUrl = "?" + nextPageSearchParams.toString();
   const nextPageIsDisabled = isLoading || nextPageOffset >= totalCount;
 
   return (
-    <Flex justify="space-between" {...props}>
+    <Flex align="center" justify="space-between" {...props}>
       <Button
         as={prevPageIsDisabled ? "button" : Link}
         to={prevPageIsDisabled ? undefined : prevPageUrl}
@@ -30,6 +36,11 @@ function PaginationToolbar({ isLoading, totalCount, ...props }) {
       >
         ← Prev
       </Button>
+      {numTotalPages && (
+        <Box>
+          Page {currentPageNumber} of {numTotalPages}
+        </Box>
+      )}
       <Button
         as={nextPageIsDisabled ? "button" : Link}
         to={nextPageIsDisabled ? undefined : nextPageUrl}