more ui: pagination

1 files changed, 14 insertions, 9 deletions

diff --git a/packages/demobank-ui/src/hooks/access.ts b/packages/demobank-ui/src/hooks/access.ts
index 2f6848af8..20fd64bfa 100644
--- a/packages/demobank-ui/src/hooks/access.ts
+++ b/packages/demobank-ui/src/hooks/access.ts
@@ -255,7 +255,7 @@ export function useTransactionDetails(
 }
 
 interface PaginationFilter {
-  page: number;
+  // page: number;
 }
 
 export function usePublicAccounts(
@@ -275,7 +275,7 @@ export function usePublicAccounts(
   } = useSWR<
     HttpResponseOk<SandboxBackend.CoreBank.PublicAccountsResponse>,
     RequestError<SandboxBackend.SandboxError>
-  >([`public-accounts`, args?.page, PAGE_SIZE], paginatedFetcher);
+  >([`public-accounts`, page, PAGE_SIZE], paginatedFetcher);
 
   const [lastAfter, setLastAfter] = useState<
     HttpResponse<
@@ -334,7 +334,7 @@ export function useTransactions(
 > {
   const { paginatedFetcher } = useAuthenticatedBackend();
 
-  const [page, setPage] = useState(1);
+  const [start, setStart] = useState<string>();
 
   const {
     data: afterData,
@@ -344,7 +344,7 @@ export function useTransactions(
     HttpResponseOk<SandboxBackend.CoreBank.BankAccountTransactionsResponse>,
     RequestError<SandboxBackend.SandboxError>
   >(
-    [`accounts/${account}/transactions`, args?.page, PAGE_SIZE],
+    [`accounts/${account}/transactions`, start, PAGE_SIZE],
     paginatedFetcher, {
     refreshInterval: 0,
     refreshWhenHidden: false,
@@ -374,19 +374,24 @@ export function useTransactions(
   // if the query returns less that we ask, then we have reach the end or beginning
   const isReachingEnd =
     afterData && afterData.data.transactions.length < PAGE_SIZE;
-  const isReachingStart = false;
+  const isReachingStart = start == undefined;
 
   const pagination = {
     isReachingEnd,
     isReachingStart,
     loadMore: () => {
       if (!afterData || isReachingEnd) return;
-      if (afterData.data.transactions.length < MAX_RESULT_SIZE) {
-        setPage(page + 1);
-      }
+      // if (afterData.data.transactions.length < MAX_RESULT_SIZE) {
+      // console.log("load more", page)
+      const l = afterData.data.transactions[afterData.data.transactions.length-1]
+      setStart(String(l.row_id));
+      // }
     },
     loadMorePrev: () => {
-      null;
+      if (!afterData || isReachingStart) return;
+      // if (afterData.data.transactions.length < MAX_RESULT_SIZE) {
+      setStart(undefined)
+      // }
     },
   };