From 614a3e3c8702bb7436398acb911880caae0fdee7 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Sat, 30 Jul 2022 20:55:41 -0300 Subject: standarizing components --- .../src/cta/Withdraw/index.ts | 38 ++++++++-------- .../src/cta/Withdraw/state.ts | 32 ++++++-------- .../src/cta/Withdraw/stories.tsx | 14 +++--- .../src/cta/Withdraw/test.ts | 50 +++++++++++----------- .../src/cta/Withdraw/views.tsx | 25 ++++------- 5 files changed, 71 insertions(+), 88 deletions(-) (limited to 'packages/taler-wallet-webextension/src/cta/Withdraw') 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 = { + loading: Loading, "loading-uri": LoadingUriView, "loading-exchange": LoadingExchangeView, "loading-info": LoadingInfoView, @@ -93,6 +95,4 @@ const viewMapping: StateViewMap = { 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 */ -/** - * 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(); - 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 ; return ( Could not get the info from the URI } - 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 ; return ( Could not get exchange} - 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 ; + return ( Could not get info of withdrawal} - error={state.hook} + error={error} /> ); } -- cgit v1.2.3