jeanmachine.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Use useConfirmEmail hook in deep link verification flow (#9413)
* use useConfirmEmail hook in deep link verification flow
* more straightforward logic
samuel.fm
+21
-23
+7
-2
src/components/dialogs/EmailDialog/data/useConfirmEmail.ts
+7
-2
src/components/dialogs/EmailDialog/data/useConfirmEmail.ts
···
2
2
3
3
import {useAgent, useSession} from '#/state/session'
4
4
5
-
export function useConfirmEmail() {
5
+
export function useConfirmEmail({
6
+
onSuccess,
7
+
onError,
8
+
}: {onSuccess?: () => void; onError?: () => void} = {}) {
6
9
const agent = useAgent()
7
10
const {currentAccount} = useSession()
8
11
···
13
16
}
14
17
15
18
await agent.com.atproto.server.confirmEmail({
16
-
email: currentAccount.email,
19
+
email: currentAccount.email.trim(),
17
20
token: token.trim(),
18
21
})
19
22
// will update session state at root of app
20
23
await agent.resumeSession(agent.session!)
21
24
},
25
+
onSuccess,
26
+
onError,
22
27
})
23
28
}
+14
-21
src/components/intents/VerifyEmailIntentDialog.tsx
+14
-21
src/components/intents/VerifyEmailIntentDialog.tsx
···
1
-
import React from 'react'
1
+
import {useEffect, useState} from 'react'
2
2
import {View} from 'react-native'
3
3
import {msg, Trans} from '@lingui/macro'
4
4
import {useLingui} from '@lingui/react'
···
9
9
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
10
10
import * as Dialog from '#/components/Dialog'
11
11
import {type DialogControlProps} from '#/components/Dialog'
12
+
import {useConfirmEmail} from '#/components/dialogs/EmailDialog/data/useConfirmEmail'
12
13
import {Divider} from '#/components/Divider'
13
14
import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Resend} from '#/components/icons/ArrowRotateCounterClockwise'
14
15
import {useIntentDialogs} from '#/components/intents/IntentDialogs'
···
31
32
const {gtMobile} = useBreakpoints()
32
33
const {_} = useLingui()
33
34
const {verifyEmailState: state} = useIntentDialogs()
34
-
const [status, setStatus] = React.useState<
35
+
const [status, setStatus] = useState<
35
36
'loading' | 'success' | 'failure' | 'resent'
36
37
>('loading')
37
-
const [sending, setSending] = React.useState(false)
38
+
const [sending, setSending] = useState(false)
38
39
const agent = useAgent()
39
40
const {currentAccount} = useSession()
41
+
const {mutate: confirmEmail} = useConfirmEmail({
42
+
onSuccess: () => setStatus('success'),
43
+
onError: () => setStatus('failure'),
44
+
})
40
45
41
-
React.useEffect(() => {
42
-
;(async () => {
43
-
if (!state?.code) {
44
-
return
45
-
}
46
-
try {
47
-
await agent.com.atproto.server.confirmEmail({
48
-
email: (currentAccount?.email || '').trim(),
49
-
token: state.code.trim(),
50
-
})
51
-
setStatus('success')
52
-
} catch (e) {
53
-
setStatus('failure')
54
-
}
55
-
})()
56
-
}, [agent.com.atproto.server, currentAccount?.email, state?.code])
46
+
useEffect(() => {
47
+
if (state?.code) {
48
+
confirmEmail({token: state.code})
49
+
}
50
+
}, [state?.code, confirmEmail])
57
51
58
52
const onPressResendEmail = async () => {
59
53
setSending(true)
···
121
115
<Button
122
116
label={_(msg`Resend Verification Email`)}
123
117
onPress={onPressResendEmail}
124
-
variant="solid"
125
118
color="secondary_inverted"
126
119
size="large"
127
120
disabled={sending}>
128
-
<ButtonIcon icon={sending ? Loader : Resend} position="left" />
121
+
<ButtonIcon icon={sending ? Loader : Resend} />
129
122
<ButtonText>
130
123
<Trans>Resend Email</Trans>
131
124
</ButtonText>