Refactor notifications to use Pagination component
This commit is contained in:
parent
162e73912e
commit
f294189e20
|
@ -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)}
|
||||||
>
|
>
|
||||||
|
|
|
@ -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>
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in New Issue
Block a user