From f294189e203bfda46c0ef1ccbcb43417318cca54 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Sun, 10 Jul 2022 18:50:59 -0500
Subject: [PATCH] Refactor notifications to use Pagination component

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

diff --git a/web/components/pagination.tsx b/web/components/pagination.tsx
index f5c5eeab..968e49a8 100644
--- a/web/components/pagination.tsx
+++ b/web/components/pagination.tsx
@@ -3,8 +3,9 @@ export function Pagination(props: {
   itemsPerPage: number
   totalItems: number
   setPage: (page: number) => void
+  scrollToTop?: boolean
 }) {
-  const { page, itemsPerPage, totalItems, setPage } = props
+  const { page, itemsPerPage, totalItems, setPage, scrollToTop } = props
 
   return (
     <nav
@@ -23,14 +24,14 @@ export function Pagination(props: {
       </div>
       <div className="flex flex-1 justify-between sm:justify-end">
         <a
-          href="#"
+          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"
-          onClick={() => page > 1 && setPage(page - 1)}
+          onClick={() => page > 0 && setPage(page - 1)}
         >
           Previous
         </a>
         <a
-          href="#"
+          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)}
         >
diff --git a/web/pages/notifications.tsx b/web/pages/notifications.tsx
index dd43d64f..7a8f6d2f 100644
--- a/web/pages/notifications.tsx
+++ b/web/pages/notifications.tsx
@@ -36,6 +36,7 @@ import { UNIQUE_BETTOR_BONUS_AMOUNT } from 'common/numeric-constants'
 import { groupBy, sum, uniq } from 'lodash'
 import Custom404 from 'web/pages/404'
 import { track } from '@amplitude/analytics-browser'
+import { Pagination } from 'web/components/pagination'
 
 export const NOTIFICATIONS_PER_PAGE = 30
 const MULTIPLE_USERS_KEY = 'multipleUsers'
@@ -82,14 +83,14 @@ export default function Notifications() {
 
 function NotificationsList(props: { privateUser: PrivateUser }) {
   const { privateUser } = props
-  const [page, setPage] = useState(1)
+  const [page, setPage] = useState(0)
   const allGroupedNotifications = usePreferredGroupedNotifications(privateUser)
   const [paginatedGroupedNotifications, setPaginatedGroupedNotifications] =
     useState<NotificationGroup[] | undefined>(undefined)
 
   useEffect(() => {
     if (!allGroupedNotifications) return
-    const start = (page - 1) * NOTIFICATIONS_PER_PAGE
+    const start = page * NOTIFICATIONS_PER_PAGE
     const end = start + NOTIFICATIONS_PER_PAGE
     const maxNotificationsToShow = allGroupedNotifications.slice(start, end)
     const remainingNotification = allGroupedNotifications.slice(end)
@@ -132,48 +133,13 @@ function NotificationsList(props: { privateUser: PrivateUser }) {
       )}
       {paginatedGroupedNotifications.length > 0 &&
         allGroupedNotifications.length > NOTIFICATIONS_PER_PAGE && (
-          <nav
-            className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
-            aria-label="Pagination"
-          >
-            <div className="hidden sm:block">
-              <p className="text-sm text-gray-700">
-                Showing{' '}
-                <span className="font-medium">
-                  {page === 1 ? page : (page - 1) * NOTIFICATIONS_PER_PAGE}
-                </span>{' '}
-                to{' '}
-                <span className="font-medium">
-                  {page * NOTIFICATIONS_PER_PAGE}
-                </span>{' '}
-                of{' '}
-                <span className="font-medium">
-                  {allGroupedNotifications.length}
-                </span>{' '}
-                results
-              </p>
-            </div>
-            <div className="flex flex-1 justify-between sm:justify-end">
-              <a
-                href="#"
-                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"
-                onClick={() => page > 1 && setPage(page - 1)}
-              >
-                Previous
-              </a>
-              <a
-                href="#"
-                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 <
-                    allGroupedNotifications?.length / NOTIFICATIONS_PER_PAGE &&
-                  setPage(page + 1)
-                }
-              >
-                Next
-              </a>
-            </div>
-          </nav>
+          <Pagination
+            page={page}
+            itemsPerPage={NOTIFICATIONS_PER_PAGE}
+            totalItems={allGroupedNotifications.length}
+            setPage={setPage}
+            scrollToTop
+          />
         )}
     </div>
   )