webextension: fix useEffect dependency tracking

This commit is contained in:
Florian Dold 2021-12-08 11:03:50 +01:00
parent 5b1f779b12
commit 73dabdf43a
No known key found for this signature in database
GPG Key ID: D2E4F00F29D02A4B
2 changed files with 10 additions and 4 deletions

View File

@ -134,6 +134,8 @@ export function PayPage({
const foundAmount = foundBalance const foundAmount = foundBalance
? Amounts.parseOrThrow(foundBalance.available) ? Amounts.parseOrThrow(foundBalance.available)
: undefined; : undefined;
// We use a string here so that dependency tracking for useEffect works properly
const foundAmountStr = foundAmount ? Amounts.stringify(foundAmount) : undefined;
useEffect(() => { useEffect(() => {
if (!talerPayUri) return; if (!talerPayUri) return;
@ -142,6 +144,7 @@ export function PayPage({
const p = await wxApi.preparePay(talerPayUri); const p = await wxApi.preparePay(talerPayUri);
setPayStatus(p); setPayStatus(p);
} catch (e) { } catch (e) {
console.log("Got error while trying to pay", e);
if (e instanceof OperationFailedError) { if (e instanceof OperationFailedError) {
setPayErrMsg(e); setPayErrMsg(e);
} }
@ -151,7 +154,7 @@ export function PayPage({
} }
}; };
doFetch(); doFetch();
}, [talerPayUri, foundAmount]); }, [talerPayUri, foundAmountStr]);
if (!talerPayUri) { if (!talerPayUri) {
return <span>missing pay uri</span>; return <span>missing pay uri</span>;

View File

@ -13,7 +13,7 @@
You should have received a copy of the GNU General Public License along with You should have received a copy of the GNU General Public License along with
TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/ */
import { ExchangesListRespose, NotificationType } from "@gnu-taler/taler-util"; import { NotificationType } from "@gnu-taler/taler-util";
import { useEffect, useState } from "preact/hooks"; import { useEffect, useState } from "preact/hooks";
import * as wxApi from "../wxApi"; import * as wxApi from "../wxApi";
@ -30,7 +30,10 @@ interface HookError {
export type HookResponse<T> = HookOk<T> | HookError | undefined; export type HookResponse<T> = HookOk<T> | HookError | undefined;
//"withdraw-group-finished" //"withdraw-group-finished"
export function useAsyncAsHook<T>(fn: () => Promise<T>, updateOnNotification?: Array<NotificationType>): HookResponse<T> { export function useAsyncAsHook<T>(
fn: () => Promise<T>,
updateOnNotification?: Array<NotificationType>,
): HookResponse<T> {
const [result, setHookResponse] = useState<HookResponse<T>>(undefined); const [result, setHookResponse] = useState<HookResponse<T>>(undefined);
useEffect(() => { useEffect(() => {
async function doAsync() { async function doAsync() {
@ -46,7 +49,7 @@ export function useAsyncAsHook<T>(fn: () => Promise<T>, updateOnNotification?: A
doAsync(); doAsync();
if (updateOnNotification && updateOnNotification.length > 0) { if (updateOnNotification && updateOnNotification.length > 0) {
return wxApi.onUpdateNotification(updateOnNotification, () => { return wxApi.onUpdateNotification(updateOnNotification, () => {
doAsync() doAsync();
}); });
} }
}, []); }, []);