From 6dcad6225b797e4c536097a7e7d6d8456f91a258 Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Tue, 19 Jul 2022 14:16:20 -0600
Subject: [PATCH] Next/Previous => Older/Newer

---
 web/components/pagination.tsx | 30 +++++++++++++++++++++---------
 web/pages/notifications.tsx   |  2 ++
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/web/components/pagination.tsx b/web/components/pagination.tsx
index a585985d..069ebda7 100644
--- a/web/components/pagination.tsx
+++ b/web/components/pagination.tsx
@@ -4,8 +4,18 @@ export function Pagination(props: {
   totalItems: number
   setPage: (page: number) => void
   scrollToTop?: boolean
+  nextTitle?: string
+  prevTitle?: string
 }) {
-  const { page, itemsPerPage, totalItems, setPage, scrollToTop } = props
+  const {
+    page,
+    itemsPerPage,
+    totalItems,
+    setPage,
+    scrollToTop,
+    nextTitle,
+    prevTitle,
+  } = props
 
   const maxPage = Math.ceil(totalItems / itemsPerPage) - 1
 
@@ -25,19 +35,21 @@ export function Pagination(props: {
         </p>
       </div>
       <div className="flex flex-1 justify-between sm:justify-end">
-        <a
-          href={scrollToTop ? '#' : undefined}
-          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>
+        {page > 0 && (
+          <a
+            href={scrollToTop ? '#' : undefined}
+            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)}
+          >
+            {prevTitle ?? 'Previous'}
+          </a>
+        )}
         <a
           href={scrollToTop ? '#' : undefined}
           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
+          {nextTitle ?? 'Next'}
         </a>
       </div>
     </nav>
diff --git a/web/pages/notifications.tsx b/web/pages/notifications.tsx
index a45bf030..7867e197 100644
--- a/web/pages/notifications.tsx
+++ b/web/pages/notifications.tsx
@@ -205,6 +205,8 @@ function NotificationsList(props: {
             totalItems={allGroupedNotifications.length}
             setPage={setPage}
             scrollToTop
+            nextTitle={'Older'}
+            prevTitle={'Newer'}
           />
         )}
     </div>