From 1bfaf997c3f898ee7a5e8a19bbaf4475cce94f0f Mon Sep 17 00:00:00 2001
From: Sebastian
Date: Fri, 4 Nov 2022 14:35:38 -0300
Subject: some fixes
after update pageState reset info and error message
input values should not be undefined, otherwise it gets uncontrolled (not controlled by preact)
autofocus on captcha
create a dependency from transactionList to balance, so tx list will be queried again if balance is updated
update balance on any pageChange
---
packages/demobank-ui/src/hooks/index.ts | 2 -
packages/demobank-ui/src/pages/home/index.tsx | 72 +++++++++++++++++++--------
2 files changed, 52 insertions(+), 22 deletions(-)
(limited to 'packages/demobank-ui/src')
diff --git a/packages/demobank-ui/src/hooks/index.ts b/packages/demobank-ui/src/hooks/index.ts
index 2126cada5..94e66e5e3 100644
--- a/packages/demobank-ui/src/hooks/index.ts
+++ b/packages/demobank-ui/src/hooks/index.ts
@@ -112,8 +112,6 @@ export function useLocalStorage(
value?: string | ((val?: string) => string | undefined),
) => {
setStoredValue((p) => {
- console.log("calling setStoredValue");
- console.log(window);
const toStore = value instanceof Function ? value(p) : value;
if (typeof window !== "undefined")
if (!toStore) window.localStorage.removeItem(key);
diff --git a/packages/demobank-ui/src/pages/home/index.tsx b/packages/demobank-ui/src/pages/home/index.tsx
index 6477e018d..be115412b 100644
--- a/packages/demobank-ui/src/pages/home/index.tsx
+++ b/packages/demobank-ui/src/pages/home/index.tsx
@@ -176,6 +176,7 @@ interface PageStateType {
* be moved in a future "withdrawal state" object.
*/
withdrawalId?: string;
+ timestamp?: number;
}
/**
@@ -497,7 +498,24 @@ function usePageState(
ret[1](newVal);
};
- return [retObj, retSetter];
+
+ //when moving from one page to another
+ //clean up the info and error bar
+ function removeLatestInfo(val: any): ReturnType {
+ const updater = typeof val === 'function' ? val : (c:any) => val
+ return retSetter((current:any) => {
+ const cleanedCurrent: PageStateType = {...current,
+ hasInfo: false,
+ info: undefined,
+ hasError: false,
+ errors: undefined,
+ timestamp: new Date().getTime()
+ }
+ return updater(cleanedCurrent)
+ })
+ }
+
+ return [retObj, removeLatestInfo];
}
/**
@@ -997,9 +1015,7 @@ function StatusBanner(Props: any): VNode | null {
const i18n = useTranslator();
if (!pageState.hasInfo) return null;
- const rval = {pageState.error}
;
- delete pageState.info_msg;
- pageState.hasInfo = false;
+ const rval = {pageState.info}
;
return rval;
}
@@ -1176,7 +1192,7 @@ function PaytoWireTransfer(Props: any): VNode {
type="text"
id="iban"
name="iban"
- value={submitData?.iban}
+ value={submitData?.iban ?? ""}
placeholder="CC0123456789"
required
pattern={ibanRegex}
@@ -1199,7 +1215,7 @@ function PaytoWireTransfer(Props: any): VNode {
name="subject"
id="subject"
placeholder="subject"
- value={submitData?.subject}
+ value={submitData?.subject ?? ""}
required
onInput={(e): void => {
submitDataSetter((submitData: any) => ({
@@ -1221,7 +1237,7 @@ function PaytoWireTransfer(Props: any): VNode {
id="amount"
placeholder="amount"
required
- value={submitData?.amount}
+ value={submitData?.amount ?? ""}
pattern={amountRegex}
onInput={(e): void => {
submitDataSetter((submitData: any) => ({
@@ -1282,7 +1298,11 @@ function PaytoWireTransfer(Props: any): VNode {
transactionData,
backendState,
pageStateSetter,
- () => submitDataSetter((p) => ({})),
+ () => submitDataSetter((p) => ({
+ amount: undefined,
+ iban: undefined,
+ subject: undefined,
+ })),
);
}}
/>
@@ -1291,7 +1311,11 @@ function PaytoWireTransfer(Props: any): VNode {
class="pure-button"
value="Clear"
onClick={async () => {
- submitDataSetter((p) => ({}));
+ submitDataSetter((p) => ({
+ amount: undefined,
+ iban: undefined,
+ subject: undefined,
+ }));
}}
/>
@@ -1436,6 +1460,7 @@ function TalerWithdrawalConfirmationQuestion(Props: any): VNode {
name="answer"
id="answer"
type="text"
+ autoFocus
required
onInput={(e): void => {
captchaAnswer = e.currentTarget.value;
@@ -1472,8 +1497,8 @@ function TalerWithdrawalConfirmationQuestion(Props: any): VNode {