standarizing components

5 files changed, 71 insertions, 88 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
index 75b44fe1e..1bf38721c 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
@@ -15,56 +15,57 @@
  */
 
 import { AmountJson } from "@gnu-taler/taler-util";
-import { compose, StateViewMap } from "../../utils/index.js";
+import { Loading } from "../../components/Loading.js";
 import { HookError } from "../../hooks/useAsyncAsHook.js";
 import { ButtonHandler, SelectFieldHandler } from "../../mui/handlers.js";
+import { compose, StateViewMap } from "../../utils/index.js";
+import * as wxApi from "../../wxApi.js";
 import {
   Props as TermsOfServiceSectionProps
 } from "../TermsOfServiceSection.js";
-import { CompletedView, LoadingExchangeView, LoadingInfoView, LoadingUriView, SuccessView } from "./views.js";
 import { useComponentState } from "./state.js";
+import { CompletedView, LoadingExchangeView, LoadingInfoView, LoadingUriView, SuccessView } from "./views.js";
 
-/**
- * Page shown to the user to confirm creation
- * of a reserve, usually requested by the bank.
- *
- * @author sebasjm
- */
 
 export interface Props {
   talerWithdrawUri: string | undefined;
 }
 
 export type State =
-  | State.LoadingUri
-  | State.LoadingExchange
+  | State.Loading
+  | State.LoadingUriError
+  | State.LoadingExchangeError
   | State.LoadingInfoError
   | State.Success
   | State.Completed;
 
 export namespace State {
 
-  export interface LoadingUri {
+  export interface Loading {
+    status: "loading";
+    error: undefined;
+  }
+  export interface LoadingUriError {
     status: "loading-uri";
-    hook: HookError | undefined;
+    error: HookError;
   }
-  export interface LoadingExchange {
+  export interface LoadingExchangeError {
     status: "loading-exchange";
-    hook: HookError | undefined;
+    error: HookError;
   }
   export interface LoadingInfoError {
     status: "loading-info";
-    hook: HookError | undefined;
+    error: HookError;
   }
 
   export type Completed = {
     status: "completed";
-    hook: undefined;
+    error: undefined;
   };
 
   export type Success = {
     status: "success";
-    hook: undefined;
+    error: undefined;
 
     exchange: SelectFieldHandler;
 
@@ -86,6 +87,7 @@ export namespace State {
 }
 
 const viewMapping: StateViewMap<State> = {
+  loading: Loading,
   "loading-uri": LoadingUriView,
   "loading-exchange": LoadingExchangeView,
   "loading-info": LoadingInfoView,
@@ -93,6 +95,4 @@ const viewMapping: StateViewMap<State> = {
   success: SuccessView,
 };
 
-import * as wxApi from "../../wxApi.js";
-
 export const WithdrawPage = compose("Withdraw", (p: Props) => useComponentState(p, wxApi), viewMapping)
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
index cfca3a0f7..2e63c0f47 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
@@ -14,12 +14,6 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-/**
- * Page shown to the user to confirm creation
- * of a reserve, usually requested by the bank.
- *
- * @author sebasjm
- */
 
 import { Amounts } from "@gnu-taler/taler-util";
 import { TalerError } from "@gnu-taler/taler-wallet-core";
@@ -133,17 +127,18 @@ export function useComponentState(
   const [showExchangeSelection, setShowExchangeSelection] = useState(false);
   const [nextExchange, setNextExchange] = useState<string | undefined>();
 
-  if (!uriInfoHook || uriInfoHook.hasError) {
+  if (!uriInfoHook) return { status: "loading", error: undefined }
+  if (uriInfoHook.hasError) {
     return {
       status: "loading-uri",
-      hook: uriInfoHook,
+      error: uriInfoHook,
     };
   }
 
   if (!thisExchange || !amount) {
     return {
       status: "loading-exchange",
-      hook: {
+      error: {
         hasError: true,
         operational: false,
         message: "ERROR_NO-DEFAULT-EXCHANGE",
@@ -179,23 +174,20 @@ export function useComponentState(
     {},
   );
 
-  if (!info || info.hasError) {
+  if (!info) {
+    return { status: "loading", error: undefined }
+  }
+  if (info.hasError) {
     return {
       status: "loading-info",
-      hook: info,
+      error: info,
     };
   }
   if (!info.response) {
-    return {
-      status: "loading-info",
-      hook: undefined,
-    };
+    return { status: "loading", error: undefined };
   }
   if (withdrawCompleted) {
-    return {
-      status: "completed",
-      hook: undefined,
-    };
+    return { status: "completed", error: undefined };
   }
 
   const exchangeHandler: SelectFieldHandler = {
@@ -263,7 +255,7 @@ export function useComponentState(
 
   return {
     status: "success",
-    hook: undefined,
+    error: undefined,
     exchange: exchangeHandler,
     editExchange,
     cancelEditExchange,
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx
index e221f9034..3ecccd1b2 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx
@@ -61,7 +61,7 @@ const ageRestrictionSelectField = {
 };
 
 export const TermsOfServiceNotYetLoaded = createExample(SuccessView, {
-  hook: undefined,
+  error: undefined,
   status: "success",
   cancelEditExchange: nullHandler,
   confirmEditExchange: nullHandler,
@@ -95,7 +95,7 @@ export const TermsOfServiceNotYetLoaded = createExample(SuccessView, {
 });
 
 export const WithSomeFee = createExample(SuccessView, {
-  hook: undefined,
+  error: undefined,
   status: "success",
   cancelEditExchange: nullHandler,
   confirmEditExchange: nullHandler,
@@ -130,7 +130,7 @@ export const WithSomeFee = createExample(SuccessView, {
 });
 
 export const WithoutFee = createExample(SuccessView, {
-  hook: undefined,
+  error: undefined,
   status: "success",
   cancelEditExchange: nullHandler,
   confirmEditExchange: nullHandler,
@@ -165,7 +165,7 @@ export const WithoutFee = createExample(SuccessView, {
 });
 
 export const EditExchangeUntouched = createExample(SuccessView, {
-  hook: undefined,
+  error: undefined,
   status: "success",
   cancelEditExchange: nullHandler,
   confirmEditExchange: nullHandler,
@@ -200,7 +200,7 @@ export const EditExchangeUntouched = createExample(SuccessView, {
 });
 
 export const EditExchangeModified = createExample(SuccessView, {
-  hook: undefined,
+  error: undefined,
   status: "success",
   cancelEditExchange: nullHandler,
   confirmEditExchange: nullHandler,
@@ -237,11 +237,11 @@ export const EditExchangeModified = createExample(SuccessView, {
 
 export const CompletedWithoutBankURL = createExample(CompletedView, {
   status: "completed",
-  hook: undefined,
+  error: undefined,
 });
 
 export const WithAgeRestrictionSelected = createExample(SuccessView, {
-  hook: undefined,
+  error: undefined,
   status: "success",
   cancelEditExchange: nullHandler,
   confirmEditExchange: nullHandler,
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts
index 7726d8a59..f335f46a8 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts
@@ -54,21 +54,20 @@ describe("Withdraw CTA states", () => {
       );
 
     {
-      const { status, hook } = getLastResultOrThrow();
-      expect(status).equals("loading-uri");
-      expect(hook).undefined;
+      const { status } = getLastResultOrThrow();
+      expect(status).equals("loading");
     }
 
     await waitNextUpdate();
 
     {
-      const { status, hook } = getLastResultOrThrow();
+      const { status, error } = getLastResultOrThrow();
 
-      expect(status).equals("loading-uri");
-      if (!hook) expect.fail();
-      if (!hook.hasError) expect.fail();
-      if (hook.operational) expect.fail();
-      expect(hook.message).eq("ERROR_NO-URI-FOR-WITHDRAWAL");
+      if (status != "loading-uri") expect.fail();
+      if (!error) expect.fail();
+      if (!error.hasError) expect.fail();
+      if (error.operational) expect.fail();
+      expect(error.message).eq("ERROR_NO-URI-FOR-WITHDRAWAL");
     }
 
     await assertNoPendingUpdate();
@@ -87,19 +86,18 @@ describe("Withdraw CTA states", () => {
       );
 
     {
-      const { status, hook } = getLastResultOrThrow();
-      expect(status).equals("loading-uri");
-      expect(hook).undefined;
+      const { status } = getLastResultOrThrow();
+      expect(status).equals("loading");
     }
 
     await waitNextUpdate();
 
     {
-      const { status, hook } = getLastResultOrThrow();
+      const { status, error } = getLastResultOrThrow();
 
       expect(status).equals("loading-exchange");
 
-      expect(hook).deep.equals({
+      expect(error).deep.equals({
         hasError: true,
         operational: false,
         message: "ERROR_NO-DEFAULT-EXCHANGE",
@@ -134,19 +132,19 @@ describe("Withdraw CTA states", () => {
       );
 
     {
-      const { status, hook } = getLastResultOrThrow();
-      expect(status).equals("loading-uri");
-      expect(hook).undefined;
+      const { status, error } = getLastResultOrThrow();
+      expect(status).equals("loading");
+      expect(error).undefined;
     }
 
     await waitNextUpdate();
 
     {
-      const { status, hook } = getLastResultOrThrow();
+      const { status, error } = getLastResultOrThrow();
 
-      expect(status).equals("loading-info");
+      expect(status).equals("loading");
 
-      expect(hook).undefined;
+      expect(error).undefined;
     }
 
     await waitNextUpdate();
@@ -200,19 +198,19 @@ describe("Withdraw CTA states", () => {
       );
 
     {
-      const { status, hook } = getLastResultOrThrow();
-      expect(status).equals("loading-uri");
-      expect(hook).undefined;
+      const { status, error } = getLastResultOrThrow();
+      expect(status).equals("loading");
+      expect(error).undefined;
     }
 
     await waitNextUpdate();
 
     {
-      const { status, hook } = getLastResultOrThrow();
+      const { status, error } = getLastResultOrThrow();
 
-      expect(status).equals("loading-info");
+      expect(status).equals("loading");
 
-      expect(hook).undefined;
+      expect(error).undefined;
     }
 
     await waitNextUpdate();
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
index 26e373205..578e5e61f 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
@@ -35,46 +35,39 @@ import { Amounts } from "@gnu-taler/taler-util";
 import { TermsOfServiceSection } from "../TermsOfServiceSection.js";
 import { Button } from "../../mui/Button.js";
 
-/**
- * Page shown to the user to confirm creation
- * of a reserve, usually requested by the bank.
- *
- * @author sebasjm
- */
-
-export function LoadingUriView(state: State.LoadingUri): VNode {
+export function LoadingUriView({ error }: State.LoadingUriError): VNode {
   const { i18n } = useTranslationContext();
-  if (!state.hook) return <Loading />;
 
   return (
     <LoadingError
       title={
         <i18n.Translate>Could not get the info from the URI</i18n.Translate>
       }
-      error={state.hook}
+      error={error}
     />
   );
 }
 
-export function LoadingExchangeView(state: State.LoadingExchange): VNode {
+export function LoadingExchangeView({
+  error,
+}: State.LoadingExchangeError): VNode {
   const { i18n } = useTranslationContext();
-  if (!state.hook) return <Loading />;
 
   return (
     <LoadingError
       title={<i18n.Translate>Could not get exchange</i18n.Translate>}
-      error={state.hook}
+      error={error}
     />
   );
 }
 
-export function LoadingInfoView(state: State.LoadingInfoError): VNode {
+export function LoadingInfoView({ error }: State.LoadingInfoError): VNode {
   const { i18n } = useTranslationContext();
-  if (!state.hook) return <Loading />;
+
   return (
     <LoadingError
       title={<i18n.Translate>Could not get info of withdrawal</i18n.Translate>}
-      error={state.hook}
+      error={error}
     />
   );
 }