diff --git a/src/components/dialogs/EmailDialog/data/useConfirmEmail.ts b/src/components/dialogs/EmailDialog/data/useConfirmEmail.ts index 475a8cbfb6..67466be926 100644 --- a/src/components/dialogs/EmailDialog/data/useConfirmEmail.ts +++ b/src/components/dialogs/EmailDialog/data/useConfirmEmail.ts @@ -2,7 +2,10 @@ import {useMutation} from '@tanstack/react-query' import {useAgent, useSession} from '#/state/session' -export function useConfirmEmail() { +export function useConfirmEmail({ + onSuccess, + onError, +}: {onSuccess?: () => void; onError?: () => void} = {}) { const agent = useAgent() const {currentAccount} = useSession() @@ -13,11 +16,13 @@ export function useConfirmEmail() { } await agent.com.atproto.server.confirmEmail({ - email: currentAccount.email, + email: currentAccount.email.trim(), token: token.trim(), }) // will update session state at root of app await agent.resumeSession(agent.session!) }, + onSuccess, + onError, }) } diff --git a/src/components/intents/VerifyEmailIntentDialog.tsx b/src/components/intents/VerifyEmailIntentDialog.tsx index 3aca1b6d82..da59dc0e6f 100644 --- a/src/components/intents/VerifyEmailIntentDialog.tsx +++ b/src/components/intents/VerifyEmailIntentDialog.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import {useEffect, useState} from 'react' import {View} from 'react-native' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -9,6 +9,7 @@ import {atoms as a, useBreakpoints, useTheme} from '#/alf' import {Button, ButtonIcon, ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' import {type DialogControlProps} from '#/components/Dialog' +import {useConfirmEmail} from '#/components/dialogs/EmailDialog/data/useConfirmEmail' import {Divider} from '#/components/Divider' import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Resend} from '#/components/icons/ArrowRotateCounterClockwise' import {useIntentDialogs} from '#/components/intents/IntentDialogs' @@ -31,29 +32,22 @@ function Inner({}: {control: DialogControlProps}) { const {gtMobile} = useBreakpoints() const {_} = useLingui() const {verifyEmailState: state} = useIntentDialogs() - const [status, setStatus] = React.useState< + const [status, setStatus] = useState< 'loading' | 'success' | 'failure' | 'resent' >('loading') - const [sending, setSending] = React.useState(false) + const [sending, setSending] = useState(false) const agent = useAgent() const {currentAccount} = useSession() + const {mutate: confirmEmail} = useConfirmEmail({ + onSuccess: () => setStatus('success'), + onError: () => setStatus('failure'), + }) - React.useEffect(() => { - ;(async () => { - if (!state?.code) { - return - } - try { - await agent.com.atproto.server.confirmEmail({ - email: (currentAccount?.email || '').trim(), - token: state.code.trim(), - }) - setStatus('success') - } catch (e) { - setStatus('failure') - } - })() - }, [agent.com.atproto.server, currentAccount?.email, state?.code]) + useEffect(() => { + if (state?.code) { + confirmEmail({token: state.code}) + } + }, [state?.code, confirmEmail]) const onPressResendEmail = async () => { setSending(true) @@ -121,11 +115,10 @@ function Inner({}: {control: DialogControlProps}) {