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
bluesky-social · May 3, 2024 · 85b3441 · 85b3441
1 parent aeed478
commit 85b3441
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 62 deletions.
diff --git a/src/App.native.tsx b/src/App.native.tsx
@@ -89,38 +89,37 @@ function InnerApp() {
   return (
     <SafeAreaProvider initialMetrics={initialWindowMetrics}>
       <Alf theme={theme}>
-        <Splash isReady={isReady}>
-          <React.Fragment
-            // Resets the entire tree below when it changes:
-            key={currentAccount?.did}>
-            <QueryProvider currentDid={currentAccount?.did}>
-              <PushNotificationsListener>
-                <StatsigProvider>
-                  {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
-                  <LabelDefsProvider>
-                    <ModerationOptsProvider>
-                      <LoggedOutViewProvider>
-                        <SelectedFeedProvider>
-                          <UnreadNotifsProvider>
-                            <ThemeProvider theme={theme}>
-                              {/* All components should be within this provider */}
-                              <RootSiblingParent>
+        <ThemeProvider theme={theme}>
+          <Splash isReady={isReady}>
+            <RootSiblingParent>
+              <React.Fragment
+                // Resets the entire tree below when it changes:
+                key={currentAccount?.did}>
+                <QueryProvider currentDid={currentAccount?.did}>
+                  <PushNotificationsListener>
+                    <StatsigProvider>
+                      {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
+                      <LabelDefsProvider>
+                        <ModerationOptsProvider>
+                          <LoggedOutViewProvider>
+                            <SelectedFeedProvider>
+                              <UnreadNotifsProvider>
                                 <GestureHandlerRootView style={s.h100pct}>
                                   <TestCtrls />
                                   <Shell />
                                 </GestureHandlerRootView>
-                              </RootSiblingParent>
-                            </ThemeProvider>
-                          </UnreadNotifsProvider>
-                        </SelectedFeedProvider>
-                      </LoggedOutViewProvider>
-                    </ModerationOptsProvider>
-                  </LabelDefsProvider>
-                </StatsigProvider>
-              </PushNotificationsListener>
-            </QueryProvider>
-          </React.Fragment>
-        </Splash>
+                              </UnreadNotifsProvider>
+                            </SelectedFeedProvider>
+                          </LoggedOutViewProvider>
+                        </ModerationOptsProvider>
+                      </LabelDefsProvider>
+                    </StatsigProvider>
+                  </PushNotificationsListener>
+                </QueryProvider>
+              </React.Fragment>
+            </RootSiblingParent>
+          </Splash>
+        </ThemeProvider>
       </Alf>
     </SafeAreaProvider>
   )

diff --git a/src/App.web.tsx b/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,39 +66,44 @@ 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}>
-      <React.Fragment
-        // Resets the entire tree below when it changes:
-        key={currentAccount?.did}>
-        <QueryProvider currentDid={currentAccount?.did}>
-          <StatsigProvider>
-            {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
-            <LabelDefsProvider>
-              <ModerationOptsProvider>
-                <LoggedOutViewProvider>
-                  <SelectedFeedProvider>
-                    <UnreadNotifsProvider>
-                      <ThemeProvider theme={theme}>
-                        {/* All components should be within this provider */}
-                        <RootSiblingParent>
+      <ThemeProvider theme={theme}>
+        <RootSiblingParent>
+          <React.Fragment
+            // Resets the entire tree below when it changes:
+            key={currentAccount?.did}>
+            <QueryProvider currentDid={currentAccount?.did}>
+              <StatsigProvider>
+                {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
+                <LabelDefsProvider>
+                  <ModerationOptsProvider>
+                    <LoggedOutViewProvider>
+                      <SelectedFeedProvider>
+                        <UnreadNotifsProvider>
                           <SafeAreaProvider>
                             <Shell />
                           </SafeAreaProvider>
-                        </RootSiblingParent>
-                        <ToastContainer />
-                      </ThemeProvider>
-                    </UnreadNotifsProvider>
-                  </SelectedFeedProvider>
-                </LoggedOutViewProvider>
-              </ModerationOptsProvider>
-            </LabelDefsProvider>
-          </StatsigProvider>
-        </QueryProvider>
-      </React.Fragment>
+                        </UnreadNotifsProvider>
+                      </SelectedFeedProvider>
+                    </LoggedOutViewProvider>
+                  </ModerationOptsProvider>
+                </LabelDefsProvider>
+              </StatsigProvider>
+            </QueryProvider>
+          </React.Fragment>
+          <ToastContainer />
+        </RootSiblingParent>
+      </ThemeProvider>
     </Alf>
   )
 }

diff --git a/src/lib/hooks/useAccountSwitcher.ts b/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)
+          Toast.show(_(msg`Signed in as @${account.handle}`))
         } 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)
       }

diff --git a/src/screens/Login/ChooseAccountForm.tsx b/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)
+            Toast.show(_(msg`Signed in as @${account.handle}`))
           } catch (e: any) {
             logger.error('choose account: initSession failed', {
               message: e.message,