[taler-merchant-backoffice] branch master updated: fix stateful management of input data

[gnunet]

This is an automated email from the git hooks/post-receive script.

ms pushed a commit to branch master
in repository merchant-backoffice.

The following commit(s) were added to refs/heads/master by this push:
     new e4ae2ee  fix stateful management of input data
e4ae2ee is described below

commit e4ae2eed1d15036ea8e86296226aaff031e689ee
Author: MS <ms@taler.net>
AuthorDate: Fri Sep 9 16:48:15 2022 +0200

    fix stateful management of input data
---
 packages/bank/src/pages/home/index.tsx | 100 +++++++++++++++++++++++++--------
 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
index 51cceb2..de9426a 100644
--- a/packages/bank/src/pages/home/index.tsx
+++ b/packages/bank/src/pages/home/index.tsx
@@ -282,10 +282,30 @@ function useShowPublicAccount(
   return [retObj, retSetter]
 }
 
+/**
+ * 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>

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.