Refactor notifications to use Pagination component

This commit is contained in:
James Grugett 2022-07-10 18:50:59 -05:00
parent 162e73912e
commit f294189e20
2 changed files with 15 additions and 48 deletions

View File

@ -3,8 +3,9 @@ export function Pagination(props: {
itemsPerPage: number itemsPerPage: number
totalItems: number totalItems: number
setPage: (page: number) => void setPage: (page: number) => void
scrollToTop?: boolean
}) { }) {
const { page, itemsPerPage, totalItems, setPage } = props const { page, itemsPerPage, totalItems, setPage, scrollToTop } = props
return ( return (
<nav <nav
@ -23,14 +24,14 @@ export function Pagination(props: {
</div> </div>
<div className="flex flex-1 justify-between sm:justify-end"> <div className="flex flex-1 justify-between sm:justify-end">
<a <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" 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 Previous
</a> </a>
<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" 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)} onClick={() => page < totalItems / itemsPerPage && setPage(page + 1)}
> >

View File

@ -36,6 +36,7 @@ import { UNIQUE_BETTOR_BONUS_AMOUNT } from 'common/numeric-constants'
import { groupBy, sum, uniq } from 'lodash' import { groupBy, sum, uniq } from 'lodash'
import Custom404 from 'web/pages/404' import Custom404 from 'web/pages/404'
import { track } from '@amplitude/analytics-browser' import { track } from '@amplitude/analytics-browser'
import { Pagination } from 'web/components/pagination'
export const NOTIFICATIONS_PER_PAGE = 30 export const NOTIFICATIONS_PER_PAGE = 30
const MULTIPLE_USERS_KEY = 'multipleUsers' const MULTIPLE_USERS_KEY = 'multipleUsers'
@ -82,14 +83,14 @@ export default function Notifications() {
function NotificationsList(props: { privateUser: PrivateUser }) { function NotificationsList(props: { privateUser: PrivateUser }) {
const { privateUser } = props const { privateUser } = props
const [page, setPage] = useState(1) const [page, setPage] = useState(0)
const allGroupedNotifications = usePreferredGroupedNotifications(privateUser) const allGroupedNotifications = usePreferredGroupedNotifications(privateUser)
const [paginatedGroupedNotifications, setPaginatedGroupedNotifications] = const [paginatedGroupedNotifications, setPaginatedGroupedNotifications] =
useState<NotificationGroup[] | undefined>(undefined) useState<NotificationGroup[] | undefined>(undefined)
useEffect(() => { useEffect(() => {
if (!allGroupedNotifications) return if (!allGroupedNotifications) return
const start = (page - 1) * NOTIFICATIONS_PER_PAGE const start = page * NOTIFICATIONS_PER_PAGE
const end = start + NOTIFICATIONS_PER_PAGE const end = start + NOTIFICATIONS_PER_PAGE
const maxNotificationsToShow = allGroupedNotifications.slice(start, end) const maxNotificationsToShow = allGroupedNotifications.slice(start, end)
const remainingNotification = allGroupedNotifications.slice(end) const remainingNotification = allGroupedNotifications.slice(end)
@ -132,48 +133,13 @@ function NotificationsList(props: { privateUser: PrivateUser }) {
)} )}
{paginatedGroupedNotifications.length > 0 && {paginatedGroupedNotifications.length > 0 &&
allGroupedNotifications.length > NOTIFICATIONS_PER_PAGE && ( allGroupedNotifications.length > NOTIFICATIONS_PER_PAGE && (
<nav <Pagination
className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6" page={page}
aria-label="Pagination" itemsPerPage={NOTIFICATIONS_PER_PAGE}
> totalItems={allGroupedNotifications.length}
<div className="hidden sm:block"> setPage={setPage}
<p className="text-sm text-gray-700"> scrollToTop
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>
)} )}
</div> </div>
) )