diff --git a/src/components/widgets/DecryptReport.tsx b/src/components/widgets/DecryptReport.tsx index 4f58625..5a741b0 100644 --- a/src/components/widgets/DecryptReport.tsx +++ b/src/components/widgets/DecryptReport.tsx @@ -1,11 +1,11 @@ -import {ReactElement, useContext} from "react" -import {useAsync} from "react-use" +import {ReactElement, useContext, useEffect} from "react" +import {useLoaderData} from "react-router-dom" import {DecryptedReportContent, Report, ServerSettings} from "~/server-types" import decryptReport from "~/apis/helpers/decrypt-report" import {AuthContext} from "../AuthContext" -import {useLoaderData} from "react-router-dom" +import {useAsync} from "@react-hookz/web" interface DecryptReportPropsBase { encryptedContent?: string @@ -34,7 +34,7 @@ export default function DecryptReport({ const serverSettings = useLoaderData() as ServerSettings const {_decryptUsingPrivateKey} = useContext(AuthContext) - const {value} = useAsync(async () => { + const [{result: value}, actions] = useAsync(async () => { const decrypt = async (content: string): Promise => decryptReport(content, _decryptUsingPrivateKey, serverSettings.publicKey) @@ -43,7 +43,12 @@ export default function DecryptReport({ } else { return await Promise.all(reports!.map(report => decrypt(report.encryptedContent))) } - }, [encryptedContent, reports]) + }) + + useEffect(() => { + actions.reset() + actions.execute() + }, [actions.reset, actions.execute, encryptedContent, reports]) if (!value) { return <> diff --git a/src/routes/VerifyEmailRoute.tsx b/src/routes/VerifyEmailRoute.tsx index f107f34..bc65533 100644 --- a/src/routes/VerifyEmailRoute.tsx +++ b/src/routes/VerifyEmailRoute.tsx @@ -1,10 +1,9 @@ import * as yup from "yup" import {useLoaderData, useNavigate} from "react-router-dom" -import {useAsync} from "react-use" import {MdCancel} from "react-icons/md" import {AxiosError} from "axios" import {useTranslation} from "react-i18next" -import React, {ReactElement, useContext} from "react" +import React, {ReactElement, useContext, useEffect} from "react" import {Grid, Paper, Typography, useTheme} from "@mui/material" import {useMutation} from "@tanstack/react-query" @@ -13,6 +12,7 @@ import {ServerSettings, ServerUser} from "~/server-types" import {VerifyEmailData, verifyEmail} from "~/apis" import {useQueryParams} from "~/hooks" import {AuthContext} from "~/components" +import {useAsync} from "@react-hookz/web" const emailSchema = yup.string().email() @@ -46,7 +46,7 @@ export default function VerifyEmailRoute(): ReactElement { navigate("/auth/complete-account") }, }) - const {loading} = useAsync(async () => { + const [{status}, actions] = useAsync(async () => { await emailSchema.validate(email) await tokenSchema.validate(token) @@ -54,7 +54,13 @@ export default function VerifyEmailRoute(): ReactElement { email, token, }) - }, [email, token]) + }) + const isLoading = status == "loading" + + useEffect(() => { + actions.reset() + actions.execute() + }, [actions.reset, actions.execute, email, token]) return ( @@ -71,7 +77,7 @@ export default function VerifyEmailRoute(): ReactElement { {t("title")} - {loading ? ( + {isLoading ? ( {t("isLoading")}