Improve session refresh

src/components/dialogs/EmailDialog/data/useIsEmailVerified.ts

@@ -1,4 +1,4 @@
-import {useCallback, useRef} from 'react'
+import {useCallback, useState} from 'react'
 import {useQuery, useQueryClient} from '@tanstack/react-query'
 
 import {useAgent} from '#/state/session'
@@ -21,28 +21,28 @@ export function useIsEmailVerified({
   onVerify?: () => void
 } = {}) {
   const agent = useAgent()
-  const prevIsEmailVerified = useRef(!!agent.session?.emailConfirmed)
+  const [prevIsEmailVerified, setPrevEmailIsVerified] = useState(
+    !!agent.session?.emailConfirmed,
+  )
   const query = useQuery({
     enabled: !!agent.session,
     initialData: {isEmailVerified: !!agent.session?.emailConfirmed},
     refetchOnWindowFocus: true,
     queryKey: isEmailVerifiedQueryKey,
     queryFn: async () => {
-      const {data} = await agent.com.atproto.server.getSession()
+      // will also trigger updates to `#/state/session` data
+      const {data} = await agent.resumeSession(agent.session!)
       return {
         isEmailVerified: !!data.emailConfirmed,
       }
     },
   })
 
-  // TODO double check racing?
+  if (query.data.isEmailVerified && !prevIsEmailVerified) {
-  if (query.data.isEmailVerified && !prevIsEmailVerified.current) {
+    setPrevEmailIsVerified(true)
-    console.log('fire')
-    prevIsEmailVerified.current = true
     onVerify?.()
-  } else if (prevIsEmailVerified.current && !query.data.isEmailVerified) {
+  } else if (!query.data.isEmailVerified && prevIsEmailVerified) {
-    console.log('reset')
+    setPrevEmailIsVerified(false)
-    prevIsEmailVerified.current = false
   }
 
   return query.data

src/components/dialogs/EmailDialog/data/useRefreshSession.ts

@@ -1,11 +0,0 @@
-import {useCallback} from 'react'
-
-import {useAgent} from '#/state/session'
-
-export function useRefreshSession() {
-  const agent = useAgent()
-
-  return useCallback(() => {
-    return agent.resumeSession(agent.session!).catch(() => {})
-  }, [agent])
-}

src/components/dialogs/EmailDialog/index.tsx

@@ -7,11 +7,7 @@ import {
   type StatefulControl,
   useStatefulDialogControl,
 } from '#/components/dialogs/Context'
-import {useRefreshSession} from '#/components/dialogs/EmailDialog/data/useRefreshSession'
 import {Manage2FA} from '#/components/dialogs/EmailDialog/screens/Manage2FA'
-/*
- * Steps
- */
 import {Update} from '#/components/dialogs/EmailDialog/screens/Update'
 import {VerificationReminder} from '#/components/dialogs/EmailDialog/screens/VerificationReminder'
 import {Verify} from '#/components/dialogs/EmailDialog/screens/Verify'
@@ -27,15 +23,7 @@ export function useEmailDialogControl() {
 
 export function EmailDialog({control}: {control: StatefulControl<Screen>}) {
   const {_} = useLingui()
-  const refreshSession = useRefreshSession()
+  const onClose = useCallback(() => {}, [])
-  const onClose = useCallback(() => {
-    /**
-     * If link in any verification email is clicked, it will open a new tab.
-     * When the user returns to this tab, we'll refresh their account state
-     * when the dialog closes.
-     */
-    refreshSession()
-  }, [refreshSession])
 
   return (
     <Dialog.Outer control={control.control} onClose={onClose}>

src/components/dialogs/EmailDialog/screens/Verify.tsx

@@ -163,7 +163,8 @@ export function Verify({config}: ScreenProps<ScreenID.Verify>) {
           <Text style={[a.text_xl, a.font_heavy]}>
             <Span style={{top: 1}}>
               <Check size="sm" fill={t.palette.positive_500} />
-            </Span>{' '}
+            </Span>
+            {'  '}
             <Trans>Email verification complete!</Trans>
           </Text>
 
@@ -188,7 +189,8 @@ export function Verify({config}: ScreenProps<ScreenID.Verify>) {
               <>
                 <Span style={{top: 1}}>
                   <Check size="sm" fill={t.palette.positive_500} />
-                </Span>{' '}
+                </Span>
+                {'  '}
                 <Trans>Email sent!</Trans>
               </>
             ) : (