2 files changed, 48 insertions, 43 deletions

diff --git a/packages/demobank-ui/src/hooks/access.ts b/packages/demobank-ui/src/hooks/access.ts
index e07a3d1b1..a101dc83e 100644
--- a/packages/demobank-ui/src/hooks/access.ts
+++ b/packages/demobank-ui/src/hooks/access.ts
@@ -21,7 +21,7 @@ import {
   WithdrawalOperationStatus,
 } from "@gnu-taler/taler-util";
 import { useEffect, useState } from "preact/hooks";
-import { MAX_RESULT_SIZE, PAGE_SIZE } from "../utils.js";
+import { PAGE_SIZE } from "../utils.js";
 import { useBackendState } from "./backend.js";
 
 // FIX default import https://github.com/microsoft/TypeScript/issues/49189
@@ -156,8 +156,7 @@ export function usePublicAccounts(
   filterAccount: string | undefined,
   initial?: number,
 ) {
-  // const [offset, setOffset] = useState<number | undefined>(initial);
-  const offset = undefined;
+  const [offset, setOffset] = useState<number | undefined>(initial);
 
   const { api } = useBankCoreApiContext();
 
@@ -168,7 +167,7 @@ export function usePublicAccounts(
     return await api.getPublicAccounts(
       { account },
       {
-        limit: MAX_RESULT_SIZE,
+        limit: PAGE_SIZE,
         offset: txid ? String(txid) : undefined,
         order: "asc",
       },
@@ -190,21 +189,24 @@ export function usePublicAccounts(
     keepPreviousData: true,
   });
 
-  const isLastPage = data && data.body.public_accounts.length < PAGE_SIZE;
-  const isFirstPage = !initial;
+  const isLastPage =
+    data && data.type === "ok" && data.body.public_accounts.length <= PAGE_SIZE;
+  const isFirstPage = !offset;
 
+  const result = data && data.type == "ok" ? structuredClone(data.body.public_accounts) : []
+  if (result.length == PAGE_SIZE+1) {
+    result.pop()
+  }
   const pagination = {
+    result,
     isLastPage,
     isFirstPage,
-    loadMore: () => {
-      if (isLastPage || data?.type !== "ok") return;
-      const list = data.body.public_accounts;
-      if (list.length < MAX_RESULT_SIZE) {
-        // setOffset(list[list.length-1].account_name);
-      }
+    loadNext: () => {
+      if (!result.length) return;
+      setOffset(result[result.length - 1].row_id);
     },
-    loadMorePrev: () => {
-      null;
+    loadFirst: () => {
+      setOffset(0);
     },
   };
 
@@ -241,7 +243,7 @@ export function useTransactions(account: string, initial?: number) {
     return await api.getTransactions(
       { username, token },
       {
-        limit: MAX_RESULT_SIZE,
+        limit: PAGE_SIZE +1 ,
         offset: txid ? String(txid) : undefined,
         order: "dec",
       },
@@ -262,21 +264,23 @@ export function useTransactions(account: string, initial?: number) {
   });
 
   const isLastPage =
-    data && data.type === "ok" && data.body.transactions.length < PAGE_SIZE;
-  const isFirstPage = true;
+    data && data.type === "ok" && data.body.transactions.length <= PAGE_SIZE;
+  const isFirstPage = !offset;
 
+  const result = data && data.type == "ok" ? structuredClone(data.body.transactions) : []
+  if (result.length == PAGE_SIZE+1) {
+    result.pop()
+  }
   const pagination = {
+    result,
     isLastPage,
     isFirstPage,
-    loadMore: () => {
-      if (isLastPage || data?.type !== "ok") return;
-      const list = data.body.transactions;
-      if (list.length < MAX_RESULT_SIZE) {
-        setOffset(list[list.length - 1].row_id);
-      }
+    loadNext: () => {
+      if (!result.length) return;
+      setOffset(result[result.length - 1].row_id);
     },
-    loadMorePrev: () => {
-      null;
+    loadFirst: () => {
+      setOffset(0);
     },
   };
 
diff --git a/packages/demobank-ui/src/hooks/circuit.ts b/packages/demobank-ui/src/hooks/circuit.ts
index 88ca7b947..7d8884797 100644
--- a/packages/demobank-ui/src/hooks/circuit.ts
+++ b/packages/demobank-ui/src/hooks/circuit.ts
@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { MAX_RESULT_SIZE, PAGE_SIZE } from "../utils.js";
+import { PAGE_SIZE } from "../utils.js";
 import { useBackendState } from "./backend.js";
 
 import {
@@ -32,6 +32,7 @@ import {
 } from "@gnu-taler/taler-util";
 import _useSWR, { SWRHook, mutate } from "swr";
 import { useBankCoreApiContext } from "../context/config.js";
+import { useState } from "preact/hooks";
 
 // FIX default import https://github.com/microsoft/TypeScript/issues/49189
 const useSWR = _useSWR as unknown as SWRHook;
@@ -138,17 +139,16 @@ export function useBusinessAccounts() {
     credentials.status !== "loggedIn" ? undefined : credentials.token;
   const { api } = useBankCoreApiContext();
 
-  // const [offset, setOffset] = useState<string | undefined>();
-  const offset = undefined;
+  const [offset, setOffset] = useState<number | undefined>();
 
-  function fetcher([token, offset]: [AccessToken, string]) {
+  function fetcher([token, offset]: [AccessToken, number]) {
     // FIXME: add account name filter
     return api.getAccounts(
       token,
       {},
       {
-        limit: MAX_RESULT_SIZE,
-        offset,
+        limit: PAGE_SIZE+1,
+        offset: String(offset),
         order: "asc",
       },
     );
@@ -157,7 +157,7 @@ export function useBusinessAccounts() {
   const { data, error } = useSWR<
     TalerCoreBankResultByMethod<"getAccounts">,
     TalerHttpError
-  >([token, offset, "getAccounts"], fetcher, {
+  >([token, offset ?? 0, "getAccounts"], fetcher, {
     refreshInterval: 0,
     refreshWhenHidden: false,
     revalidateOnFocus: false,
@@ -170,22 +170,23 @@ export function useBusinessAccounts() {
   });
 
   const isLastPage =
-    data && data.type === "ok" && data.body.accounts.length < PAGE_SIZE;
-  const isFirstPage = false;
+    data && data.type === "ok" && data.body.accounts.length <= PAGE_SIZE;
+  const isFirstPage = !offset;
 
+  const result = data && data.type == "ok" ? structuredClone(data.body.accounts) : []
+  if (result.length == PAGE_SIZE+1) {
+    result.pop()
+  }
   const pagination = {
+    result,
     isLastPage,
     isFirstPage,
-    loadMore: () => {
-      if (isLastPage || data?.type !== "ok") return;
-      const list = data.body.accounts;
-      if (list.length < MAX_RESULT_SIZE) {
-        // FIXME: define pagination
-        // setOffset(list[list.length - 1].row_id);
-      }
+    loadNext: () => {
+      if (!result.length) return;
+      setOffset(result[result.length - 1].row_id);
     },
-    loadMorePrev: () => {
-      null;
+    loadFirst: () => {
+      setOffset(0);
     },
   };