no-fix: user logger instead of console.log

9 files changed, 82 insertions, 61 deletions

diff --git a/packages/demobank-ui/src/pages/home/AccountPage.tsx b/packages/demobank-ui/src/pages/home/AccountPage.tsx
index 16ff601ec..ddb1e663b 100644
--- a/packages/demobank-ui/src/pages/home/AccountPage.tsx
+++ b/packages/demobank-ui/src/pages/home/AccountPage.tsx
@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { Amounts, HttpStatusCode } from "@gnu-taler/taler-util";
+import { Amounts, HttpStatusCode, Logger } from "@gnu-taler/taler-util";
 import { hooks } from "@gnu-taler/web-util/lib/index.browser";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { StateUpdater, useEffect } from "preact/hooks";
@@ -28,7 +28,7 @@ import { getIbanFromPayto, prepareHeaders } from "../../utils.js";
 import { BankFrame } from "./BankFrame.js";
 import { LoginForm } from "./LoginForm.js";
 import { PaymentOptions } from "./PaymentOptions.js";
-import { TalerWithdrawalQRCode } from "./TalerWithdrawalQRCode.js";
+import { WithdrawalQRCode } from "./TalerWithdrawalQRCode.js";
 import { Transactions } from "./Transactions.js";
 
 export function AccountPage(): VNode {
@@ -80,6 +80,8 @@ function SWRWithCredentials({
   );
 }
 
+const logger = new Logger("AccountPage");
+
 /**
  * Show only the account's balance.  NOTE: the backend state
  * is mostly needed to provide the user's credentials to POST
@@ -116,7 +118,7 @@ function Account({ accountLabel }: { accountLabel: string }): VNode {
   // }
 
   if (typeof error !== "undefined") {
-    console.log("account error", error, endpoint);
+    logger.trace("account error", error, endpoint);
     /**
      * FIXME: to minimize the code, try only one invocation
      * of pageStateSetter, after having decided the error
@@ -189,12 +191,11 @@ function Account({ accountLabel }: { accountLabel: string }): VNode {
    * brought to this ("Account") page where they get informed about
    * the outcome.
    */
-  console.log(`maybe new withdrawal ${talerWithdrawUri}`);
   if (talerWithdrawUri && withdrawalId) {
-    console.log("Bank created a new Taler withdrawal");
+    logger.trace("Bank created a new Taler withdrawal");
     return (
       <BankFrame>
-        <TalerWithdrawalQRCode
+        <WithdrawalQRCode
           withdrawalId={withdrawalId}
           talerWithdrawUri={talerWithdrawUri}
         />
@@ -252,15 +253,15 @@ function Account({ accountLabel }: { accountLabel: string }): VNode {
   );
 }
 
-function useTransactionPageNumber(): [number, StateUpdater<number>] {
-  const ret = hooks.useNotNullLocalStorage("transaction-page", "0");
-  const retObj = JSON.parse(ret[0]);
-  const retSetter: StateUpdater<number> = function (val) {
-    const newVal =
-      val instanceof Function
-        ? JSON.stringify(val(retObj))
-        : JSON.stringify(val);
-    ret[1](newVal);
-  };
-  return [retObj, retSetter];
-}
+// function useTransactionPageNumber(): [number, StateUpdater<number>] {
+//   const ret = hooks.useNotNullLocalStorage("transaction-page", "0");
+//   const retObj = JSON.parse(ret[0]);
+//   const retSetter: StateUpdater<number> = function (val) {
+//     const newVal =
+//       val instanceof Function
+//         ? JSON.stringify(val(retObj))
+//         : JSON.stringify(val);
+//     ret[1](newVal);
+//   };
+//   return [retObj, retSetter];
+// }
diff --git a/packages/demobank-ui/src/pages/home/BankFrame.tsx b/packages/demobank-ui/src/pages/home/BankFrame.tsx
index f6b8fbd96..2a0c797f2 100644
--- a/packages/demobank-ui/src/pages/home/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/home/BankFrame.tsx
@@ -14,6 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import { Logger } from "@gnu-taler/taler-util";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import talerLogo from "../../assets/logo-white.svg";
 import { LangSelectorLikePy as LangSelector } from "../../components/menu/LangSelector.js";
@@ -22,6 +23,8 @@ import { PageStateType, usePageContext } from "../../context/pageState.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { bankUiSettings } from "../../settings.js";
 
+const logger = new Logger("BankFrame");
+
 export function BankFrame({
   children,
 }: {
@@ -30,7 +33,7 @@ export function BankFrame({
   const { i18n } = useTranslationContext();
   const backend = useBackendContext();
   const { pageState, pageStateSetter } = usePageContext();
-  console.log("BankFrame state", pageState);
+  logger.trace("state", pageState);
   const logOut = (
     <div class="logout">
       <a
diff --git a/packages/demobank-ui/src/pages/home/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/home/PaytoWireTransferForm.tsx
index e4fe386ff..bfb2f2fef 100644
--- a/packages/demobank-ui/src/pages/home/PaytoWireTransferForm.tsx
+++ b/packages/demobank-ui/src/pages/home/PaytoWireTransferForm.tsx
@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { Amounts, parsePaytoUri } from "@gnu-taler/taler-util";
+import { Amounts, Logger, parsePaytoUri } from "@gnu-taler/taler-util";
 import { hooks } from "@gnu-taler/web-util/lib/index.browser";
 import { h, VNode } from "preact";
 import { StateUpdater, useEffect, useRef, useState } from "preact/hooks";
@@ -25,6 +25,8 @@ import { BackendState } from "../../hooks/backend.js";
 import { prepareHeaders, undefinedIfEmpty } from "../../utils.js";
 import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
 
+const logger = new Logger("PaytoWireTransferForm");
+
 export function PaytoWireTransferForm({
   focus,
   currency,
@@ -162,7 +164,7 @@ export function PaytoWireTransferForm({
                   typeof submitData.amount === "undefined" ||
                   submitData.amount === ""
                 ) {
-                  console.log("Not all the fields were given.");
+                  logger.error("Not all the fields were given.");
                   pageStateSetter((prevState: PageStateType) => ({
                     ...prevState,
 
@@ -209,7 +211,7 @@ export function PaytoWireTransferForm({
           <a
             href="/account"
             onClick={() => {
-              console.log("switch to raw payto form");
+              logger.trace("switch to raw payto form");
               pageStateSetter((prevState) => ({
                 ...prevState,
                 isRawPayto: true,
@@ -272,7 +274,7 @@ export function PaytoWireTransferForm({
             onClick={async () => {
               // empty string evaluates to false.
               if (!rawPaytoInput) {
-                console.log("Didn't get any raw Payto string!");
+                logger.error("Didn't get any raw Payto string!");
                 return;
               }
               transactionData = { paytoUri: rawPaytoInput };
@@ -295,7 +297,7 @@ export function PaytoWireTransferForm({
           <a
             href="/account"
             onClick={() => {
-              console.log("switch to wire-transfer-form");
+              logger.trace("switch to wire-transfer-form");
               pageStateSetter((prevState) => ({
                 ...prevState,
                 isRawPayto: false,
@@ -355,7 +357,7 @@ async function createTransactionCall(
   cleanUpForm: () => void,
 ): Promise<void> {
   if (backendState.status === "loggedOut") {
-    console.log("No credentials found.");
+    logger.error("No credentials found.");
     pageStateSetter((prevState) => ({
       ...prevState,
 
@@ -379,7 +381,7 @@ async function createTransactionCall(
       body: JSON.stringify(req),
     });
   } catch (error) {
-    console.log("Could not POST transaction request to the bank", error);
+    logger.error("Could not POST transaction request to the bank", error);
     pageStateSetter((prevState) => ({
       ...prevState,
 
@@ -394,7 +396,7 @@ async function createTransactionCall(
   // POST happened, status not sure yet.
   if (!res.ok) {
     const response = await res.json();
-    console.log(
+    logger.error(
       `Transfer creation gave response error: ${response} (${res.status})`,
     );
     pageStateSetter((prevState) => ({
@@ -409,7 +411,7 @@ async function createTransactionCall(
     return;
   }
   // status is 200 OK here, tell the user.
-  console.log("Wire transfer created!");
+  logger.trace("Wire transfer created!");
   pageStateSetter((prevState) => ({
     ...prevState,
 
diff --git a/packages/demobank-ui/src/pages/home/PublicHistoriesPage.tsx b/packages/demobank-ui/src/pages/home/PublicHistoriesPage.tsx
index a8028f3bf..a0fb8493b 100644
--- a/packages/demobank-ui/src/pages/home/PublicHistoriesPage.tsx
+++ b/packages/demobank-ui/src/pages/home/PublicHistoriesPage.tsx
@@ -14,6 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import { Logger } from "@gnu-taler/taler-util";
 import { hooks } from "@gnu-taler/web-util/lib/index.browser";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { route } from "preact-router";
@@ -25,6 +26,8 @@ import { getBankBackendBaseUrl } from "../../utils.js";
 import { BankFrame } from "./BankFrame.js";
 import { Transactions } from "./Transactions.js";
 
+const logger = new Logger("PublicHistoriesPage");
+
 export function PublicHistoriesPage(): VNode {
   return (
     <SWRWithoutCredentials baseUrl={getBankBackendBaseUrl()}>
@@ -42,7 +45,7 @@ function SWRWithoutCredentials({
   children: ComponentChildren;
   baseUrl: string;
 }): VNode {
-  console.log("Base URL", baseUrl);
+  logger.trace("Base URL", baseUrl);
   return (
     <SWRConfig
       value={{
@@ -69,10 +72,9 @@ function PublicHistories(): VNode {
   const { i18n } = useTranslationContext();
 
   if (typeof error !== "undefined") {
-    console.log("account error", error);
     switch (error.status) {
       case 404:
-        console.log("public accounts: 404", error);
+        logger.error("public accounts: 404", error);
         route("/account");
         pageStateSetter((prevState: PageStateType) => ({
           ...prevState,
@@ -84,7 +86,7 @@ function PublicHistories(): VNode {
         }));
         break;
       default:
-        console.log("public accounts: non-404 error", error);
+        logger.error("public accounts: non-404 error", error);
         route("/account");
         pageStateSetter((prevState: PageStateType) => ({
           ...prevState,
@@ -105,13 +107,14 @@ function PublicHistories(): VNode {
    * Show the account specified in the props, or just one
    * from the list if that's not given.
    */
-  if (typeof showAccount === "undefined" && data.publicAccounts.length > 0)
+  if (typeof showAccount === "undefined" && data.publicAccounts.length > 0) {
     setShowAccount(data.publicAccounts[1].accountLabel);
-  console.log(`Public history tab: ${showAccount}`);
+  }
+  logger.trace(`Public history tab: ${showAccount}`);
 
   // Ask story of all the public accounts.
   for (const account of data.publicAccounts) {
-    console.log("Asking transactions for", account.accountLabel);
+    logger.trace("Asking transactions for", account.accountLabel);
     const isSelected = account.accountLabel == showAccount;
     accountsBar.push(
       <li
diff --git a/packages/demobank-ui/src/pages/home/RegistrationPage.tsx b/packages/demobank-ui/src/pages/home/RegistrationPage.tsx
index 08e9bd480..200f63e7c 100644
--- a/packages/demobank-ui/src/pages/home/RegistrationPage.tsx
+++ b/packages/demobank-ui/src/pages/home/RegistrationPage.tsx
@@ -13,6 +13,7 @@
  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 { Fragment, h, VNode } from "preact";
 import { route } from "preact-router";
 import { StateUpdater, useState } from "preact/hooks";
@@ -25,6 +26,8 @@ import { getBankBackendBaseUrl, undefinedIfEmpty } from "../../utils.js";
 import { BankFrame } from "./BankFrame.js";
 import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
 
+const logger = new Logger("RegistrationPage");
+
 export function RegistrationPage(): VNode {
   const { i18n } = useTranslationContext();
   if (!bankUiSettings.allowRegistrations) {
@@ -197,7 +200,7 @@ async function registrationCall(
       headers,
     });
   } catch (error) {
-    console.log(
+    logger.trace(
       `Could not POST new registration to the bank (${registerEndpoint.href})`,
       error,
     );
diff --git a/packages/demobank-ui/src/pages/home/Transactions.tsx b/packages/demobank-ui/src/pages/home/Transactions.tsx
index c0bb86024..295bfe0e6 100644
--- a/packages/demobank-ui/src/pages/home/Transactions.tsx
+++ b/packages/demobank-ui/src/pages/home/Transactions.tsx
@@ -1,8 +1,10 @@
+import { Logger } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useEffect } from "preact/hooks";
 import useSWR from "swr";
 import { useTranslationContext } from "../../context/translation.js";
 
+const logger = new Logger("Transactions");
 /**
  * Show one page of transactions.
  */
@@ -25,7 +27,7 @@ export function Transactions({
     }
   }, [balanceValue ?? ""]);
   if (typeof error !== "undefined") {
-    console.log("transactions not found error", error);
+    logger.error("transactions not found error", error);
     switch (error.status) {
       case 404: {
         return <p>Transactions page {pageNumber} was not found.</p>;
@@ -39,10 +41,10 @@ export function Transactions({
     }
   }
   if (!data) {
-    console.log(`History data of ${accountLabel} not arrived`);
+    logger.trace(`History data of ${accountLabel} not arrived`);
     return <p>Transactions page loading...</p>;
   }
-  console.log(`History data of ${accountLabel}`, data);
+  logger.trace(`History data of ${accountLabel}`, data);
   return (
     <div class="results">
       <table class="pure-table pure-table-striped">
diff --git a/packages/demobank-ui/src/pages/home/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/home/WalletWithdrawForm.tsx
index ee43d2006..29fc1eb6a 100644
--- a/packages/demobank-ui/src/pages/home/WalletWithdrawForm.tsx
+++ b/packages/demobank-ui/src/pages/home/WalletWithdrawForm.tsx
@@ -14,6 +14,7 @@
  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 { StateUpdater, useEffect, useRef } from "preact/hooks";
 import { useBackendContext } from "../../context/backend.js";
@@ -22,6 +23,8 @@ import { useTranslationContext } from "../../context/translation.js";
 import { BackendState } from "../../hooks/backend.js";
 import { prepareHeaders, validateAmount } from "../../utils.js";
 
+const logger = new Logger("WalletWithdrawForm");
+
 export function WalletWithdrawForm({
   focus,
   currency,
@@ -110,7 +113,7 @@ async function createWithdrawalCall(
   pageStateSetter: StateUpdater<PageStateType>,
 ): Promise<void> {
   if (backendState?.status === "loggedOut") {
-    console.log("Page has a problem: no credentials found in the state.");
+    logger.error("Page has a problem: no credentials found in the state.");
     pageStateSetter((prevState) => ({
       ...prevState,
 
@@ -137,7 +140,7 @@ async function createWithdrawalCall(
       body: JSON.stringify({ amount }),
     });
   } catch (error) {
-    console.log("Could not POST withdrawal request to the bank", error);
+    logger.trace("Could not POST withdrawal request to the bank", error);
     pageStateSetter((prevState) => ({
       ...prevState,
 
@@ -151,7 +154,7 @@ async function createWithdrawalCall(
   }
   if (!res.ok) {
     const response = await res.json();
-    console.log(
+    logger.error(
       `Withdrawal creation gave response error: ${response} (${res.status})`,
     );
     pageStateSetter((prevState) => ({
@@ -166,7 +169,7 @@ async function createWithdrawalCall(
     return;
   }
 
-  console.log("Withdrawal operation created!");
+  logger.trace("Withdrawal operation created!");
   const resp = await res.json();
   pageStateSetter((prevState: PageStateType) => ({
     ...prevState,
diff --git a/packages/demobank-ui/src/pages/home/TalerWithdrawalConfirmationQuestion.tsx b/packages/demobank-ui/src/pages/home/WithdrawalConfirmationQuestion.tsx
index 4fd46878b..3dbe8708e 100644
--- a/packages/demobank-ui/src/pages/home/TalerWithdrawalConfirmationQuestion.tsx
+++ b/packages/demobank-ui/src/pages/home/WithdrawalConfirmationQuestion.tsx
@@ -1,3 +1,4 @@
+import { Logger } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { StateUpdater } from "preact/hooks";
 import { useBackendContext } from "../../context/backend.js";
@@ -6,11 +7,13 @@ import { useTranslationContext } from "../../context/translation.js";
 import { BackendState } from "../../hooks/backend.js";
 import { prepareHeaders } from "../../utils.js";
 
+const logger = new Logger("WithdrawalConfirmationQuestion");
+
 /**
  * Additional authentication required to complete the operation.
  * Not providing a back button, only abort.
  */
-export function TalerWithdrawalConfirmationQuestion(): VNode {
+export function WithdrawalConfirmationQuestion(): VNode {
   const { pageState, pageStateSetter } = usePageContext();
   const backend = useBackendContext();
   const { i18n } = useTranslationContext();
@@ -122,7 +125,7 @@ async function confirmWithdrawalCall(
   pageStateSetter: StateUpdater<PageStateType>,
 ): Promise<void> {
   if (backendState.status === "loggedOut") {
-    console.log("No credentials found.");
+    logger.error("No credentials found.");
     pageStateSetter((prevState) => ({
       ...prevState,
 
@@ -133,7 +136,7 @@ async function confirmWithdrawalCall(
     return;
   }
   if (typeof withdrawalId === "undefined") {
-    console.log("No withdrawal ID found.");
+    logger.error("No withdrawal ID found.");
     pageStateSetter((prevState) => ({
       ...prevState,
 
@@ -168,7 +171,7 @@ async function confirmWithdrawalCall(
       headers,
     });
   } catch (error) {
-    console.log("Could not POST withdrawal confirmation to the bank", error);
+    logger.error("Could not POST withdrawal confirmation to the bank", error);
     pageStateSetter((prevState) => ({
       ...prevState,
 
@@ -183,7 +186,7 @@ async function confirmWithdrawalCall(
   if (!res || !res.ok) {
     const response = await res.json();
     // assume not ok if res is null
-    console.log(
+    logger.error(
       `Withdrawal confirmation gave response error (${res.status})`,
       res.statusText,
     );
@@ -197,7 +200,7 @@ async function confirmWithdrawalCall(
     }));
     return;
   }
-  console.log("Withdrawal operation confirmed!");
+  logger.trace("Withdrawal operation confirmed!");
   pageStateSetter((prevState) => {
     const { talerWithdrawUri, ...rest } = prevState;
     return {
@@ -217,7 +220,7 @@ async function abortWithdrawalCall(
   pageStateSetter: StateUpdater<PageStateType>,
 ): Promise<void> {
   if (backendState.status === "loggedOut") {
-    console.log("No credentials found.");
+    logger.error("No credentials found.");
     pageStateSetter((prevState) => ({
       ...prevState,
 
@@ -228,7 +231,7 @@ async function abortWithdrawalCall(
     return;
   }
   if (typeof withdrawalId === "undefined") {
-    console.log("No withdrawal ID found.");
+    logger.error("No withdrawal ID found.");
     pageStateSetter((prevState) => ({
       ...prevState,
 
@@ -260,7 +263,7 @@ async function abortWithdrawalCall(
     );
     res = await fetch(url.href, { method: "POST", headers });
   } catch (error) {
-    console.log("Could not abort the withdrawal", error);
+    logger.error("Could not abort the withdrawal", error);
     pageStateSetter((prevState) => ({
       ...prevState,
 
@@ -274,7 +277,7 @@ async function abortWithdrawalCall(
   }
   if (!res.ok) {
     const response = await res.json();
-    console.log(
+    logger.error(
       `Withdrawal abort gave response error (${res.status})`,
       res.statusText,
     );
@@ -289,7 +292,7 @@ async function abortWithdrawalCall(
     }));
     return;
   }
-  console.log("Withdrawal operation aborted!");
+  logger.trace("Withdrawal operation aborted!");
   pageStateSetter((prevState) => {
     const { ...rest } = prevState;
     return {
diff --git a/packages/demobank-ui/src/pages/home/TalerWithdrawalQRCode.tsx b/packages/demobank-ui/src/pages/home/WithdrawalQRCode.tsx
index 848a9c45c..d5b8794d3 100644
--- a/packages/demobank-ui/src/pages/home/TalerWithdrawalQRCode.tsx
+++ b/packages/demobank-ui/src/pages/home/WithdrawalQRCode.tsx
@@ -1,17 +1,18 @@
+import { Logger } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import useSWR from "swr";
-import { useBackendContext } from "../../context/backend.js";
 import { PageStateType, usePageContext } from "../../context/pageState.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { QrCodeSection } from "./QrCodeSection.js";
-import { TalerWithdrawalConfirmationQuestion } from "./TalerWithdrawalConfirmationQuestion.js";
+import { WithdrawalConfirmationQuestion } from "./WithdrawalConfirmationQuestion.js";
 
+const logger = new Logger("WithdrawalQRCode");
 /**
  * Offer the QR code (and a clickable taler://-link) to
  * permit the passing of exchange and reserve details to
  * the bank.  Poll the backend until such operation is done.
  */
-export function TalerWithdrawalQRCode({
+export function WithdrawalQRCode({
   withdrawalId,
   talerWithdrawUri,
 }: {
@@ -37,7 +38,7 @@ export function TalerWithdrawalQRCode({
     >{i18n.str`Abort`}</a>
   );
 
-  console.log(`Showing withdraw URI: ${talerWithdrawUri}`);
+  logger.trace(`Showing withdraw URI: ${talerWithdrawUri}`);
   // waiting for the wallet:
 
   const { data, error } = useSWR(
@@ -46,7 +47,7 @@ export function TalerWithdrawalQRCode({
   );
 
   if (typeof error !== "undefined") {
-    console.log(
+    logger.error(
       `withdrawal (${withdrawalId}) was never (correctly) created at the bank...`,
       error,
     );
@@ -73,7 +74,7 @@ export function TalerWithdrawalQRCode({
   /**
    * Wallet didn't communicate withdrawal details yet:
    */
-  console.log("withdrawal status", data);
+  logger.trace("withdrawal status", data);
   if (data.aborted)
     pageStateSetter((prevState: PageStateType) => {
       const { withdrawalId, talerWithdrawUri, ...rest } = prevState;
@@ -99,5 +100,5 @@ export function TalerWithdrawalQRCode({
    * Wallet POSTed the withdrawal details!  Ask the
    * user to authorize the operation (here CAPTCHA).
    */
-  return <TalerWithdrawalConfirmationQuestion />;
+  return <WithdrawalConfirmationQuestion />;
 }