diff options
Diffstat (limited to 'packages/demobank-ui/src')
15 files changed, 563 insertions, 126 deletions
diff --git a/packages/demobank-ui/src/components/EmptyComponentExample/index.ts b/packages/demobank-ui/src/components/EmptyComponentExample/index.ts index 4b7725264..d9f231019 100644 --- a/packages/demobank-ui/src/components/EmptyComponentExample/index.ts +++ b/packages/demobank-ui/src/components/EmptyComponentExample/index.ts @@ -15,9 +15,9 @@ */ import { Loading } from "../../components/Loading.js"; -import { HookError } from "../../hooks/useAsyncAsHook.js"; -import { compose, StateViewMap } from "../../utils/index.js"; -import { wxApi } from "../../wxApi.js"; +import { HookError, utils } from "@gnu-taler/web-util/lib/index.browser"; +//import { compose, StateViewMap } from "../../utils/index.js"; +//import { wxApi } from "../../wxApi.js"; import { useComponentState } from "./state.js"; import { LoadingUriView, ReadyView } from "./views.js"; @@ -47,14 +47,13 @@ export namespace State { } } -const viewMapping: StateViewMap<State> = { +const viewMapping: utils.StateViewMap<State> = { loading: Loading, "loading-error": LoadingUriView, ready: ReadyView, }; -export const ComponentName = compose( - "ComponentName", - (p: Props) => useComponentState(p, wxApi), +export const ComponentName = utils.compose( + (p: Props) => useComponentState(p), viewMapping, ); diff --git a/packages/demobank-ui/src/components/EmptyComponentExample/state.ts b/packages/demobank-ui/src/components/EmptyComponentExample/state.ts index d194b3f97..e147a7ccf 100644 --- a/packages/demobank-ui/src/components/EmptyComponentExample/state.ts +++ b/packages/demobank-ui/src/components/EmptyComponentExample/state.ts @@ -14,10 +14,10 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { wxApi } from "../../wxApi.js"; +// import { wxApi } from "../../wxApi.js"; import { Props, State } from "./index.js"; -export function useComponentState({ p }: Props, api: typeof wxApi): State { +export function useComponentState({ p }: Props): State { return { status: "ready", error: undefined, diff --git a/packages/demobank-ui/src/components/EmptyComponentExample/stories.tsx b/packages/demobank-ui/src/components/EmptyComponentExample/stories.tsx index 696e424c4..e157e6e6f 100644 --- a/packages/demobank-ui/src/components/EmptyComponentExample/stories.tsx +++ b/packages/demobank-ui/src/components/EmptyComponentExample/stories.tsx @@ -19,11 +19,11 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { createExample } from "../../test-utils.js"; +import { tests } from "@gnu-taler/web-util/lib/index.browser"; import { ReadyView } from "./views.js"; export default { title: "example", }; -export const Ready = createExample(ReadyView, {}); +export const Ready = tests.createExample(ReadyView, {}); diff --git a/packages/demobank-ui/src/components/EmptyComponentExample/views.tsx b/packages/demobank-ui/src/components/EmptyComponentExample/views.tsx index 5784a7db5..e125ff415 100644 --- a/packages/demobank-ui/src/components/EmptyComponentExample/views.tsx +++ b/packages/demobank-ui/src/components/EmptyComponentExample/views.tsx @@ -15,18 +15,16 @@ */ import { h, VNode } from "preact"; -import { LoadingError } from "../../components/LoadingError.js"; -import { useTranslationContext } from "../../context/translation.js"; +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { State } from "./index.js"; export function LoadingUriView({ error }: State.LoadingUriError): VNode { const { i18n } = useTranslationContext(); return ( - <LoadingError - title={<i18n.Translate>Could not load</i18n.Translate>} - error={error} - /> + <div> + <i18n.Translate>Could not load</i18n.Translate> + </div> ); } diff --git a/packages/demobank-ui/src/components/Transactions/index.ts b/packages/demobank-ui/src/components/Transactions/index.ts new file mode 100644 index 000000000..618fcfb71 --- /dev/null +++ b/packages/demobank-ui/src/components/Transactions/index.ts @@ -0,0 +1,71 @@ +/* + This file is part of GNU Taler + (C) 2022 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +import { Loading } from "../Loading.js"; +import { HookError, utils } from "@gnu-taler/web-util/lib/index.browser"; +// import { compose, StateViewMap } from "../../utils/index.js"; +// import { wxApi } from "../../wxApi.js"; +import { useComponentState } from "./state.js"; +import { LoadingUriView, ReadyView } from "./views.js"; +import { AbsoluteTime, AmountJson } from "@gnu-taler/taler-util"; + +export interface Props { + pageNumber: number; + accountLabel: string; + balanceValue?: string; +} + +export type State = State.Loading | State.LoadingUriError | State.Ready; + +export namespace State { + export interface Loading { + status: "loading"; + error: undefined; + } + + export interface LoadingUriError { + status: "loading-error"; + error: HookError; + } + + export interface BaseInfo { + error: undefined; + } + export interface Ready extends BaseInfo { + status: "ready"; + error: undefined; + transactions: Transaction[]; + } +} + +export interface Transaction { + negative: boolean; + counterpart: string; + when: AbsoluteTime; + amount: AmountJson; + subject: string; +} + +const viewMapping: utils.StateViewMap<State> = { + loading: Loading, + "loading-error": LoadingUriView, + ready: ReadyView, +}; + +export const Transactions = utils.compose( + (p: Props) => useComponentState(p), + viewMapping, +); diff --git a/packages/demobank-ui/src/components/Transactions/state.ts b/packages/demobank-ui/src/components/Transactions/state.ts new file mode 100644 index 000000000..ac76e31e2 --- /dev/null +++ b/packages/demobank-ui/src/components/Transactions/state.ts @@ -0,0 +1,133 @@ +/* + This file is part of GNU Taler + (C) 2022 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +import { AbsoluteTime, Amounts } from "@gnu-taler/taler-util"; +import { parse } from "date-fns"; +import { useEffect } from "preact/hooks"; +import useSWR from "swr"; +import { Props, State } from "./index.js"; + +export function useComponentState({ accountLabel, pageNumber, balanceValue }: Props): State { + const { data, error, mutate } = useSWR( + `access-api/accounts/${accountLabel}/transactions?page=${pageNumber}`, + ); + + useEffect(() => { + if (balanceValue) { + mutate(); + } + }, [balanceValue ?? ""]); + + if (error) { + switch (error.status) { + case 404: + return { + status: "loading-error", + error: { + hasError: true, + operational: false, + message: `Transactions page ${pageNumber} was not found.` + } + } + case 401: + return { + status: "loading-error", + error: { + hasError: true, + operational: false, + message: "Wrong credentials given." + } + } + default: + return { + status: "loading-error", + error: { + hasError: true, + operational: false, + message: `Transaction page ${pageNumber} could not be retrieved.` + } as any + } + } + } + + if (!data) { + return { + status: "loading", + error: undefined + } + } + + + const transactions = data.transactions.map((item: unknown) => { + if (!item || typeof item !== "object" || + !("direction" in item) || + !("creditorIban" in item) || + !("debtorIban" in item) || + !("date" in item) || + !("subject" in item) || + !("currency" in item) || + !("amount" in item) + ) { + //not valid + return; + } + const anyItem = item as any; + if ( + !(typeof anyItem.creditorIban === 'string') || + !(typeof anyItem.debtorIban === 'string') || + !(typeof anyItem.date === 'string') || + !(typeof anyItem.subject === 'string') || + !(typeof anyItem.currency === 'string') || + !(typeof anyItem.amount === 'string') + ) { + return; + } + + const negative = anyItem.direction === "DBIT"; + const counterpart = negative ? anyItem.creditorIban : anyItem.debtorIban; + // Pattern: + // + // DD/MM YYYY subject -5 EUR + // DD/MM YYYY subject 5 EUR + const dateRegex = /^([0-9]{4})-([0-9]{2})-([0-9]{1,2})/; + const dateParse = dateRegex.exec(anyItem.date); + const dateStr = + dateParse !== null + ? `${dateParse[3]}/${dateParse[2]} ${dateParse[1]}` + : undefined; + + const date = parse(dateStr ?? "", "dd/MM yyyy", new Date()) + + const when: AbsoluteTime = { + t_ms: date.getTime() + } + const amount = Amounts.parseOrThrow(`${anyItem.currency}:${anyItem.amount}`); + const subject = anyItem.subject; + return { + negative, + counterpart, + when, + amount, + subject, + } + }); + + return { + status: "ready", + error: undefined, + transactions, + }; +} diff --git a/packages/demobank-ui/src/components/Transactions/stories.tsx b/packages/demobank-ui/src/components/Transactions/stories.tsx new file mode 100644 index 000000000..77fdde092 --- /dev/null +++ b/packages/demobank-ui/src/components/Transactions/stories.tsx @@ -0,0 +1,45 @@ +/* + This file is part of GNU Taler + (C) 2022 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +import { tests } from "@gnu-taler/web-util/lib/index.browser"; +import { ReadyView } from "./views.js"; + +export default { + title: "transaction list", +}; + +export const Ready = tests.createExample(ReadyView, { + transactions: [ + { + amount: { + currency: "USD", + fraction: 0, + value: 1, + }, + counterpart: "ASD", + negative: false, + subject: "Some", + when: { + t_ms: new Date().getTime(), + }, + }, + ], +}); diff --git a/packages/demobank-ui/src/components/Transactions/test.ts b/packages/demobank-ui/src/components/Transactions/test.ts new file mode 100644 index 000000000..b746f6bb7 --- /dev/null +++ b/packages/demobank-ui/src/components/Transactions/test.ts @@ -0,0 +1,174 @@ +/* + This file is part of GNU Taler + (C) 2022 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +import { tests } from "@gnu-taler/web-util/lib/index.browser"; +import { SwrMockEnvironment } from "@gnu-taler/web-util/lib/tests/swr"; +import { expect } from "chai"; +import { TRANSACTION_API_EXAMPLE } from "../../endpoints.js"; +import { Props } from "./index.js"; +import { useComponentState } from "./state.js"; + + +describe("Transaction states", () => { + + it("should query backend and render transactions", async () => { + + const env = new SwrMockEnvironment(); + + const props: Props = { + accountLabel: "myAccount", + pageNumber: 0 + } + + env.addRequestExpectation(TRANSACTION_API_EXAMPLE.LIST_FIRST_PAGE, { + response: { + "transactions": [ + { + "creditorIban": "DE159593", + "creditorBic": "SANDBOXX", + "creditorName": "exchange company", + "debtorIban": "DE118695", + "debtorBic": "SANDBOXX", + "debtorName": "Name unknown", + "amount": "1", + "currency": "KUDOS", + "subject": "Taler Withdrawal N588V8XE9TR49HKAXFQ20P0EQ0EYW2AC9NNANV8ZP5P59N6N0410", + "date": "2022-12-12Z", + "uid": "8PPFR9EM", + "direction": "DBIT", + "pmtInfId": null, + "msgId": null + }, + { + "creditorIban": "DE159593", + "creditorBic": "SANDBOXX", + "creditorName": "exchange company", + "debtorIban": "DE118695", + "debtorBic": "SANDBOXX", + "debtorName": "Name unknown", + "amount": "5.00", + "currency": "KUDOS", + "subject": "HNEWWT679TQC5P1BVXJS48FX9NW18FWM6PTK2N80Z8GVT0ACGNK0", + "date": "2022-12-07Z", + "uid": "7FZJC3RJ", + "direction": "DBIT", + "pmtInfId": null, + "msgId": null + }, + { + "creditorIban": "DE118695", + "creditorBic": "SANDBOXX", + "creditorName": "Name unknown", + "debtorIban": "DE579516", + "debtorBic": "SANDBOXX", + "debtorName": "The Bank", + "amount": "100", + "currency": "KUDOS", + "subject": "Sign-up bonus", + "date": "2022-12-07Z", + "uid": "I31A06J8", + "direction": "CRDT", + "pmtInfId": null, + "msgId": null + } + ] + } + }); + + const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [ + ({ status, error }) => { + + expect(status).equals("loading"); + expect(error).undefined; + }, + ({ status, error }) => { + + expect(status).equals("ready"); + expect(error).undefined; + }, + ], env.buildTestingContext()) + + expect(hookBehavior).deep.eq({ result: "ok" }) + + expect(env.assertJustExpectedRequestWereMade()).deep.eq({ result: "ok" }) + }); + + it("should show error message on not found", async () => { + + const env = new SwrMockEnvironment(); + + const props: Props = { + accountLabel: "myAccount", + pageNumber: 0 + } + + env.addRequestExpectation(TRANSACTION_API_EXAMPLE.LIST_NOT_FOUND, {}); + + const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [ + ({ status, error }) => { + expect(status).equals("loading"); + expect(error).undefined; + }, + ({ status, error }) => { + expect(status).equals("loading-error"); + expect(error).deep.eq({ + hasError: true, + operational: false, + message: "Transactions page 0 was not found." + }); + }, + ], env.buildTestingContext()) + + expect(hookBehavior).deep.eq({ result: "ok" }) + expect(env.assertJustExpectedRequestWereMade()).deep.eq({ result: "ok" }) + }); + + it("should show error message on server error", async () => { + + const env = new SwrMockEnvironment(false); + + const props: Props = { + accountLabel: "myAccount", + pageNumber: 0 + } + + env.addRequestExpectation(TRANSACTION_API_EXAMPLE.LIST_ERROR, {}); + + const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [ + ({ status, error }) => { + expect(status).equals("loading"); + expect(error).undefined; + }, + ({ status, error }) => { + expect(status).equals("loading-error"); + expect(error).deep.equal({ + hasError: true, + operational: false, + message: "Transaction page 0 could not be retrieved." + }); + }, + ], env.buildTestingContext()) + + expect(hookBehavior).deep.eq({ result: "ok" }) + expect(env.assertJustExpectedRequestWereMade()).deep.eq({ result: "ok" }) + }); +}); + diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx new file mode 100644 index 000000000..b3683b743 --- /dev/null +++ b/packages/demobank-ui/src/components/Transactions/views.tsx @@ -0,0 +1,68 @@ +/* + This file is part of GNU Taler + (C) 2022 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +import { h, VNode } from "preact"; +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; +import { State } from "./index.js"; +import { format } from "date-fns"; +import { Amounts } from "@gnu-taler/taler-util"; + +export function LoadingUriView({ error }: State.LoadingUriError): VNode { + const { i18n } = useTranslationContext(); + + return ( + <div> + <i18n.Translate>Could not load</i18n.Translate> + </div> + ); +} + +export function ReadyView({ transactions }: State.Ready): VNode { + const { i18n } = useTranslationContext(); + return ( + <div class="results"> + <table class="pure-table pure-table-striped"> + <thead> + <tr> + <th>{i18n.str`Date`}</th> + <th>{i18n.str`Amount`}</th> + <th>{i18n.str`Counterpart`}</th> + <th>{i18n.str`Subject`}</th> + </tr> + </thead> + <tbody> + {transactions.map((item, idx) => { + return ( + <tr key={idx}> + <td> + {item.when.t_ms === "never" + ? "never" + : format(item.when.t_ms, "dd/MM/yyyy")} + </td> + <td> + {item.negative ? "-" : ""} + {Amounts.stringifyValue(item.amount)} {item.amount.currency} + </td> + <td>{item.counterpart}</td> + <td>{item.subject}</td> + </tr> + ); + })} + </tbody> + </table> + </div> + ); +} diff --git a/packages/demobank-ui/src/components/index.examples.ts b/packages/demobank-ui/src/components/index.examples.ts new file mode 100644 index 000000000..a741b413d --- /dev/null +++ b/packages/demobank-ui/src/components/index.examples.ts @@ -0,0 +1,17 @@ +/* + This file is part of GNU Taler + (C) 2022 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +export * as tx from "./Transactions/stories.js";
\ No newline at end of file diff --git a/packages/demobank-ui/src/endpoints.ts b/packages/demobank-ui/src/endpoints.ts new file mode 100644 index 000000000..0130e94f8 --- /dev/null +++ b/packages/demobank-ui/src/endpoints.ts @@ -0,0 +1,37 @@ +/* + This file is part of GNU Taler + (C) 2022 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +export const TRANSACTION_API_EXAMPLE = { + LIST_FIRST_PAGE: { + method: "get" as const, + url: "access-api/accounts/myAccount/transactions?page=0", + }, + LIST_ERROR: { + method: "get" as const, + url: "access-api/accounts/myAccount/transactions?page=0", + code: 500 + }, + LIST_NOT_FOUND: { + method: "get" as const, + url: "access-api/accounts/myAccount/transactions?page=0", + code: 404 + } +}
\ No newline at end of file diff --git a/packages/demobank-ui/src/pages/AccountPage.tsx b/packages/demobank-ui/src/pages/AccountPage.tsx index 7ec4d36fb..5dd820b53 100644 --- a/packages/demobank-ui/src/pages/AccountPage.tsx +++ b/packages/demobank-ui/src/pages/AccountPage.tsx @@ -27,7 +27,7 @@ import { getIbanFromPayto, prepareHeaders } from "../utils.js"; import { BankFrame } from "./BankFrame.js"; import { LoginForm } from "./LoginForm.js"; import { PaymentOptions } from "./PaymentOptions.js"; -import { Transactions } from "./Transactions.js"; +import { Transactions } from "../components/Transactions/index.js"; import { WithdrawalQRCode } from "./WithdrawalQRCode.js"; export function AccountPage(): VNode { diff --git a/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx b/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx index be9f4aee1..7bf5c41c7 100644 --- a/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx +++ b/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx @@ -24,7 +24,7 @@ import { PageStateType, usePageContext } from "../context/pageState.js"; import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { getBankBackendBaseUrl } from "../utils.js"; import { BankFrame } from "./BankFrame.js"; -import { Transactions } from "./Transactions.js"; +import { Transactions } from "../components/Transactions/index.js"; const logger = new Logger("PublicHistoriesPage"); diff --git a/packages/demobank-ui/src/pages/Transactions.tsx b/packages/demobank-ui/src/pages/Transactions.tsx deleted file mode 100644 index ca88abd4d..000000000 --- a/packages/demobank-ui/src/pages/Transactions.tsx +++ /dev/null @@ -1,106 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2022 Taler Systems S.A. - - GNU Taler is free software; you can redistribute it and/or modify it under the - terms of the GNU General Public License as published by the Free Software - Foundation; either version 3, or (at your option) any later version. - - GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY - WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR - A PARTICULAR PURPOSE. See the GNU General Public License for more details. - - You should have received a copy of the GNU General Public License along with - GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> - */ - -import { Logger } from "@gnu-taler/taler-util"; -import { h, VNode } from "preact"; -import { useEffect } from "preact/hooks"; -import useSWR from "swr"; -import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; - -const logger = new Logger("Transactions"); -/** - * Show one page of transactions. - */ -export function Transactions({ - pageNumber, - accountLabel, - balanceValue, -}: { - pageNumber: number; - accountLabel: string; - balanceValue?: string; -}): VNode { - const { i18n } = useTranslationContext(); - const { data, error, mutate } = useSWR( - `access-api/accounts/${accountLabel}/transactions?page=${pageNumber}`, - ); - useEffect(() => { - if (balanceValue) { - mutate(); - } - }, [balanceValue ?? ""]); - if (typeof error !== "undefined") { - logger.error("transactions not found error", error); - switch (error.status) { - case 404: { - return <p>Transactions page {pageNumber} was not found.</p>; - } - case 401: { - return <p>Wrong credentials given.</p>; - } - default: { - return <p>Transaction page {pageNumber} could not be retrieved.</p>; - } - } - } - if (!data) { - logger.trace(`History data of ${accountLabel} not arrived`); - return <p>Transactions page loading...</p>; - } - logger.trace(`History data of ${accountLabel}`, data); - return ( - <div class="results"> - <table class="pure-table pure-table-striped"> - <thead> - <tr> - <th>{i18n.str`Date`}</th> - <th>{i18n.str`Amount`}</th> - <th>{i18n.str`Counterpart`}</th> - <th>{i18n.str`Subject`}</th> - </tr> - </thead> - <tbody> - {data.transactions.map((item: any, idx: number) => { - const sign = item.direction == "DBIT" ? "-" : ""; - const counterpart = - item.direction == "DBIT" ? item.creditorIban : item.debtorIban; - // Pattern: - // - // DD/MM YYYY subject -5 EUR - // DD/MM YYYY subject 5 EUR - const dateRegex = /^([0-9]{4})-([0-9]{2})-([0-9]{1,2})/; - const dateParse = dateRegex.exec(item.date); - const date = - dateParse !== null - ? `${dateParse[3]}/${dateParse[2]} ${dateParse[1]}` - : "date not found"; - return ( - <tr key={idx}> - <td>{date}</td> - <td> - {sign} - {item.amount} {item.currency} - </td> - <td>{counterpart}</td> - <td>{item.subject}</td> - </tr> - ); - })} - </tbody> - </table> - </div> - ); -} diff --git a/packages/demobank-ui/src/stories.tsx b/packages/demobank-ui/src/stories.tsx index 611d63879..a8ebcd867 100644 --- a/packages/demobank-ui/src/stories.tsx +++ b/packages/demobank-ui/src/stories.tsx @@ -21,6 +21,7 @@ import { strings } from "./i18n/strings.js"; import * as pages from "./pages/index.stories.js"; +import * as components from "./components/index.examples.js"; import { renderStories } from "@gnu-taler/web-util/lib/index.browser"; @@ -32,7 +33,7 @@ function SortStories(a: any, b: any): number { function main(): void { renderStories( - { pages }, + { pages, components }, { strings, }, |