Enable pagination in Events lists

.changelog/1489.trivial.md

@@ -0,0 +1 @@
+Enable pagination in Events lists

src/app/components/RuntimeEvents/RuntimeEventsDetailedList.tsx

@@ -1,11 +1,13 @@
 import { FC } from 'react'
 import { SearchScope } from '../../../types/searchScope'
 import { RuntimeEvent } from '../../../oasis-nexus/api'
+import { TablePagination, TablePaginationProps } from '../Table/TablePagination'
 import { AddressSwitchOption } from '../AddressSwitch'
 import { useTranslation } from 'react-i18next'
 import { CardEmptyState } from '../CardEmptyState'
 import { TextSkeleton } from '../Skeleton'
 import { RuntimeEventDetails } from './RuntimeEventDetails'
+import Box from '@mui/material/Box'
 import Divider from '@mui/material/Divider'
 
 const RuntimeEventDetailsWithSeparator: FC<{
@@ -28,7 +30,8 @@ export const RuntimeEventsDetailedList: FC<{
   isLoading: boolean
   isError: boolean
   addressSwitchOption: AddressSwitchOption
-}> = ({ scope, events, isLoading, isError, addressSwitchOption }) => {
+  pagination: false | TablePaginationProps
+}> = ({ scope, events, isLoading, isError, addressSwitchOption, pagination }) => {
   const { t } = useTranslation()
   return (
     <>
@@ -44,6 +47,11 @@ export const RuntimeEventsDetailedList: FC<{
             addressSwitchOption={addressSwitchOption}
           />
         ))}
+      {pagination && (
+        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+          <TablePagination {...pagination} />
+        </Box>
+      )}
     </>
   )
 }

src/app/components/Transactions/TransactionEvents.tsx

@@ -1,5 +1,7 @@
 import { FC } from 'react'
 import { Layer, RuntimeTransaction, useGetRuntimeEvents } from '../../../oasis-nexus/api'
+import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE as limit } from '../../config'
+import { useSearchParamsPagination } from '../../components/Table/useSearchParamsPagination'
 import { AppErrors } from '../../../types/errors'
 import { AddressSwitchOption } from '../AddressSwitch'
 import { RuntimeEventsDetailedList } from '../RuntimeEvents/RuntimeEventsDetailedList'
@@ -9,12 +11,15 @@ export const TransactionEvents: FC<{
   addressSwitchOption: AddressSwitchOption
 }> = ({ transaction, addressSwitchOption }) => {
   const { network, layer } = transaction
+  const pagination = useSearchParamsPagination('page')
+  const offset = (pagination.selectedPage - 1) * limit
   if (layer === Layer.consensus) {
     throw AppErrors.UnsupportedLayer
   }
   const eventsQuery = useGetRuntimeEvents(network, layer, {
     tx_hash: transaction.hash,
-    limit: 100, // We want to avoid pagination here, if possible
+    limit,
+    offset,
   })
   const { isLoading, data, isError } = eventsQuery
   return (
@@ -24,6 +29,13 @@ export const TransactionEvents: FC<{
       isLoading={isLoading}
       isError={isError}
       addressSwitchOption={addressSwitchOption}
+      pagination={{
+        selectedPage: pagination.selectedPage,
+        linkToPage: pagination.linkToPage,
+        totalCount: data?.data.total_count,
+        isTotalCountClipped: data?.data.is_total_count_clipped,
+        rowsPerPage: limit,
+      }}
     />
   )
 }

src/app/pages/RuntimeAccountDetailsPage/AccountEventsCard.tsx

@@ -3,6 +3,7 @@ import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'
 import CardContent from '@mui/material/CardContent'
 import { useTranslation } from 'react-i18next'
+import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE as limit } from '../../config'
 import { RuntimeEventsDetailedList } from '../../components/RuntimeEvents/RuntimeEventsDetailedList'
 import { AddressSwitchOption } from '../../components/AddressSwitch'
 import { ErrorBoundary } from '../../components/ErrorBoundary'
@@ -14,7 +15,10 @@ export const eventsContainerId = 'events'
 
 export const AccountEventsCard: FC<RuntimeAccountDetailsContext> = ({ scope, address }) => {
   const { t } = useTranslation()
-  const { isLoading, isError, events } = useAccountEvents(scope, address)
+  const { isLoading, isError, events, pagination, totalCount, isTotalCountClipped } = useAccountEvents(
+    scope,
+    address,
+  )
 
   return (
     <Card>
@@ -29,6 +33,13 @@ export const AccountEventsCard: FC<RuntimeAccountDetailsContext> = ({ scope, add
             isLoading={isLoading}
             isError={isError}
             addressSwitchOption={AddressSwitchOption.ETH} // TODO
+            pagination={{
+              selectedPage: pagination.selectedPage,
+              linkToPage: pagination.linkToPage,
+              totalCount,
+              isTotalCountClipped,
+              rowsPerPage: limit,
+            }}
           />
         </ErrorBoundary>
       </CardContent>

src/app/pages/RuntimeAccountDetailsPage/hook.ts

@@ -6,7 +6,7 @@ import {
 } from '../../../oasis-nexus/api'
 import { AppErrors } from '../../../types/errors'
 import { useSearchParamsPagination } from '../../components/Table/useSearchParamsPagination'
-import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE } from '../../config'
+import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE as limit } from '../../config'
 import { SearchScope } from '../../../types/searchScope'
 import { getOasisAddressOrNull } from '../../utils/helpers'
 
@@ -27,7 +27,7 @@ export const useAccount = (scope: SearchScope, address: string) => {
 export const useAccountTransactions = (scope: SearchScope, address: string) => {
   const { network, layer } = scope
   const pagination = useSearchParamsPagination('page')
-  const offset = (pagination.selectedPage - 1) * NUMBER_OF_ITEMS_ON_SEPARATE_PAGE
+  const offset = (pagination.selectedPage - 1) * limit
   if (layer === Layer.consensus) {
     throw AppErrors.UnsupportedLayer
     // Loading transactions on the consensus layer is not supported yet.
@@ -39,7 +39,7 @@ export const useAccountTransactions = (scope: SearchScope, address: string) => {
     network,
     layer, // This is OK since consensus has been handled separately
     {
-      limit: NUMBER_OF_ITEMS_ON_SEPARATE_PAGE,
+      limit,
       offset: offset,
       rel: oasisAddress!,
     },
@@ -71,6 +71,8 @@ export const useAccountTransactions = (scope: SearchScope, address: string) => {
 
 export const useAccountEvents = (scope: SearchScope, address: string) => {
   const { network, layer } = scope
+  const pagination = useSearchParamsPagination('page')
+  const offset = (pagination.selectedPage - 1) * limit
   if (layer === Layer.consensus) {
     throw AppErrors.UnsupportedLayer
     // Loading events on the consensus layer is not supported yet.
@@ -82,6 +84,8 @@ export const useAccountEvents = (scope: SearchScope, address: string) => {
     network,
     layer,
     {
+      limit,
+      offset: offset,
       rel: oasisAddress!,
       // TODO: implement filtering for non-transactional events
     },
@@ -93,5 +97,13 @@ export const useAccountEvents = (scope: SearchScope, address: string) => {
   )
   const { isFetched, isLoading, isError, data } = query
   const events = data?.data.events
-  return { isFetched, isLoading, isError, events }
+
+  if (isFetched && pagination.selectedPage > 1 && !events?.length) {
+    throw AppErrors.PageDoesNotExist
+  }
+
+  const totalCount = data?.data.total_count
+  const isTotalCountClipped = data?.data.is_total_count_clipped
+
+  return { isFetched, isLoading, isError, events, pagination, totalCount, isTotalCountClipped }
 }

src/app/pages/RuntimeBlockDetailPage/BlockEventsCard.tsx

@@ -4,6 +4,8 @@ import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'
 import CardContent from '@mui/material/CardContent'
 import { Layer, useGetRuntimeEvents } from '../../../oasis-nexus/api'
+import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE as limit } from '../../config'
+import { useSearchParamsPagination } from '../../components/Table/useSearchParamsPagination'
 import { ErrorBoundary } from '../../components/ErrorBoundary'
 import { AppErrors } from '../../../types/errors'
 import { RuntimeEventsDetailedList } from '../../components/RuntimeEvents/RuntimeEventsDetailedList'
@@ -16,6 +18,8 @@ export const eventsContainerId = 'events'
 
 const EventsList: FC<RuntimeBlockDetailsContext> = ({ scope, blockHeight }) => {
   const { t } = useTranslation()
+  const pagination = useSearchParamsPagination('page')
+  const offset = (pagination.selectedPage - 1) * limit
   if (scope.layer === Layer.consensus) {
     // Loading events for consensus blocks is not yet supported.
     // Should use useGetConsensusEvents()
@@ -24,7 +28,8 @@ const EventsList: FC<RuntimeBlockDetailsContext> = ({ scope, blockHeight }) => {
   const eventsQuery = useGetRuntimeEvents(scope.network, scope.layer, {
     block: blockHeight,
     // TODO: search for tx_hash = null
-    limit: 100, // We want to avoid pagination here, if possible
+    limit,
+    offset,
   })
 
   const { isLoading, isError, data } = eventsQuery
@@ -48,6 +53,13 @@ const EventsList: FC<RuntimeBlockDetailsContext> = ({ scope, blockHeight }) => {
       isLoading={isLoading}
       isError={isError}
       addressSwitchOption={AddressSwitchOption.ETH}
+      pagination={{
+        selectedPage: pagination.selectedPage,
+        linkToPage: pagination.linkToPage,
+        totalCount: data?.data.total_count,
+        isTotalCountClipped: data?.data.is_total_count_clipped,
+        rowsPerPage: limit,
+      }}
     />
   )
 }