From 8642f8edcd1aa8fe18c50d534f485debf1df01c9 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 30 Mar 2022 14:22:42 -0300 Subject: fix loop rendering --- .../taler-wallet-webextension/src/cta/Deposit.tsx | 3 +- packages/taler-wallet-webextension/src/cta/Pay.tsx | 2 + .../taler-wallet-webextension/src/cta/Withdraw.tsx | 79 ++++++++++++++-------- .../src/hooks/useAsyncAsHook.ts | 2 +- .../src/hooks/useTalerActionURL.test.ts | 1 + .../src/mui/input/FormControl.tsx | 10 ++- .../src/mui/input/InputBase.tsx | 2 +- .../src/platform/chrome.ts | 1 + .../src/wallet/CreateManualWithdraw.test.ts | 1 + .../src/wallet/CreateManualWithdraw.tsx | 1 + .../src/wallet/DepositPage.stories.tsx | 1 + .../src/wallet/DepositPage.tsx | 3 +- .../src/wallet/ExchangeSetUrl.tsx | 2 +- .../src/wallet/ProviderAddPage.tsx | 3 +- .../taler-wallet-webextension/src/wxBackend.ts | 1 - 15 files changed, 72 insertions(+), 40 deletions(-) diff --git a/packages/taler-wallet-webextension/src/cta/Deposit.tsx b/packages/taler-wallet-webextension/src/cta/Deposit.tsx index 7ade50e2c..541bc733b 100644 --- a/packages/taler-wallet-webextension/src/cta/Deposit.tsx +++ b/packages/taler-wallet-webextension/src/cta/Deposit.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ /* This file is part of TALER (C) 2015 GNUnet e.V. @@ -197,7 +198,7 @@ export function PaymentRequestView({ payStatus, payResult, }: PaymentRequestViewProps): VNode { - let totalFees: AmountJson = Amounts.getZero(payStatus.amountRaw); + const totalFees: AmountJson = Amounts.getZero(payStatus.amountRaw); const contractTerms: ContractTerms = payStatus.contractTerms; const { i18n } = useTranslationContext(); diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx index c2f352661..13fb69853 100644 --- a/packages/taler-wallet-webextension/src/cta/Pay.tsx +++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx @@ -1,3 +1,5 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ +/* eslint-disable @typescript-eslint/no-non-null-assertion */ /* This file is part of TALER (C) 2015 GNUnet e.V. diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx index 67a910397..64a0c2586 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx +++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx @@ -28,7 +28,7 @@ import { WithdrawUriInfoResponse, } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; -import { useState } from "preact/hooks"; +import { useCallback, useMemo, useState } from "preact/hooks"; import { Loading } from "../components/Loading.js"; import { LoadingError } from "../components/LoadingError.js"; import { ErrorTalerOperation } from "../components/ErrorTalerOperation.js"; @@ -247,37 +247,52 @@ export function WithdrawPageWithParsedURI({ const [reviewing, setReviewing] = useState(false); const [reviewed, setReviewed] = useState(false); - const knownExchangesHook = useAsyncAsHook(() => wxApi.listExchanges()); + const knownExchangesHook = useAsyncAsHook( + useCallback(() => wxApi.listExchanges(), []), + ); - const knownExchanges = - !knownExchangesHook || knownExchangesHook.hasError - ? [] - : knownExchangesHook.response.exchanges; - const withdrawAmount = Amounts.parseOrThrow(uriInfo.amount); - const thisCurrencyExchanges = knownExchanges.filter( - (ex) => ex.currency === withdrawAmount.currency, + const knownExchanges = useMemo( + () => + !knownExchangesHook || knownExchangesHook.hasError + ? [] + : knownExchangesHook.response.exchanges, + [knownExchangesHook], + ); + const withdrawAmount = useMemo( + () => Amounts.parseOrThrow(uriInfo.amount), + [uriInfo.amount], + ); + const thisCurrencyExchanges = useMemo( + () => + knownExchanges.filter((ex) => ex.currency === withdrawAmount.currency), + [knownExchanges, withdrawAmount.currency], ); - const exchange: string | undefined = - customExchange ?? - uriInfo.defaultExchangeBaseUrl ?? - (thisCurrencyExchanges[0] - ? thisCurrencyExchanges[0].exchangeBaseUrl - : undefined); + const exchange: string | undefined = useMemo( + () => + customExchange ?? + uriInfo.defaultExchangeBaseUrl ?? + (thisCurrencyExchanges[0] + ? thisCurrencyExchanges[0].exchangeBaseUrl + : undefined), + [customExchange, thisCurrencyExchanges, uriInfo.defaultExchangeBaseUrl], + ); - const detailsHook = useAsyncAsHook(async () => { - if (!exchange) throw Error("no default exchange"); - const tos = await wxApi.getExchangeTos(exchange, ["text/xml"]); + const detailsHook = useAsyncAsHook( + useCallback(async () => { + if (!exchange) throw Error("no default exchange"); + const tos = await wxApi.getExchangeTos(exchange, ["text/xml"]); - const tosState = buildTermsOfServiceState(tos); + const tosState = buildTermsOfServiceState(tos); - const info = await wxApi.getExchangeWithdrawalInfo({ - exchangeBaseUrl: exchange, - amount: withdrawAmount, - tosAcceptedFormat: ["text/xml"], - }); - return { tos: tosState, info }; - }); + const info = await wxApi.getExchangeWithdrawalInfo({ + exchangeBaseUrl: exchange, + amount: withdrawAmount, + tosAcceptedFormat: ["text/xml"], + }); + return { tos: tosState, info }; + }, [exchange, withdrawAmount]), + ); if (!detailsHook) { return ; @@ -342,10 +357,14 @@ export function WithdrawPageWithParsedURI({ } export function WithdrawPage({ talerWithdrawUri }: Props): VNode { const { i18n } = useTranslationContext(); - const uriInfoHook = useAsyncAsHook(() => - !talerWithdrawUri - ? Promise.reject(undefined) - : wxApi.getWithdrawalDetailsForUri({ talerWithdrawUri }), + const uriInfoHook = useAsyncAsHook( + useCallback( + () => + !talerWithdrawUri + ? Promise.reject(undefined) + : wxApi.getWithdrawalDetailsForUri({ talerWithdrawUri }), + [talerWithdrawUri], + ), ); if (!talerWithdrawUri) { diff --git a/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts b/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts index 68bc9aed7..4e86c5ee5 100644 --- a/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts +++ b/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts @@ -74,6 +74,6 @@ export function useAsyncAsHook( doAsync(); }); } - }); + }, [fn, updateOnNotification]); return result; } diff --git a/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.test.ts b/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.test.ts index ed51d00ee..25513f57b 100644 --- a/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.test.ts +++ b/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.test.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-non-null-assertion */ /* This file is part of GNU Taler (C) 2021 Taler Systems S.A. diff --git a/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx b/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx index 8860ce20d..0f73f8c02 100644 --- a/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx @@ -1,6 +1,6 @@ import { css } from "@linaria/core"; import { ComponentChildren, createContext, h, VNode } from "preact"; -import { useContext, useState } from "preact/hooks"; +import { useContext, useMemo, useState } from "preact/hooks"; // eslint-disable-next-line import/extensions import { Colors } from "../style"; @@ -152,6 +152,10 @@ function withoutUndefinedProperties(obj: any): any { export function useFormControl(props: Partial = {}): FCCProps { const ctx = useContext(FormControlContext); const cleanedProps = withoutUndefinedProperties(props); - if (!ctx) return { ...defaultContextValue, ...cleanedProps }; - return { ...ctx, ...cleanedProps }; + + return useMemo(() => { + return !ctx + ? { ...defaultContextValue, ...cleanedProps } + : { ...ctx, ...cleanedProps }; + }, [cleanedProps, ctx]); } diff --git a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx index a25366bd2..a71f11c5e 100644 --- a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx @@ -169,7 +169,7 @@ export function InputBase({ } else { fcs.onEmpty(); } - }, [value]); + }, [value, fcs]); const handleFocus = (event: JSX.TargetedFocusEvent): void => { // Fix a bug with IE11 where the focus/blur events are triggered diff --git a/packages/taler-wallet-webextension/src/platform/chrome.ts b/packages/taler-wallet-webextension/src/platform/chrome.ts index 67b293ec7..67779f08c 100644 --- a/packages/taler-wallet-webextension/src/platform/chrome.ts +++ b/packages/taler-wallet-webextension/src/platform/chrome.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-non-null-assertion */ /* This file is part of TALER (C) 2017 INRIA diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.test.ts b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.test.ts index 13ce322e9..e6e699ce3 100644 --- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.test.ts +++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.test.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-non-null-assertion */ /* This file is part of GNU Taler (C) 2021 Taler Systems S.A. diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx index a549bf59a..9d7a692a2 100644 --- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx +++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-non-null-assertion */ /* This file is part of GNU Taler (C) 2021 Taler Systems S.A. diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx index cadd0c86d..edc2f971f 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-non-null-assertion */ /* This file is part of GNU Taler (C) 2021 Taler Systems S.A. diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx index 375a03f86..335dfd3c7 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-non-null-assertion */ /* This file is part of TALER (C) 2016 GNUnet e.V. @@ -162,7 +163,7 @@ export function useComponentState( onCalculateFee(selectedAccount, parsedAmount).then((result) => { setFee(result); }); - }, [amount]); + }, [amount, selectedAccount, parsedAmount, onCalculateFee]); const bs = balances.filter((b) => b.available.startsWith(currency)); const balance = diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx index ce1bcbebe..ad8cb7db0 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx @@ -64,7 +64,7 @@ function useEndpointStatus( } }, 500); setHandler(h); - }, [value]); + }, [value, setHandler, handler, onVerify]); return { error: dirty ? error : undefined, diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx index e3a5b9cbe..ed4a91f12 100644 --- a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-non-null-assertion */ /* This file is part of GNU Taler (C) 2021 Taler Systems S.A. @@ -112,7 +113,7 @@ export function SetUrlView({ setUrlError(true); setName(undefined); } - }, [value]); + }, [onVerify, value]); return (
diff --git a/packages/taler-wallet-webextension/src/wxBackend.ts b/packages/taler-wallet-webextension/src/wxBackend.ts index 02342063d..7401fd4fa 100644 --- a/packages/taler-wallet-webextension/src/wxBackend.ts +++ b/packages/taler-wallet-webextension/src/wxBackend.ts @@ -40,7 +40,6 @@ import { Wallet, WalletStoresV1 } from "@gnu-taler/taler-wallet-core"; -import { VNode } from "preact"; import { BrowserCryptoWorkerFactory } from "./browserCryptoWorkerFactory.js"; import { BrowserHttpLib } from "./browserHttpLib.js"; import { getReadRequestPermissions } from "./permissions.js"; -- cgit v1.2.3