Replace resumeSession with getSession in the email check (#8670)

* replace resumeSession with getSession

* copy lil type tweak from the other PR

* Add partialRefreshSession to session API context, use session state to infer state further down tree

* Review

---------

Co-authored-by: Eric Bailey <git@esb.lol>

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

@@ -1,7 +1,7 @@
-import {useCallback, useEffect, useState} from 'react'
-import {useQuery, useQueryClient} from '@tanstack/react-query'
+import {useEffect, useMemo, useState} from 'react'
+import {useQuery} from '@tanstack/react-query'
 
-import {useAgent} from '#/state/session'
+import {useAgent, useSessionApi} from '#/state/session'
 import {emitEmailVerified} from '#/components/dialogs/EmailDialog/events'
 
 export type AccountEmailState = {
@@ -11,57 +11,36 @@ export type AccountEmailState = {
 
 export const accountEmailStateQueryKey = ['accountEmailState'] as const
 
-export function useInvalidateAccountEmailState() {
-  const qc = useQueryClient()
-
-  return useCallback(() => {
-    return qc.invalidateQueries({
-      queryKey: accountEmailStateQueryKey,
-    })
-  }, [qc])
-}
-
-export function useUpdateAccountEmailStateQueryCache() {
-  const qc = useQueryClient()
-
-  return useCallback(
-    (data: AccountEmailState) => {
-      return qc.setQueriesData(
-        {
-          queryKey: accountEmailStateQueryKey,
-        },
-        data,
-      )
-    },
-    [qc],
-  )
-}
-
 export function useAccountEmailState() {
   const agent = useAgent()
+  const {partialRefreshSession} = useSessionApi()
   const [prevIsEmailVerified, setPrevEmailIsVerified] = useState(
     !!agent.session?.emailConfirmed,
   )
-  const fallbackData: AccountEmailState = {
-    isEmailVerified: !!agent.session?.emailConfirmed,
-    email2FAEnabled: !!agent.session?.emailAuthFactor,
-  }
-  const query = useQuery<AccountEmailState>({
+  const state: AccountEmailState = useMemo(
+    () => ({
+      isEmailVerified: !!agent.session?.emailConfirmed,
+      email2FAEnabled: !!agent.session?.emailAuthFactor,
+    }),
+    [agent.session],
+  )
+
+  /**
+   * Only here to refetch on focus, when necessary
+   */
+  useQuery({
     enabled: !!agent.session,
-    refetchOnWindowFocus: true,
+    /**
+     * Only refetch if the email verification s incomplete.
+     */
+    refetchOnWindowFocus: !prevIsEmailVerified,
     queryKey: accountEmailStateQueryKey,
     queryFn: async () => {
-      // will also trigger updates to `#/state/session` data
-      const {data} = await agent.resumeSession(agent.session!)
-      return {
-        isEmailVerified: !!data.emailConfirmed,
-        email2FAEnabled: !!data.emailAuthFactor,
-      }
+      await partialRefreshSession()
+      return null
     },
   })
 
-  const state = query.data ?? fallbackData
-
   /*
    * This will emit `n` times for each instance of this hook. So the listeners
    * all use `once` to prevent multiple handlers firing.

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

@@ -1,13 +1,10 @@
 import {useMutation} from '@tanstack/react-query'
 
 import {useAgent, useSession} from '#/state/session'
-import {useUpdateAccountEmailStateQueryCache} from '#/components/dialogs/EmailDialog/data/useAccountEmailState'
 
 export function useConfirmEmail() {
   const agent = useAgent()
   const {currentAccount} = useSession()
-  const updateAccountEmailStateQueryCache =
-    useUpdateAccountEmailStateQueryCache()
 
   return useMutation({
     mutationFn: async ({token}: {token: string}) => {
@@ -19,11 +16,8 @@ export function useConfirmEmail() {
         email: currentAccount.email,
         token: token.trim(),
       })
-      const {data} = await agent.resumeSession(agent.session!)
-      updateAccountEmailStateQueryCache({
-        isEmailVerified: !!data.emailConfirmed,
-        email2FAEnabled: !!data.emailAuthFactor,
-      })
+      // will update session state at root of app
+      await agent.resumeSession(agent.session!)
     },
   })
 }

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

@@ -1,13 +1,10 @@
 import {useMutation} from '@tanstack/react-query'
 
 import {useAgent, useSession} from '#/state/session'
-import {useUpdateAccountEmailStateQueryCache} from '#/components/dialogs/EmailDialog/data/useAccountEmailState'
 
 export function useManageEmail2FA() {
   const agent = useAgent()
   const {currentAccount} = useSession()
-  const updateAccountEmailStateQueryCache =
-    useUpdateAccountEmailStateQueryCache()
 
   return useMutation({
     mutationFn: async ({
@@ -25,11 +22,8 @@ export function useManageEmail2FA() {
         emailAuthFactor: enabled,
         token,
       })
-      const {data} = await agent.resumeSession(agent.session!)
-      updateAccountEmailStateQueryCache({
-        isEmailVerified: !!data.emailConfirmed,
-        email2FAEnabled: !!data.emailAuthFactor,
-      })
+      // will update session state at root of app
+      await agent.resumeSession(agent.session!)
     },
   })
 }