impl accout management and refactor

1 files changed, 36 insertions, 75 deletions

diff --git a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
index 174c19288..fd91c0e1a 100644
--- a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
@@ -15,106 +15,67 @@
  */
 
 import { Logger } from "@gnu-taler/taler-util";
+import {
+  HttpResponsePaginated,
+  useTranslationContext,
+} from "@gnu-taler/web-util/lib/index.browser";
 import { Fragment, h, VNode } from "preact";
-import useSWR from "swr";
-import { PageStateType, usePageContext } from "../context/pageState.js";
-import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
+import { Loading } from "../components/Loading.js";
+import { usePageContext } from "../context/pageState.js";
+import { useWithdrawalDetails } from "../hooks/access.js";
 import { QrCodeSection } from "./QrCodeSection.js";
 import { WithdrawalConfirmationQuestion } from "./WithdrawalConfirmationQuestion.js";
 
 const logger = new Logger("WithdrawalQRCode");
+
+interface Props {
+  account: string;
+  withdrawalId: string;
+  talerWithdrawUri: string;
+  onAbort: () => void;
+  onLoadNotOk: <T, E>(error: HttpResponsePaginated<T, E>) => VNode;
+}
 /**
  * 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 WithdrawalQRCode({
+  account,
   withdrawalId,
   talerWithdrawUri,
-}: {
-  withdrawalId: string;
-  talerWithdrawUri: string;
-}): VNode {
-  // turns true when the wallet POSTed the reserve details:
-  const { pageState, pageStateSetter } = usePageContext();
-  const { i18n } = useTranslationContext();
-  const abortButton = (
-    <a
-      class="pure-button btn-cancel"
-      onClick={() => {
-        pageStateSetter((prevState: PageStateType) => {
-          return {
-            ...prevState,
-            withdrawalId: undefined,
-            talerWithdrawUri: undefined,
-            withdrawalInProgress: false,
-          };
-        });
-      }}
-    >{i18n.str`Abort`}</a>
-  );
-
+  onAbort,
+  onLoadNotOk,
+}: Props): VNode {
   logger.trace(`Showing withdraw URI: ${talerWithdrawUri}`);
-  // waiting for the wallet:
-
-  const { data, error } = useSWR(
-    `integration-api/withdrawal-operation/${withdrawalId}`,
-    { refreshInterval: 1000 },
-  );
 
-  if (typeof error !== "undefined") {
-    logger.error(
-      `withdrawal (${withdrawalId}) was never (correctly) created at the bank...`,
-      error,
-    );
-    pageStateSetter((prevState: PageStateType) => ({
-      ...prevState,
-
-      error: {
-        title: i18n.str`withdrawal (${withdrawalId}) was never (correctly) created at the bank...`,
-      },
-    }));
-    return (
-      <Fragment>
-        <br />
-        <br />
-        {abortButton}
-      </Fragment>
-    );
+  const result = useWithdrawalDetails(account, withdrawalId);
+  if (!result.ok) {
+    return onLoadNotOk(result);
   }
+  const { data } = result;
 
-  // data didn't arrive yet and wallet didn't communicate:
-  if (typeof data === "undefined")
-    return <p>{i18n.str`Waiting the bank to create the operation...`}</p>;
-
-  /**
-   * Wallet didn't communicate withdrawal details yet:
-   */
   logger.trace("withdrawal status", data);
-  if (data.aborted)
-    pageStateSetter((prevState: PageStateType) => {
-      const { withdrawalId, talerWithdrawUri, ...rest } = prevState;
-      return {
-        ...rest,
-        withdrawalInProgress: false,
-
-        error: {
-          title: i18n.str`This withdrawal was aborted!`,
-        },
-      };
-    });
+  if (data.aborted) {
+    //signal that this withdrawal is aborted
+    //will redirect to account info
+    onAbort();
+    return <Loading />;
+  }
 
   if (!data.selection_done) {
     return (
-      <QrCodeSection
-        talerWithdrawUri={talerWithdrawUri}
-        abortButton={abortButton}
-      />
+      <QrCodeSection talerWithdrawUri={talerWithdrawUri} onAbort={onAbort} />
     );
   }
   /**
    * Wallet POSTed the withdrawal details!  Ask the
    * user to authorize the operation (here CAPTCHA).
    */
-  return <WithdrawalConfirmationQuestion />;
+  return (
+    <WithdrawalConfirmationQuestion
+      account={account}
+      withdrawalId={talerWithdrawUri}
+    />
+  );
 }