From e868f0a15ab5e265c33b253a7606f304695154b0 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Wed, 13 Jul 2022 15:15:03 -0500
Subject: [PATCH] Fix pagination component going one page too far + tweaks

---
 web/components/pagination.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/web/components/pagination.tsx b/web/components/pagination.tsx
index 968e49a8..a585985d 100644
--- a/web/components/pagination.tsx
+++ b/web/components/pagination.tsx
@@ -7,6 +7,8 @@ export function Pagination(props: {
 }) {
   const { page, itemsPerPage, totalItems, setPage, scrollToTop } = props
 
+  const maxPage = Math.ceil(totalItems / itemsPerPage) - 1
+
   return (
     <nav
       className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
@@ -14,26 +16,26 @@ export function Pagination(props: {
     >
       <div className="hidden sm:block">
         <p className="text-sm text-gray-700">
-          Showing{' '}
+          Showing <span className="font-medium">{page * itemsPerPage + 1}</span>{' '}
+          to{' '}
           <span className="font-medium">
-            {page === 0 ? page + 1 : page * itemsPerPage}
+            {Math.min(totalItems, (page + 1) * itemsPerPage)}
           </span>{' '}
-          to <span className="font-medium">{(page + 1) * itemsPerPage}</span> of{' '}
-          <span className="font-medium">{totalItems}</span> results
+          of <span className="font-medium">{totalItems}</span> results
         </p>
       </div>
       <div className="flex flex-1 justify-between sm:justify-end">
         <a
           href={scrollToTop ? '#' : undefined}
-          className="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+          className="relative inline-flex cursor-pointer select-none items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
           onClick={() => page > 0 && setPage(page - 1)}
         >
           Previous
         </a>
         <a
           href={scrollToTop ? '#' : undefined}
-          className="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
-          onClick={() => page < totalItems / itemsPerPage && setPage(page + 1)}
+          className="relative ml-3 inline-flex cursor-pointer select-none items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+          onClick={() => page < maxPage && setPage(page + 1)}
         >
           Next
         </a>