diff options
author | Sebastian <sebasjm@gmail.com> | 2022-12-14 15:35:28 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-12-14 15:35:28 -0300 |
commit | 8d8d71807df6b775e5b0335eb1b2526a56d42ac6 (patch) | |
tree | 6b4a15698e8119d66995ead2e7e69e2fb8938450 /packages/demobank-ui/src/pages | |
parent | d0dd7a155fcb63dc4d4859f51a681fc084ec4d7a (diff) | |
download | wallet-core-8d8d71807df6b775e5b0335eb1b2526a56d42ac6.tar.xz |
refactoring transaction component to standard component with test and examples
Diffstat (limited to 'packages/demobank-ui/src/pages')
-rw-r--r-- | packages/demobank-ui/src/pages/AccountPage.tsx | 2 | ||||
-rw-r--r-- | packages/demobank-ui/src/pages/PublicHistoriesPage.tsx | 2 | ||||
-rw-r--r-- | packages/demobank-ui/src/pages/Transactions.tsx | 106 |
3 files changed, 2 insertions, 108 deletions
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> - ); -} |