Move to global context

src/Navigation.tsx

@@ -105,7 +105,6 @@ import TopicScreen from '#/screens/Topic'
 import {VideoFeed} from '#/screens/VideoFeed'
 import {useTheme} from '#/alf'
 import {
-  EmailDialog,
   EmailDialogScreenID,
   useEmailDialogControl,
 } from '#/components/dialogs/EmailDialog'
@@ -773,7 +772,6 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) {
         }}>
         {children}
       </NavigationContainer>
-      <EmailDialog control={emailDialogControl} />
     </>
   )
 }

src/components/dialogs/Context.tsx

@@ -1,6 +1,7 @@
 import {createContext, useContext, useMemo, useState} from 'react'
 
 import * as Dialog from '#/components/Dialog'
+import {type Screen} from '#/components/dialogs/EmailDialog/types'
 
 type Control = Dialog.DialogControlProps
 
@@ -15,6 +16,7 @@ type ControlsContext = {
   mutedWordsDialogControl: Control
   signinDialogControl: Control
   inAppBrowserConsentControl: StatefulControl<string>
+  emailDialogControl: StatefulControl<Screen>
 }
 
 const ControlsContext = createContext<ControlsContext | null>(null)
@@ -33,14 +35,21 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   const mutedWordsDialogControl = Dialog.useDialogControl()
   const signinDialogControl = Dialog.useDialogControl()
   const inAppBrowserConsentControl = useStatefulDialogControl<string>()
+  const emailDialogControl = useStatefulDialogControl<Screen>()
 
   const ctx = useMemo<ControlsContext>(
     () => ({
       mutedWordsDialogControl,
       signinDialogControl,
       inAppBrowserConsentControl,
+      emailDialogControl,
     }),
-    [mutedWordsDialogControl, signinDialogControl, inAppBrowserConsentControl],
+    [
+      mutedWordsDialogControl,
+      signinDialogControl,
+      inAppBrowserConsentControl,
+      emailDialogControl,
+    ],
   )
 
   return (

src/components/dialogs/EmailDialog/index.tsx

@@ -3,10 +3,8 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import * as Dialog from '#/components/Dialog'
-import {
-  type StatefulControl,
-  useStatefulDialogControl,
-} from '#/components/dialogs/Context'
+import {type StatefulControl} from '#/components/dialogs/Context'
+import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
 import {useAccountEmailState} from '#/components/dialogs/EmailDialog/data/useAccountEmailState'
 import {Manage2FA} from '#/components/dialogs/EmailDialog/screens/Manage2FA'
 import {Update} from '#/components/dialogs/EmailDialog/screens/Update'
@@ -14,33 +12,33 @@ import {VerificationReminder} from '#/components/dialogs/EmailDialog/screens/Ver
 import {Verify} from '#/components/dialogs/EmailDialog/screens/Verify'
 import {type Screen, ScreenID} from '#/components/dialogs/EmailDialog/types'
 
-export {useDialogControl} from '#/components/Dialog'
 export type {Screen} from '#/components/dialogs/EmailDialog/types'
 export {ScreenID as EmailDialogScreenID} from '#/components/dialogs/EmailDialog/types'
 
 export function useEmailDialogControl() {
-  return useStatefulDialogControl<Screen>()
+  return useGlobalDialogsControlContext().emailDialogControl
 }
 
-export function EmailDialog({control}: {control: StatefulControl<Screen>}) {
+export function EmailDialog() {
   const {_} = useLingui()
+  const emailDialogControl = useEmailDialogControl()
   const {isEmailVerified} = useAccountEmailState()
   const onClose = useCallback(() => {
     if (!isEmailVerified) {
-      if (control.value?.id === ScreenID.Verify) {
-        control.value.onCloseWithoutVerifying?.()
+      if (emailDialogControl.value?.id === ScreenID.Verify) {
+        emailDialogControl.value.onCloseWithoutVerifying?.()
       }
     }
-  }, [isEmailVerified, control])
+  }, [isEmailVerified, emailDialogControl])
 
   return (
-    <Dialog.Outer control={control.control} onClose={onClose}>
+    <Dialog.Outer control={emailDialogControl.control} onClose={onClose}>
       <Dialog.Handle />
 
       <Dialog.ScrollableInner
         label={_(msg`Make adjustments to your account email settings`)}
         style={[{maxWidth: 400}]}>
-        <Inner control={control} />
+        <Inner control={emailDialogControl} />
         <Dialog.Close />
       </Dialog.ScrollableInner>
     </Dialog.Outer>

src/screens/Messages/Conversation.tsx

@@ -32,7 +32,6 @@ import {useSetMinimalShellMode} from '#/state/shell'
 import {MessagesList} from '#/screens/Messages/components/MessagesList'
 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {
-  EmailDialog,
   EmailDialogScreenID,
   useEmailDialogControl,
 } from '#/components/dialogs/EmailDialog'
@@ -229,7 +228,6 @@ function InnerReady({
           }
         />
       )}
-      <EmailDialog control={emailDialogControl} />
     </>
   )
 }

src/screens/Settings/AccountSettings.tsx

@@ -10,7 +10,6 @@ import {atoms as a, useTheme} from '#/alf'
 import {useDialogControl} from '#/components/Dialog'
 import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings'
 import {
-  EmailDialog,
   EmailDialogScreenID,
   useEmailDialogControl,
 } from '#/components/dialogs/EmailDialog'
@@ -177,7 +176,6 @@ export function AccountSettingsScreen({}: Props) {
         </SettingsList.Container>
       </Layout.Content>
 
-      <EmailDialog control={emailDialogControl} />
       <BirthDateSettingsDialog control={birthdayControl} />
       <ChangeHandleDialog control={changeHandleControl} />
       <ExportCarDialog control={exportCarControl} />

src/screens/Settings/components/Email2FAToggle.tsx

@@ -5,7 +5,6 @@ import {useLingui} from '@lingui/react'
 import {useSession} from '#/state/session'
 import {useDialogControl} from '#/components/Dialog'
 import {
-  EmailDialog,
   EmailDialogScreenID,
   useEmailDialogControl,
 } from '#/components/dialogs/EmailDialog'
@@ -27,7 +26,6 @@ export function Email2FAToggle() {
   return (
     <>
       <DisableEmail2FADialog control={disableDialogControl} />
-      <EmailDialog control={emailDialogControl} />
       <SettingsList.BadgeButton
         label={
           currentAccount?.emailAuthFactor ? _(msg`Change`) : _(msg`Enable`)

src/view/com/composer/Composer.tsx

@@ -121,7 +121,6 @@ import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, native, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {
-  EmailDialog,
   EmailDialogScreenID,
   useEmailDialogControl,
 } from '#/components/dialogs/EmailDialog'
@@ -633,7 +632,6 @@ export const ComposePost = ({
   const isWebFooterSticky = !isNative && thread.posts.length > 1
   return (
     <BottomSheetPortalProvider>
-      <EmailDialog control={emailDialogControl} />
       <KeyboardAvoidingView
         testID="composePostView"
         behavior={isIOS ? 'padding' : 'height'}

src/view/shell/index.tsx

@@ -25,6 +25,7 @@ import {ModalsContainer} from '#/view/com/modals/Modal'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {atoms as a, select, useTheme} from '#/alf'
 import {setSystemUITheme} from '#/alf/util/systemUI'
+import {EmailDialog} from '#/components/dialogs/EmailDialog'
 import {InAppBrowserConsentDialog} from '#/components/dialogs/InAppBrowserConsent'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {SigninDialog} from '#/components/dialogs/Signin'
@@ -152,6 +153,7 @@ function ShellInner() {
       <ModalsContainer />
       <MutedWordsDialog />
       <SigninDialog />
+      <EmailDialog />
       <InAppBrowserConsentDialog />
       <Lightbox />
       <PortalOutlet />

src/view/shell/index.web.tsx

@@ -8,7 +8,7 @@ import {RemoveScrollBar} from 'react-remove-scroll-bar'
 import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
 import {useIntentHandler} from '#/lib/hooks/useIntentHandler'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {NavigationProp} from '#/lib/routes/types'
+import {type NavigationProp} from '#/lib/routes/types'
 import {colors} from '#/lib/styles'
 import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell'
 import {useComposerKeyboardShortcut} from '#/state/shell/composer/useComposerKeyboardShortcut'
@@ -17,6 +17,7 @@ import {Lightbox} from '#/view/com/lightbox/Lightbox'
 import {ModalsContainer} from '#/view/com/modals/Modal'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {atoms as a, select, useTheme} from '#/alf'
+import {EmailDialog} from '#/components/dialogs/EmailDialog'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {SigninDialog} from '#/components/dialogs/Signin'
 import {Outlet as PortalOutlet} from '#/components/Portal'
@@ -67,6 +68,7 @@ function ShellInner() {
       <ModalsContainer />
       <MutedWordsDialog />
       <SigninDialog />
+      <EmailDialog />
       <Lightbox />
       <PortalOutlet />