From 9bafc6864b9e0ef237b6975165f23ba31f0d8d88 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 11 Apr 2024 23:48:55 -0300 Subject: fix AML spa memo and fix #8615 --- packages/aml-backoffice-ui/src/App.tsx | 62 ++++++++++++--- packages/aml-backoffice-ui/src/context/config.ts | 2 +- packages/aml-backoffice-ui/src/hooks/useCases.ts | 87 ++++++++++------------ packages/aml-backoffice-ui/src/hooks/useOfficer.ts | 21 +++--- packages/aml-backoffice-ui/src/pages/Cases.tsx | 25 ++----- 5 files changed, 109 insertions(+), 88 deletions(-) (limited to 'packages/aml-backoffice-ui/src') diff --git a/packages/aml-backoffice-ui/src/App.tsx b/packages/aml-backoffice-ui/src/App.tsx index d461934c0..5244476d7 100644 --- a/packages/aml-backoffice-ui/src/App.tsx +++ b/packages/aml-backoffice-ui/src/App.tsx @@ -6,9 +6,11 @@ import { ExchangeApiProvider } from "./context/config.js"; import { getInitialBackendBaseURL } from "./hooks/useBackend.js"; import { HashPathProvider, Router } from "./route.js"; import { Pages } from "./pages.js"; +import { SWRConfig } from "swr"; -const pageList = Object.values(Pages); +const WITH_LOCAL_STORAGE_CACHE = false; +const pageList = Object.values(Pages); export function App(): VNode { const baseUrl = getInitialBackendBaseURL(); @@ -16,17 +18,57 @@ export function App(): VNode { - - { - window.location.href = Pages.cases.url - return
not found
; - }} - /> - + + + + { + window.location.href = Pages.cases.url + return
not found
; + }} + /> + + ); } + + +function localStorageProvider(): Map { + const map = new Map(JSON.parse(localStorage.getItem("app-cache") || "[]")); + + window.addEventListener("beforeunload", () => { + const appCache = JSON.stringify(Array.from(map.entries())); + localStorage.setItem("app-cache", appCache); + }); + return map; +} diff --git a/packages/aml-backoffice-ui/src/context/config.ts b/packages/aml-backoffice-ui/src/context/config.ts index 7004225eb..42f73428a 100644 --- a/packages/aml-backoffice-ui/src/context/config.ts +++ b/packages/aml-backoffice-ui/src/context/config.ts @@ -67,7 +67,7 @@ export const ExchangeApiProvider = ({ .then((resp) => { if (resp.type === "fail") { setChecked({ type: "error", error: TalerError.fromUncheckedDetail(resp.detail) }); - }else if (api.isCompatible(resp.body.version)) { + } else if (api.isCompatible(resp.body.version)) { setChecked({ type: "ok", config: resp.body }); } else { setChecked({ type: "incompatible", result: resp.body, supported: api.PROTOCOL_VERSION }) diff --git a/packages/aml-backoffice-ui/src/hooks/useCases.ts b/packages/aml-backoffice-ui/src/hooks/useCases.ts index 68deb7db9..2bc9b5f0f 100644 --- a/packages/aml-backoffice-ui/src/hooks/useCases.ts +++ b/packages/aml-backoffice-ui/src/hooks/useCases.ts @@ -1,14 +1,18 @@ import { useState } from "preact/hooks"; // FIX default import https://github.com/microsoft/TypeScript/issues/49189 -import { AmountString, HttpStatusCode, OfficerAccount, OperationFail, TalerExchangeApi, TalerExchangeResultByMethod, TalerHttpError } from "@gnu-taler/taler-util"; +import { OfficerAccount, OfficerId, OperationOk, TalerExchangeResultByMethod, TalerHttpError, decodeCrock, encodeCrock } from "@gnu-taler/taler-util"; import _useSWR, { SWRHook } from "swr"; import { useExchangeApiContext } from "../context/config.js"; -import { useOfficer } from "./useOfficer.js"; import { AmlExchangeBackend } from "../utils/types.js"; +import { useOfficer } from "./useOfficer.js"; const useSWR = _useSWR as unknown as SWRHook; -const PAGE_SIZE = 10; +export const PAGINATED_LIST_SIZE = 10; +// when doing paginated request, ask for one more +// and use it to know if there are more to request +export const PAGINATED_LIST_REQUEST = PAGINATED_LIST_SIZE + 1; + /** * FIXME: mutate result when balance change (transaction ) * @param account @@ -24,69 +28,56 @@ export function useCases(state: AmlExchangeBackend.AmlState) { async function fetcher([officer, state, offset]: [OfficerAccount, AmlExchangeBackend.AmlState, string | undefined]) { return await api.getDecisionsByState(officer, state, { - order: "asc", offset, limit: PAGE_SIZE + 1 + order: "asc", offset, limit: PAGINATED_LIST_REQUEST }) } const { data, error } = useSWR, TalerHttpError>( - !session ? undefined : [session, state, offset], + !session ? undefined : [session, state, offset, "getDecisionsByState"], fetcher, ); - // const [lastAfter, setLastAfter] = useState< - // HttpResponse - // >({ loading: true }); + if (error) return error; + if (data === undefined) return undefined; + if (data.type !== "ok") return data; - // useEffect(() => { - // if (afterData) setLastAfter(afterData); - // }, [afterData]); + return buildPaginatedResult(data.body.records, offset, setOffset, (d) => String(d.rowid)); +} - // if (afterError) { - // return afterError.cause; - // } +type PaginatedResult = OperationOk & { + isLastPage: boolean; + isFirstPage: boolean; + loadNext(): void; + loadFirst(): void; +} + +//TODO: consider sending this to web-util +export function buildPaginatedResult(data: R[], offset: OffId | undefined, setOffset: (o: OffId | undefined) => void, getId: (r: R) => OffId): PaginatedResult { - // if the query returns less that we ask, then we have reach the end or beginning - const isLastPage = - data && data.type === "ok" && data.body.records.length <= PAGE_SIZE; - const isFirstPage = !offset; + const isLastPage = data.length < PAGINATED_LIST_REQUEST; + const isFirstPage = offset === undefined; - const pagination = { + const result = structuredClone(data); + if (result.length == PAGINATED_LIST_REQUEST) { + result.pop(); + } + return { + type: "ok", + body: result, isLastPage, isFirstPage, - loadMore: () => { - if (isLastPage || data?.type !== "ok") return; - const list = data.body.records - setOffset(String(list[list.length - 1].rowid)); + loadNext: () => { + if (!result.length) return; + const id = getId(result[result.length - 1]) + setOffset(id); }, - reset: () => { - setOffset(undefined) + loadFirst: () => { + setOffset(undefined); }, }; - - // const public_accountslist = data?.type !== "ok" ? [] : data.body.public_accounts; - if (!session) { - return { - data: { - type: "fail", - case: HttpStatusCode.Unauthorized, - detail: {} - } as OperationFail - } - } - - if (data) { - if (data.type === "fail") { - return { data } - } - const records = isLastPage ? data.body.records : removeLastElement(data.body.records) - return { data: { type: "ok" as const, body: { records } }, pagination } - } - if (error) { - return error; - } - return undefined; } + function removeLastElement(list: Array): Array { if (list.length === 0) { return list; diff --git a/packages/aml-backoffice-ui/src/hooks/useOfficer.ts b/packages/aml-backoffice-ui/src/hooks/useOfficer.ts index fe989f3eb..1bf2b308b 100644 --- a/packages/aml-backoffice-ui/src/hooks/useOfficer.ts +++ b/packages/aml-backoffice-ui/src/hooks/useOfficer.ts @@ -8,19 +8,17 @@ import { buildCodecForObject, codecForAbsoluteTime, codecForString, - codecOptional, createNewOfficerAccount, decodeCrock, encodeCrock, - unlockOfficerAccount, + unlockOfficerAccount } from "@gnu-taler/taler-util"; import { buildStorageKey, - useLocalStorage, - useMemoryStorage, + useLocalStorage } from "@gnu-taler/web-util/browser"; import { useMemo } from "preact/hooks"; -import { useExchangeApiContext, useMaybeExchangeApiContext } from "../context/config.js"; +import { useMaybeExchangeApiContext } from "../context/config.js"; export interface Officer { account: LockedAccount; @@ -66,7 +64,6 @@ interface OfficerReady { const OFFICER_KEY = buildStorageKey("officer", codecForOfficer()); const DEV_ACCOUNT_KEY = buildStorageKey("account-dev", codecForOfficerAccount()); -const ACCOUNT_KEY = "account"; export function useOfficer(): OfficerState { const exchangeContext = useMaybeExchangeApiContext(); @@ -74,18 +71,18 @@ export function useOfficer(): OfficerState { const accountStorage = useLocalStorage(DEV_ACCOUNT_KEY); const account = useMemo(() => { if (!accountStorage.value) return undefined + return { id: accountStorage.value.id as OfficerId, signingKey: decodeCrock(accountStorage.value.strKey) as SigningKey } - }, [accountStorage.value]) - - - // const accountStorage = useMemoryStorage(ACCOUNT_KEY); - // const account = accountStorage.value; + }, [accountStorage.value?.id, accountStorage.value?.strKey]) const officerStorage = useLocalStorage(OFFICER_KEY); - const officer = officerStorage.value; + const officer = useMemo(() => { + if (!officerStorage.value) return undefined + return officerStorage.value + }, [officerStorage.value?.account, officerStorage.value?.when.t_ms]) if (officer === undefined) { return { diff --git a/packages/aml-backoffice-ui/src/pages/Cases.tsx b/packages/aml-backoffice-ui/src/pages/Cases.tsx index faef0ca54..061286f51 100644 --- a/packages/aml-backoffice-ui/src/pages/Cases.tsx +++ b/packages/aml-backoffice-ui/src/pages/Cases.tsx @@ -70,7 +70,7 @@ export function CasesUI({ onUpdate={(v) => { onChangeFilter(v.state ?? filter); }} - onSubmit={(_v) => {}} + onSubmit={(_v) => { }} > ; } - if (list.data.type === "fail") { - switch (list.data.case) { + if (list.type === "fail") { + switch (list.case) { case HttpStatusCode.Unauthorized: case HttpStatusCode.Forbidden: case HttpStatusCode.NotFound: case HttpStatusCode.Conflict: return ; default: - assertUnreachable(list.data); + assertUnreachable(list); } } - const { records } = list.data.body; - return ( -- cgit v1.2.3