taler/wallet-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

useAsync use an optional deps for callback, most of the time it just need to be rendered once

Browse Source
This commit is contained in:
Sebastian 2022-03-30 14:36:24 -03:00
parent 8642f8edcd
commit 89435696f9
No known key found for this signature in database
GPG Key ID: BE4FF68352439FC1
2 changed files with 28 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/taler-wallet-webextension/src/cta/Withdraw.tsx
View File

@ -247,9 +247,7 @@ export function WithdrawPageWithParsedURI({
const [reviewing, setReviewing] = useState<boolean>(false); const [reviewing, setReviewing] = useState<boolean>(false);
const [reviewed, setReviewed] = useState<boolean>(false); const [reviewed, setReviewed] = useState<boolean>(false);
const knownExchangesHook = useAsyncAsHook( const knownExchangesHook = useAsyncAsHook(wxApi.listExchanges);
useCallback(() => wxApi.listExchanges(), []),
);
const knownExchanges = useMemo( const knownExchanges = useMemo(
() => () =>
@ -278,21 +276,19 @@ export function WithdrawPageWithParsedURI({
[customExchange, thisCurrencyExchanges, uriInfo.defaultExchangeBaseUrl], [customExchange, thisCurrencyExchanges, uriInfo.defaultExchangeBaseUrl],
); );
const detailsHook = useAsyncAsHook( const detailsHook = useAsyncAsHook(async () => {
useCallback(async () => { if (!exchange) throw Error("no default exchange");
if (!exchange) throw Error("no default exchange"); const tos = await wxApi.getExchangeTos(exchange, ["text/xml"]);
const tos = await wxApi.getExchangeTos(exchange, ["text/xml"]);
const tosState = buildTermsOfServiceState(tos); const tosState = buildTermsOfServiceState(tos);
const info = await wxApi.getExchangeWithdrawalInfo({ const info = await wxApi.getExchangeWithdrawalInfo({
exchangeBaseUrl: exchange, exchangeBaseUrl: exchange,
amount: withdrawAmount, amount: withdrawAmount,
tosAcceptedFormat: ["text/xml"], tosAcceptedFormat: ["text/xml"],
}); });
return { tos: tosState, info }; return { tos: tosState, info };
}, [exchange, withdrawAmount]), });
);
if (!detailsHook) { if (!detailsHook) {
return <Loading />; return <Loading />;
@ -357,14 +353,10 @@ export function WithdrawPageWithParsedURI({
} }
export function WithdrawPage({ talerWithdrawUri }: Props): VNode { export function WithdrawPage({ talerWithdrawUri }: Props): VNode {
const { i18n } = useTranslationContext(); const { i18n } = useTranslationContext();
const uriInfoHook = useAsyncAsHook( const uriInfoHook = useAsyncAsHook(() =>
useCallback( !talerWithdrawUri
() => ? Promise.reject(undefined)
!talerWithdrawUri : wxApi.getWithdrawalDetailsForUri({ talerWithdrawUri }),
? Promise.reject(undefined)
: wxApi.getWithdrawalDetailsForUri({ talerWithdrawUri }),
[talerWithdrawUri],
),
); );
if (!talerWithdrawUri) { if (!talerWithdrawUri) {

18
packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts
View File

@ -17,7 +17,7 @@ import {
NotificationType, TalerErrorDetail NotificationType, TalerErrorDetail
} from "@gnu-taler/taler-util"; } from "@gnu-taler/taler-util";
import { TalerError } from "@gnu-taler/taler-wallet-core"; import { TalerError } from "@gnu-taler/taler-wallet-core";
import { useEffect, useState } from "preact/hooks"; import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
import * as wxApi from "../wxApi.js"; import * as wxApi from "../wxApi.js";
interface HookOk<T> { interface HookOk<T> {
@ -41,16 +41,22 @@ export interface HookOperationalError {
export type HookResponse<T> = HookOk<T> | HookError | undefined; export type HookResponse<T> = HookOk<T> | HookError | undefined;
//"withdraw-group-finished"
export function useAsyncAsHook<T>( export function useAsyncAsHook<T>(
fn: () => Promise<T>, fn: () => Promise<T>,
updateOnNotification?: Array<NotificationType>, updateOnNotification?: Array<NotificationType>,
deps?: any[],
): HookResponse<T> { ): HookResponse<T> {
const args = useMemo(() => ({
fn, updateOnNotification
// eslint-disable-next-line react-hooks/exhaustive-deps
}), deps || [])
const [result, setHookResponse] = useState<HookResponse<T>>(undefined); const [result, setHookResponse] = useState<HookResponse<T>>(undefined);
useEffect(() => { useEffect(() => {
async function doAsync(): Promise<void> { async function doAsync(): Promise<void> {
try { try {
const response = await fn(); const response = await args.fn();
setHookResponse({ hasError: false, response }); setHookResponse({ hasError: false, response });
} catch (e) { } catch (e) {
if (e instanceof TalerError) { if (e instanceof TalerError) {
@ -69,11 +75,11 @@ export function useAsyncAsHook<T>(
} }
} }
doAsync(); doAsync();
if (updateOnNotification && updateOnNotification.length > 0) { if (args.updateOnNotification && args.updateOnNotification.length > 0) {
return wxApi.onUpdateNotification(updateOnNotification, () => { return wxApi.onUpdateNotification(args.updateOnNotification, () => {
doAsync(); doAsync();
}); });
} }
}, [fn, updateOnNotification]); }, [args]);
return result; return result;
} }