bug: fix loading transaction history with limit (#60)

Author: PatrickDinh

src/features/accounts/components/account-transaction-history.tsx

@@ -1,7 +1,7 @@
 import { LazyLoadDataTable } from '@/features/common/components/lazy-load-data-table'
 import { Address } from '../data/types'
-import { useFetchNextAccountTransactionPage } from '../data/account-transaction-history'
-import { useCallback } from 'react'
+import { createLoadableAccountTransactionsPage } from '../data/account-transaction-history'
+import { useCallback, useMemo } from 'react'
 import { getAccountTransactionsTableSubRows } from '../utils/get-account-transactions-table-sub-rows'
 import { InnerTransaction, Transaction } from '@/features/transactions/models'
 import { transactionsTableColumns } from '@/features/transactions/components/transactions-table-columns'
@@ -11,8 +11,8 @@ type Props = {
 }
 
 export function AccountTransactionHistory({ address }: Props) {
-  const fetchNextPage = useFetchNextAccountTransactionPage(address)
+  const createLoadablePage = useMemo(() => createLoadableAccountTransactionsPage(address), [address])
   const getSubRows = useCallback((row: Transaction | InnerTransaction) => getAccountTransactionsTableSubRows(address, row), [address])
 
-  return <LazyLoadDataTable columns={transactionsTableColumns} getSubRows={getSubRows} fetchNextPage={fetchNextPage} />
+  return <LazyLoadDataTable columns={transactionsTableColumns} getSubRows={getSubRows} createLoadablePage={createLoadablePage} />
 }

src/features/accounts/data/account-transaction-history.ts

@@ -1,18 +1,18 @@
 import { Address } from '../data/types'
 import { indexer } from '@/features/common/data'
 import { TransactionResult, TransactionSearchResults } from '@algorandfoundation/algokit-utils/types/indexer'
-import { useMemo } from 'react'
-import { JotaiStore } from '@/features/common/data/types'
 import { createTransactionsAtom, transactionResultsAtom } from '@/features/transactions/data'
 import { atomEffect } from 'jotai-effect'
-import { atom, useStore } from 'jotai'
+import { atom } from 'jotai'
+import { createLoadableViewModelPageAtom } from '@/features/common/data/lazy-load-pagination'
+import { DEFAULT_FETCH_SIZE } from '@/features/common/constants'
 
-const getAccountTransactionResults = async (address: Address, pageSize: number, nextPageToken?: string) => {
+const getAccountTransactionResults = async (address: Address, nextPageToken?: string) => {
   const results = (await indexer
     .searchForTransactions()
     .address(address)
     .nextToken(nextPageToken ?? '')
-    .limit(pageSize)
+    .limit(DEFAULT_FETCH_SIZE)
     .do()) as TransactionSearchResults
   return {
     transactionResults: results.transactions,
@@ -40,25 +40,28 @@ const createSyncEffect = (transactionResults: TransactionResult[]) => {
   })
 }
 
-const createAccountTransactionAtom = (store: JotaiStore, address: Address, pageSize: number, nextPageToken?: string) => {
+const createAccountTransactionResultsAtom = (address: Address, nextPageToken?: string) => {
   return atom(async (get) => {
-    const { transactionResults, nextPageToken: newNextPageToken } = await getAccountTransactionResults(address, pageSize, nextPageToken)
+    const { transactionResults, nextPageToken: newNextPageToken } = await getAccountTransactionResults(address, nextPageToken)
 
     get(createSyncEffect(transactionResults))
 
-    const transactions = await get(createTransactionsAtom(store, transactionResults))
-
     return {
-      rows: transactions,
+      items: transactionResults,
       nextPageToken: newNextPageToken,
     }
   })
 }
 
-export const useFetchNextAccountTransactionPage = (address: Address) => {
-  const store = useStore()
-
-  return useMemo(() => {
-    return (pageSize: number, nextPageToken?: string) => createAccountTransactionAtom(store, address, pageSize, nextPageToken)
-  }, [store, address])
+export const createLoadableAccountTransactionsPage = (address: Address) => {
+  return createLoadableViewModelPageAtom({
+    fetchRawData: (nextPageToken?: string) => createAccountTransactionResultsAtom(address, nextPageToken),
+    createViewModelPageAtom: (store, rawDataPage) =>
+      atom(async (get) => {
+        return {
+          items: await get(createTransactionsAtom(store, rawDataPage.items)),
+          hasNextPage: rawDataPage.hasNextPage,
+        }
+      }),
+  })
 }

src/features/applications/components/application-boxes.tsx

@@ -1,5 +1,5 @@
 import { LazyLoadDataTable } from '@/features/common/components/lazy-load-data-table'
-import { useFetchNextApplicationBoxPage } from '../data/application-boxes'
+import { createLoadableApplicationBoxesPage } from '../data/application-boxes'
 import { ApplicationId } from '../data/types'
 import { ColumnDef } from '@tanstack/react-table'
 import { ApplicationBoxSummary } from '../models'
@@ -11,10 +11,10 @@ type Props = {
 }
 
 export function ApplicationBoxes({ applicationId }: Props) {
-  const fetchNextPage = useFetchNextApplicationBoxPage(applicationId)
+  const createLoadablePage = useMemo(() => createLoadableApplicationBoxesPage(applicationId), [applicationId])
   const tableColumns = useMemo(() => createTableColumns(applicationId), [applicationId])
 
-  return <LazyLoadDataTable columns={tableColumns} fetchNextPage={fetchNextPage} />
+  return <LazyLoadDataTable columns={tableColumns} createLoadablePage={createLoadablePage} />
 }
 
 const createTableColumns = (applicationId: ApplicationId): ColumnDef<ApplicationBoxSummary>[] => [

src/features/applications/components/application-transaction-history.tsx

@@ -1,8 +1,8 @@
 import { LazyLoadDataTable } from '@/features/common/components/lazy-load-data-table'
 import { ApplicationId } from '../data/types'
-import { useFetchNextApplicationTransactionsPage } from '../data/application-transaction-history'
+import { createLoadableApplicationTransactionsPage } from '../data/application-transaction-history'
 import { InnerTransaction, Transaction } from '@/features/transactions/models'
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import { getApplicationTransactionsTableSubRows } from '../utils/get-application-transactions-table-sub-rows'
 import { transactionsTableColumns } from '@/features/transactions/components/transactions-table-columns'
 
@@ -11,16 +11,17 @@ type Props = {
 }
 
 export function ApplicationTransactionHistory({ applicationId }: Props) {
+  const createLoadablePage = useMemo(() => createLoadableApplicationTransactionsPage(applicationId), [applicationId])
+
   // TODO: for the future
   // How we handle getSubRows isn't the best practice. Ideally, we should create a new view model, for example, TransactionForApplication
   // and then fetchNextPage should return a list of TransactionForApplication
   // TransactionForApplication should be similar to Transaction, but the InnerTransactions should be only transactions that are related to the application
   // This way, getSubRows simply return the innerTransactions
-  const fetchNextPage = useFetchNextApplicationTransactionsPage(applicationId)
   const getSubRows = useCallback(
     (row: Transaction | InnerTransaction) => getApplicationTransactionsTableSubRows(applicationId, row),
     [applicationId]
   )
 
-  return <LazyLoadDataTable columns={transactionsTableColumns} getSubRows={getSubRows} fetchNextPage={fetchNextPage} />
+  return <LazyLoadDataTable columns={transactionsTableColumns} getSubRows={getSubRows} createLoadablePage={createLoadablePage} />
 }

src/features/applications/data/application-boxes.ts

@@ -5,12 +5,14 @@ import { atom, useAtomValue } from 'jotai'
 import { ApplicationBox, ApplicationBoxSummary } from '../models'
 import { Buffer } from 'buffer'
 import { loadable } from 'jotai/utils'
+import { createLoadableViewModelPageAtom } from '@/features/common/data/lazy-load-pagination'
+import { DEFAULT_FETCH_SIZE } from '@/features/common/constants'
 
-const getApplicationBoxes = async (applicationId: ApplicationId, pageSize: number, nextPageToken?: string) => {
+const getApplicationBoxes = async (applicationId: ApplicationId, nextPageToken?: string) => {
   const results = await indexer
     .searchForApplicationBoxes(applicationId)
     .nextToken(nextPageToken ?? '')
-    .limit(pageSize)
+    .limit(DEFAULT_FETCH_SIZE)
     .do()
 
   return {
@@ -22,23 +24,17 @@ const getApplicationBoxes = async (applicationId: ApplicationId, pageSize: numbe
 const getApplicationBox = (applicationId: ApplicationId, boxName: string) =>
   indexer.lookupApplicationBoxByIDandName(applicationId, Buffer.from(boxName, 'base64')).do()
 
-const createApplicationBoxesAtom = (applicationId: ApplicationId, pageSize: number, nextPageToken?: string) => {
+const createApplicationBoxResultsAtom = (applicationId: ApplicationId, nextPageToken?: string) => {
   return atom(async () => {
-    const { boxes, nextPageToken: newNextPageToken } = await getApplicationBoxes(applicationId, pageSize, nextPageToken)
+    const { boxes, nextPageToken: newNextPageToken } = await getApplicationBoxes(applicationId, nextPageToken)
 
     return {
-      rows: boxes,
+      items: boxes,
       nextPageToken: newNextPageToken,
     }
   })
 }
 
-export const useFetchNextApplicationBoxPage = (applicationId: ApplicationId) => {
-  return useMemo(() => {
-    return (pageSize: number, nextPageToken?: string) => createApplicationBoxesAtom(applicationId, pageSize, nextPageToken)
-  }, [applicationId])
-}
-
 export const useApplicationBox = (applicationId: ApplicationId, boxName: string) => {
   return useMemo(() => {
     return atom(async () => {
@@ -51,3 +47,10 @@ export const useApplicationBox = (applicationId: ApplicationId, boxName: string)
 export const useLoadableApplicationBox = (applicationId: ApplicationId, boxName: string) => {
   return useAtomValue(loadable(useApplicationBox(applicationId, boxName)))
 }
+
+export const createLoadableApplicationBoxesPage = (applicationId: ApplicationId) => {
+  return createLoadableViewModelPageAtom({
+    fetchRawData: (nextPageToken?: string) => createApplicationBoxResultsAtom(applicationId, nextPageToken),
+    createViewModelPageAtom: (_, rawDataPage) => atom(() => rawDataPage),
+  })
+}

src/features/applications/data/application-transaction-history.ts

@@ -1,18 +1,18 @@
 import { ApplicationId } from './types'
 import { indexer } from '@/features/common/data'
 import { TransactionResult, TransactionSearchResults } from '@algorandfoundation/algokit-utils/types/indexer'
-import { useMemo } from 'react'
-import { JotaiStore } from '@/features/common/data/types'
 import { createTransactionsAtom, transactionResultsAtom } from '@/features/transactions/data'
 import { atomEffect } from 'jotai-effect'
-import { atom, useStore } from 'jotai'
+import { atom } from 'jotai'
+import { createLoadableViewModelPageAtom } from '@/features/common/data/lazy-load-pagination'
+import { DEFAULT_FETCH_SIZE } from '@/features/common/constants'
 
-const getApplicationTransactionResults = async (applicationID: ApplicationId, pageSize: number, nextPageToken?: string) => {
+const getApplicationTransactionResults = async (applicationID: ApplicationId, nextPageToken?: string) => {
   const results = (await indexer
     .searchForTransactions()
     .applicationID(applicationID)
     .nextToken(nextPageToken ?? '')
-    .limit(pageSize)
+    .limit(DEFAULT_FETCH_SIZE)
     .do()) as TransactionSearchResults
   return {
     transactionResults: results.transactions,
@@ -40,29 +40,28 @@ const createSyncEffect = (transactionResults: TransactionResult[]) => {
   })
 }
 
-const createApplicationTransactionsAtom = (store: JotaiStore, applicationID: ApplicationId, pageSize: number, nextPageToken?: string) => {
+const createApplicationTransactionResultsAtom = (applicationID: ApplicationId, nextPageToken?: string) => {
   return atom(async (get) => {
-    const { transactionResults, nextPageToken: newNextPageToken } = await getApplicationTransactionResults(
-      applicationID,
-      pageSize,
-      nextPageToken
-    )
+    const { transactionResults, nextPageToken: newNextPageToken } = await getApplicationTransactionResults(applicationID, nextPageToken)
 
     get(createSyncEffect(transactionResults))
 
-    const transactions = await get(createTransactionsAtom(store, transactionResults))
-
     return {
-      rows: transactions,
+      items: transactionResults,
       nextPageToken: newNextPageToken,
     }
   })
 }
 
-export const useFetchNextApplicationTransactionsPage = (applicationID: ApplicationId) => {
-  const store = useStore()
-
-  return useMemo(() => {
-    return (pageSize: number, nextPageToken?: string) => createApplicationTransactionsAtom(store, applicationID, pageSize, nextPageToken)
-  }, [store, applicationID])
+export const createLoadableApplicationTransactionsPage = (applicationID: ApplicationId) => {
+  return createLoadableViewModelPageAtom({
+    fetchRawData: (nextPageToken?: string) => createApplicationTransactionResultsAtom(applicationID, nextPageToken),
+    createViewModelPageAtom: (store, rawDataPage) =>
+      atom(async (get) => {
+        return {
+          items: await get(createTransactionsAtom(store, rawDataPage.items)),
+          hasNextPage: rawDataPage.hasNextPage,
+        }
+      }),
+  })
 }

src/features/assets/components/asset-transaction-history.tsx

@@ -1,8 +1,8 @@
 import { LazyLoadDataTable } from '@/features/common/components/lazy-load-data-table'
 import { AssetId } from '../data/types'
-import { useFetchNextAssetTransactionsPage } from '../data/asset-transaction-history'
+import { createLoadableAssetTransactionsPage } from '../data/asset-transaction-history'
 import { Transaction, InnerTransaction } from '@/features/transactions/models'
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import { getAssetTransactionsTableSubRows } from '../utils/get-asset-transactions-table-sub-rows'
 import { transactionsTableColumns } from '@/features/transactions/components/transactions-table-columns'
 
@@ -11,8 +11,8 @@ type Props = {
 }
 
 export function AssetTransactionHistory({ assetId }: Props) {
-  const fetchNextPage = useFetchNextAssetTransactionsPage(assetId)
+  const createLoadablePage = useMemo(() => createLoadableAssetTransactionsPage(assetId), [assetId])
   const getSubRows = useCallback((row: Transaction | InnerTransaction) => getAssetTransactionsTableSubRows(assetId, row), [assetId])
 
-  return <LazyLoadDataTable columns={transactionsTableColumns} getSubRows={getSubRows} fetchNextPage={fetchNextPage} />
+  return <LazyLoadDataTable columns={transactionsTableColumns} getSubRows={getSubRows} createLoadablePage={createLoadablePage} />
 }

src/features/assets/data/asset-transaction-history.ts

@@ -1,18 +1,18 @@
 import { AssetId } from '../data/types'
 import { indexer } from '@/features/common/data'
 import { TransactionResult, TransactionSearchResults } from '@algorandfoundation/algokit-utils/types/indexer'
-import { useMemo } from 'react'
-import { JotaiStore } from '@/features/common/data/types'
 import { createTransactionsAtom, transactionResultsAtom } from '@/features/transactions/data'
 import { atomEffect } from 'jotai-effect'
-import { atom, useStore } from 'jotai'
+import { atom } from 'jotai'
+import { createLoadableViewModelPageAtom } from '@/features/common/data/lazy-load-pagination'
+import { DEFAULT_FETCH_SIZE } from '@/features/common/constants'
 
-const getAssetTransactionResults = async (assetId: AssetId, pageSize: number, nextPageToken?: string) => {
+const getAssetTransactionResults = async (assetId: AssetId, nextPageToken?: string) => {
   const results = (await indexer
     .searchForTransactions()
     .assetID(assetId)
     .nextToken(nextPageToken ?? '')
-    .limit(pageSize)
+    .limit(DEFAULT_FETCH_SIZE)
     .do()) as TransactionSearchResults
   return {
     transactionResults: results.transactions,
@@ -40,25 +40,28 @@ const createSyncEffect = (transactionResults: TransactionResult[]) => {
   })
 }
 
-const createAssetTransactionsAtom = (store: JotaiStore, assetId: AssetId, pageSize: number, nextPageToken?: string) => {
+const createAssetTransactionResultsAtom = (assetId: AssetId, nextPageToken?: string) => {
   return atom(async (get) => {
-    const { transactionResults, nextPageToken: newNextPageToken } = await getAssetTransactionResults(assetId, pageSize, nextPageToken)
+    const { transactionResults, nextPageToken: newNextPageToken } = await getAssetTransactionResults(assetId, nextPageToken)
 
     get(createSyncEffect(transactionResults))
 
-    const transactions = await get(createTransactionsAtom(store, transactionResults))
-
     return {
-      rows: transactions,
+      items: transactionResults,
       nextPageToken: newNextPageToken,
     }
   })
 }
 
-export const useFetchNextAssetTransactionsPage = (assetId: AssetId) => {
-  const store = useStore()
-
-  return useMemo(() => {
-    return (pageSize: number, nextPageToken?: string) => createAssetTransactionsAtom(store, assetId, pageSize, nextPageToken)
-  }, [store, assetId])
+export const createLoadableAssetTransactionsPage = (assetId: AssetId) => {
+  return createLoadableViewModelPageAtom({
+    fetchRawData: (nextPageToken?: string) => createAssetTransactionResultsAtom(assetId, nextPageToken),
+    createViewModelPageAtom: (store, rawDataPage) =>
+      atom(async (get) => {
+        return {
+          items: await get(createTransactionsAtom(store, rawDataPage.items)),
+          hasNextPage: rawDataPage.hasNextPage,
+        }
+      }),
+  })
 }

src/features/blocks/data/block.ts

@@ -20,7 +20,8 @@ const createNextRoundAvailableAtom = (store: JotaiStore, round: Round) => {
 const createBlockAtom = (store: JotaiStore, round: Round) => {
   return atom(async (get) => {
     const blockResult = await get(getBlockResultAtom(store, round))
-    const transactions = await get(createTransactionsAtom(store, getTransactionResultAtoms(store, blockResult.transactionIds)))
+    const transactionResults = await Promise.all(getTransactionResultAtoms(store, blockResult.transactionIds).map((txn) => get(txn)))
+    const transactions = await get(createTransactionsAtom(store, transactionResults))
     const nextRoundAvailable = get(createNextRoundAvailableAtom(store, round))
     return asBlock(blockResult, transactions, nextRoundAvailable)
   })