Don't clear toasts when changing users (#3843)

* Move ThemeProvider to the top

* Move RootSiblingParent above the remounted part

* Move ToastContainer outside the remounted part

* Remove setTimeout around toasts

* Consistently handle dropped session

src/App.native.tsx

@@ -89,7 +89,9 @@ function InnerApp() {
   return (
     <SafeAreaProvider initialMetrics={initialWindowMetrics}>
       <Alf theme={theme}>
+        <ThemeProvider theme={theme}>
           <Splash isReady={isReady}>
+            <RootSiblingParent>
               <React.Fragment
                 // Resets the entire tree below when it changes:
                 key={currentAccount?.did}>
@@ -102,15 +104,10 @@ function InnerApp() {
                           <LoggedOutViewProvider>
                             <SelectedFeedProvider>
                               <UnreadNotifsProvider>
-                            <ThemeProvider theme={theme}>
-                              {/* All components should be within this provider */}
-                              <RootSiblingParent>
                                 <GestureHandlerRootView style={s.h100pct}>
                                   <TestCtrls />
                                   <Shell />
                                 </GestureHandlerRootView>
-                              </RootSiblingParent>
-                            </ThemeProvider>
                               </UnreadNotifsProvider>
                             </SelectedFeedProvider>
                           </LoggedOutViewProvider>
@@ -120,7 +117,9 @@ function InnerApp() {
                   </PushNotificationsListener>
                 </QueryProvider>
               </React.Fragment>
+            </RootSiblingParent>
           </Splash>
+        </ThemeProvider>
       </Alf>
     </SafeAreaProvider>
   )

src/App.web.tsx

@@ -4,6 +4,8 @@ import 'view/icons'
 import React, {useEffect, useState} from 'react'
 import {RootSiblingParent} from 'react-native-root-siblings'
 import {SafeAreaProvider} from 'react-native-safe-area-context'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
@@ -30,18 +32,21 @@ import {
 import {Provider as ShellStateProvider} from 'state/shell'
 import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out'
 import {Provider as SelectedFeedProvider} from 'state/shell/selected-feed'
+import * as Toast from 'view/com/util/Toast'
 import {ToastContainer} from 'view/com/util/Toast.web'
 import {Shell} from 'view/shell/index'
 import {ThemeProvider as Alf} from '#/alf'
 import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
 import {Provider as PortalProvider} from '#/components/Portal'
 import I18nProvider from './locale/i18nProvider'
+import {listenSessionDropped} from './state/events'
 
 function InnerApp() {
   const [isReady, setIsReady] = React.useState(false)
   const {currentAccount} = useSession()
   const {initSession} = useSessionApi()
   const theme = useColorModeTheme()
+  const {_} = useLingui()
   useIntentHandler()
 
   // init
@@ -61,11 +66,19 @@ function InnerApp() {
     resumeSession(account)
   }, [initSession])
 
+  useEffect(() => {
+    return listenSessionDropped(() => {
+      Toast.show(_(msg`Sorry! Your session expired. Please log in again.`))
+    })
+  }, [_])
+
   // wait for session to resume
   if (!isReady) return null
 
   return (
     <Alf theme={theme}>
+      <ThemeProvider theme={theme}>
+        <RootSiblingParent>
           <React.Fragment
             // Resets the entire tree below when it changes:
             key={currentAccount?.did}>
@@ -77,15 +90,9 @@ function InnerApp() {
                     <LoggedOutViewProvider>
                       <SelectedFeedProvider>
                         <UnreadNotifsProvider>
-                      <ThemeProvider theme={theme}>
-                        {/* All components should be within this provider */}
-                        <RootSiblingParent>
                           <SafeAreaProvider>
                             <Shell />
                           </SafeAreaProvider>
-                        </RootSiblingParent>
-                        <ToastContainer />
-                      </ThemeProvider>
                         </UnreadNotifsProvider>
                       </SelectedFeedProvider>
                     </LoggedOutViewProvider>
@@ -94,6 +101,9 @@ function InnerApp() {
               </StatsigProvider>
             </QueryProvider>
           </React.Fragment>
+          <ToastContainer />
+        </RootSiblingParent>
+      </ThemeProvider>
     </Alf>
   )
 }

src/lib/hooks/useAccountSwitcher.ts

@@ -41,9 +41,7 @@ export function useAccountSwitcher() {
           }
           await initSession(account)
           logEvent('account:loggedIn', {logContext, withPassword: false})
-          setTimeout(() => {
           Toast.show(_(msg`Signed in as @${account.handle}`))
-          }, 100)
         } else {
           requestSwitchToAccount({requestedAccount: account.did})
           Toast.show(
@@ -56,9 +54,6 @@ export function useAccountSwitcher() {
           message: e.message,
         })
         clearCurrentAccount() // back user out to login
-        setTimeout(() => {
-          Toast.show(_(msg`Sorry! We need you to enter your password.`))
-        }, 100)
       } finally {
         setPendingDid(null)
       }

src/screens/Login/ChooseAccountForm.tsx

@@ -52,9 +52,7 @@ export const ChooseAccountForm = ({
               withPassword: false,
             })
             track('Sign In', {resumedSession: true})
-            setTimeout(() => {
             Toast.show(_(msg`Signed in as @${account.handle}`))
-            }, 100)
           } catch (e: any) {
             logger.error('choose account: initSession failed', {
               message: e.message,