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
zio/stable
dan 2024-05-03 16:36:58 +01:00 committed by GitHub
parent aeed4786db
commit 85b34418ef
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 64 additions and 62 deletions

View File

@ -89,38 +89,37 @@ function InnerApp() {
return ( return (
<SafeAreaProvider initialMetrics={initialWindowMetrics}> <SafeAreaProvider initialMetrics={initialWindowMetrics}>
<Alf theme={theme}> <Alf theme={theme}>
<Splash isReady={isReady}> <ThemeProvider theme={theme}>
<React.Fragment <Splash isReady={isReady}>
// Resets the entire tree below when it changes: <RootSiblingParent>
key={currentAccount?.did}> <React.Fragment
<QueryProvider currentDid={currentAccount?.did}> // Resets the entire tree below when it changes:
<PushNotificationsListener> key={currentAccount?.did}>
<StatsigProvider> <QueryProvider currentDid={currentAccount?.did}>
{/* LabelDefsProvider MUST come before ModerationOptsProvider */} <PushNotificationsListener>
<LabelDefsProvider> <StatsigProvider>
<ModerationOptsProvider> {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
<LoggedOutViewProvider> <LabelDefsProvider>
<SelectedFeedProvider> <ModerationOptsProvider>
<UnreadNotifsProvider> <LoggedOutViewProvider>
<ThemeProvider theme={theme}> <SelectedFeedProvider>
{/* All components should be within this provider */} <UnreadNotifsProvider>
<RootSiblingParent>
<GestureHandlerRootView style={s.h100pct}> <GestureHandlerRootView style={s.h100pct}>
<TestCtrls /> <TestCtrls />
<Shell /> <Shell />
</GestureHandlerRootView> </GestureHandlerRootView>
</RootSiblingParent> </UnreadNotifsProvider>
</ThemeProvider> </SelectedFeedProvider>
</UnreadNotifsProvider> </LoggedOutViewProvider>
</SelectedFeedProvider> </ModerationOptsProvider>
</LoggedOutViewProvider> </LabelDefsProvider>
</ModerationOptsProvider> </StatsigProvider>
</LabelDefsProvider> </PushNotificationsListener>
</StatsigProvider> </QueryProvider>
</PushNotificationsListener> </React.Fragment>
</QueryProvider> </RootSiblingParent>
</React.Fragment> </Splash>
</Splash> </ThemeProvider>
</Alf> </Alf>
</SafeAreaProvider> </SafeAreaProvider>
) )

View File

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

View File

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

View File

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