From 2c04459a58c04fe7a6c6dc657c1d3fb58132a933 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 7 Dec 2022 09:57:54 -0300 Subject: fix: better loading page while waiting for server response --- packages/demobank-ui/src/declaration.d.ts | 1 - packages/demobank-ui/src/hooks/backend.ts | 1 - packages/demobank-ui/src/pages/home/index.tsx | 90 ++++++++++++++------------- packages/demobank-ui/src/utils.ts | 1 - 4 files changed, 46 insertions(+), 47 deletions(-) diff --git a/packages/demobank-ui/src/declaration.d.ts b/packages/demobank-ui/src/declaration.d.ts index 70272cc54..1b56f1358 100644 --- a/packages/demobank-ui/src/declaration.d.ts +++ b/packages/demobank-ui/src/declaration.d.ts @@ -23,7 +23,6 @@ declare module "jed" { * Type definitions for states and API calls. * *********************************************/ - /** * Request body of POST /transactions. * diff --git a/packages/demobank-ui/src/hooks/backend.ts b/packages/demobank-ui/src/hooks/backend.ts index fa4211f13..3b00edee3 100644 --- a/packages/demobank-ui/src/hooks/backend.ts +++ b/packages/demobank-ui/src/hooks/backend.ts @@ -1,7 +1,6 @@ import { hooks } from "@gnu-taler/web-util/lib/index.browser"; import { StateUpdater } from "preact/hooks"; - /** * Has the information to reach and * authenticate at the bank's backend. diff --git a/packages/demobank-ui/src/pages/home/index.tsx b/packages/demobank-ui/src/pages/home/index.tsx index 7631ebf46..884113e85 100644 --- a/packages/demobank-ui/src/pages/home/index.tsx +++ b/packages/demobank-ui/src/pages/home/index.tsx @@ -890,7 +890,14 @@ function ShowInputErrorLabel({ return ; } -function PaytoWireTransfer(Props: any): VNode { +function PaytoWireTransfer({ + focus, + currency, +}: { + focus?: boolean; + currency?: string; +}): VNode { + const [backendState, backendStateSetter] = useBackendState(); const { pageState, pageStateSetter } = usePageContext(); // NOTE: used for go-back button? const [submitData, submitDataSetter] = useWireTransferRequestType(); @@ -899,7 +906,6 @@ function PaytoWireTransfer(Props: any): VNode { undefined, ); const { i18n } = useTranslationContext(); - const { focus, backendState, currency } = Props; const ibanRegex = "^[A-Z][A-Z][0-9]+$"; let transactionData: TransactionRequestType; const ref = useRef(null); @@ -907,13 +913,6 @@ function PaytoWireTransfer(Props: any): VNode { if (focus) ref.current?.focus(); }, [focus, pageState.isRawPayto]); - // typeof submitData === "undefined" || - // typeof submitData.iban === "undefined" || - // submitData.iban === "" || - // typeof submitData.subject === "undefined" || - // submitData.subject === "" || - // typeof submitData.amount === "undefined" || - // submitData.amount === "" let parsedAmount = undefined; const errorsWire = { @@ -986,8 +985,8 @@ function PaytoWireTransfer(Props: any): VNode { type="text" readonly class="currency-indicator" - size={currency.length} - maxLength={currency.length} + size={currency?.length} + maxLength={currency?.length} tabIndex={-1} value={currency} /> @@ -1367,8 +1366,15 @@ function TalerWithdrawalQRCode(Props: any): VNode { return ; } -function WalletWithdraw(Props: any): VNode { - const { backendState, pageStateSetter, focus, currency } = Props; +function WalletWithdraw({ + focus, + currency, +}: { + currency?: string; + focus?: boolean; +}): VNode { + const [backendState, backendStateSetter] = useBackendState(); + const { pageState, pageStateSetter } = usePageContext(); const { i18n } = useTranslationContext(); let submitAmount = "5.00"; @@ -1385,8 +1391,8 @@ function WalletWithdraw(Props: any): VNode { type="text" readonly class="currency-indicator" - size={currency.length} - maxLength={currency.length} + size={currency?.length ?? 5} + maxLength={currency?.length} tabIndex={-1} value={currency} /> @@ -1419,7 +1425,7 @@ function WalletWithdraw(Props: any): VNode { * on the console, and the browser colourizes the amount input * box to indicate a error. */ - if (!submitAmount) return; + if (!submitAmount && currency) return; createWithdrawalCall( `${currency}:${submitAmount}`, backendState, @@ -1437,8 +1443,7 @@ function WalletWithdraw(Props: any): VNode { * Let the user choose a payment option, * then specify the details trigger the action. */ -function PaymentOptions(Props: any): VNode { - const { backendState, pageStateSetter, currency } = Props; +function PaymentOptions({ currency }: { currency?: string }): VNode { const { i18n } = useTranslationContext(); const [tab, setTab] = useState<"charge-wallet" | "wire-transfer">( @@ -1469,23 +1474,13 @@ function PaymentOptions(Props: any): VNode { {tab === "charge-wallet" && (

{i18n.str`Obtain digital cash`}

- +
)} {tab === "wire-transfer" && (

{i18n.str`Transfer to bank account`}

- +
)} @@ -1942,7 +1937,9 @@ function Account(Props: any): VNode { } } } - if (!data) return

Retrieving the profile page...

; + const balance = !data ? undefined : Amounts.parseOrThrow(data.balance.amount); + const accountNumber = !data ? undefined : getIbanFromPayto(data.paytoUri); + const balanceIsDebit = data && data.balance.credit_debit_indicator == "debit"; /** * This block shows the withdrawal QR code. @@ -1970,36 +1967,41 @@ function Account(Props: any): VNode { ); } - const balance = Amounts.parseOrThrow(data.balance.amount); - const balanceValue = Amounts.stringifyValue(balance); + const balanceValue = !balance ? undefined : Amounts.stringifyValue(balance); return (

- Welcome, {accountLabel} ({getIbanFromPayto(data.paytoUri)})! + Welcome, + {accountNumber + ? `${accountLabel} (${accountNumber})` + : accountLabel} + !

{i18n.str`Bank account balance`}

-
- {data.balance.credit_debit_indicator == "debit" ? - : null} - {`${balanceValue}`}  - {`${balance.currency}`} -
+ {!balance ? ( +
+ Waiting server response... +
+ ) : ( +
+ {balanceIsDebit ? - : null} + {`${balanceValue}`}  + {`${balance.currency}`} +
+ )}

{i18n.str`Payments`}

- +
diff --git a/packages/demobank-ui/src/utils.ts b/packages/demobank-ui/src/utils.ts index d812f2ec9..8b9e9a89c 100644 --- a/packages/demobank-ui/src/utils.ts +++ b/packages/demobank-ui/src/utils.ts @@ -1,4 +1,3 @@ - /** * Validate (the number part of) an amount. If needed, * replace comma with a dot. Returns 'false' whenever -- cgit v1.2.3