commit e4ae2eed1d15036ea8e86296226aaff031e689ee
parent d236cd90cfb8df3c5ab846dc400821b6b414c8a1
Author: MS <ms@taler.net>
Date: Fri, 9 Sep 2022 16:48:15 +0200
fix stateful management of input data
Diffstat:
1 file changed, 77 insertions(+), 23 deletions(-)
diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx
@@ -283,9 +283,29 @@ function useShowPublicAccount(
}
/**
+ * Stores the raw Payto value entered by the user in the state.
+ */
+type RawPaytoInputType = string;
+type RawPaytoInputTypeOpt = RawPaytoInputType | undefined;
+function useRawPaytoInputType(
+ state?: RawPaytoInputType
+): [RawPaytoInputTypeOpt, StateUpdater<RawPaytoInputTypeOpt>] {
+
+ const ret = useLocalStorage("raw-payto-input-state", state);
+ const retObj: RawPaytoInputTypeOpt = ret[0];
+ const retSetter: StateUpdater<RawPaytoInputTypeOpt> = function(val) {
+ const newVal = val instanceof Function ? val(retObj) : val
+ ret[1](newVal)
+ }
+ return [retObj, retSetter]
+}
+
+/**
* Stores in the state a object representing a wire transfer,
* in order to avoid losing the handle of the data entered by
- * the user in <input> fields.
+ * the user in <input> fields. FIXME: name not matching the
+ * purpose, as this is not a HTTP request body but rather the
+ * state of the <input>-elements.
*/
type WireTransferRequestTypeOpt = WireTransferRequestType | undefined;
function useWireTransferRequestType(
@@ -553,7 +573,7 @@ async function createTransactionCall(
* Optional since the raw payto form doesn't have
* a stateful management of the input data yet.
*/
- submitDataSetter?: StateUpdater<WireTransferRequestTypeOpt>
+ submitDataSetter?: StateUpdater<any>
) {
try {
var res = await postToBackend(
@@ -792,6 +812,7 @@ function BankFrame(Props: any): VNode {
const {
talerWithdrawUri,
withdrawalOutcome,
+ transferOutcome,
withdrawalId, ...rest } = prevState;
return {
...rest,
@@ -868,6 +889,7 @@ function PaytoWireTransfer(Props: any): VNode {
const currency = useContext(CurrencyContext);
const [pageState, pageStateSetter] = useContext(PageContext); // NOTE: used for go-back button?
const [submitData, submitDataSetter] = useWireTransferRequestType();
+ const [rawPaytoInput, rawPaytoInputSetter] = useRawPaytoInputType();
const i18n = useTranslator();
const amountRegex = "^[0-9]+(\.[0-9]+)?$";
const ibanRegex = "^[A-Z][A-Z][0-9]+$";
@@ -891,7 +913,11 @@ function PaytoWireTransfer(Props: any): VNode {
}
}>{i18n`Go back`}</a>;
const goBackRawPayto = <a href="#" onClick={
- () => pageStateSetter((prevState: PageStateType) => ({...prevState, isRawPayto: false}))
+ () => {
+ pageStateSetter((prevState: PageStateType) => ({...prevState, isRawPayto: false}))
+ rawPaytoInputSetter(undefined)
+ }
+
}>{i18n`Go back`}</a>;
if (!pageState.isRawPayto) {
console.log("wire transfer form");
@@ -987,25 +1013,30 @@ function PaytoWireTransfer(Props: any): VNode {
<div name="payto-form">
<input name="address"
size={90}
+ value={rawPaytoInput}
required
placeholder={i18n`payto address`}
pattern={`payto://iban/[A-Z][A-Z][0-9]+\?message=[a-zA-Z0-9 ]+&amount=${currency}:[0-9]+(\.[0-9]+)?`}
onInput={(e): void => {
- transactionData = {
- ...transactionData,
- paytoUri: e.currentTarget.value,
- };
- }} />
+ rawPaytoInputSetter(e.currentTarget.value)
+ }} />
<input class="pure-button pure-button-primary"
type="submit"
value={i18n`Confirm`}
onClick={() => {
+ // empty string evaluates to false.
+ if (!rawPaytoInput) {
+ console.log("Didn't get any raw Payto string!");
+ return;
+ }
+ transactionData = {paytoUri: rawPaytoInput};
if (typeof transactionData.paytoUri === "undefined" ||
transactionData.paytoUri.length === 0) return;
createTransactionCall(
transactionData,
Props.backendState,
- pageStateSetter);
+ pageStateSetter,
+ rawPaytoInputSetter);
}} />
</div>
</div>
@@ -1254,16 +1285,22 @@ function LoginForm(Props: any): VNode {
type="submit"
class="pure-button pure-button-primary"
onClick={() => {
- if (typeof submitData === "undefined") return;
- if (submitData.password.length > 0 && submitData.username.length > 0)
- loginCall(
- // Deep copy, to avoid the cleanup
- // below make data disappear.
- {...submitData},
- backendStateSetter,
- pageStateSetter
- );
- submitDataSetter(undefined);
+ if (typeof submitData === "undefined") {
+ console.log("login data is undefined", submitData);
+ return;
+ }
+ if (submitData.password.length == 0 || submitData.username.length == 0) {
+ console.log("username or password is the empty string", submitData);
+ return;
+ }
+ loginCall(
+ // Deep copy, to avoid the cleanup
+ // below make data disappear.
+ {...submitData},
+ backendStateSetter,
+ pageStateSetter
+ );
+ submitDataSetter(undefined);
}}>{i18n`Login`}</button>
</div>
</form>);
@@ -1319,18 +1356,35 @@ function RegistrationForm(Props: any): VNode {
onClick={() => {
console.log("maybe submitting the registration..");
console.log(submitData);
- if (typeof submitData === "undefined") return;
+ if (typeof submitData === "undefined") {
+ console.log(`submit data ${submitData} is undefined`);
+ return;
+ }
if ((typeof submitData.password === "undefined") ||
- (typeof submitData.username === "undefined")) return;
+ (typeof submitData.username === "undefined")) {
+ console.log("username or password is undefined");
+ return;
+ }
if (submitData.password.length === 0 ||
- submitData.username.length === 0) return;
+ submitData.username.length === 0) {
+ console.log("username or password are the empty string");
+ return;
+ }
console.log("submitting the registration..");
registrationCall(
{...submitData},
Props.backendStateSetter, // will store BE URL, if OK.
pageStateSetter
);
- submitDataSetter(undefined)}}>{i18n`Register`}</button>
+ console.log("Clearing the input data");
+ /**
+ * FIXME: clearing the data should be done by setting
+ * it to undefined, instead of the empty strings, just
+ * like done in the login function. Now set to the empty
+ * strings due to a non lively update of the <input> fields
+ * after setting to undefined.
+ */
+ submitDataSetter({username: "", password: ""})}}>{i18n`Register`}</button>
</form>
</div>
</article>
