1 files changed, 80 insertions, 33 deletions

diff --git a/src/App.native.tsx b/src/App.native.tsx
index f5d35cf74..64c7e718f 100644
--- a/src/App.native.tsx
+++ b/src/App.native.tsx
@@ -5,16 +5,17 @@ import React, {useState, useEffect} from 'react'
 import {RootSiblingParent} from 'react-native-root-siblings'
 import * as SplashScreen from 'expo-splash-screen'
 import {GestureHandlerRootView} from 'react-native-gesture-handler'
-import {observer} from 'mobx-react-lite'
 import {QueryClientProvider} from '@tanstack/react-query'
+import {enableFreeze} from 'react-native-screens'
 
 import 'view/icons'
 
 import {init as initPersistedState} from '#/state/persisted'
+import {init as initReminders} from '#/state/shell/reminders'
+import {listenSessionDropped} from './state/events'
 import {useColorMode} from 'state/shell'
 import {ThemeProvider} from 'lib/ThemeContext'
 import {s} from 'lib/styles'
-import {RootStoreModel, setupState, RootStoreProvider} from './state'
 import {Shell} from 'view/shell'
 import * as notifications from 'lib/notifications/notifications'
 import * as analytics from 'lib/analytics/analytics'
@@ -22,48 +23,74 @@ import * as Toast from 'view/com/util/Toast'
 import {queryClient} from 'lib/react-query'
 import {TestCtrls} from 'view/com/testing/TestCtrls'
 import {Provider as ShellStateProvider} from 'state/shell'
+import {Provider as ModalStateProvider} from 'state/modals'
+import {Provider as LightboxStateProvider} from 'state/lightbox'
+import {Provider as MutedThreadsProvider} from 'state/muted-threads'
+import {Provider as InvitesStateProvider} from 'state/invites'
+import {Provider as PrefsStateProvider} from 'state/preferences'
+import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out'
+import I18nProvider from './locale/i18nProvider'
+import {
+  Provider as SessionProvider,
+  useSession,
+  useSessionApi,
+} from 'state/session'
+import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread'
+import * as persisted from '#/state/persisted'
 
+enableFreeze(true)
 SplashScreen.preventAutoHideAsync()
 
-const InnerApp = observer(function AppImpl() {
+function InnerApp() {
   const colorMode = useColorMode()
-  const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
-    undefined,
-  )
+  const {isInitialLoad, currentAccount} = useSession()
+  const {resumeSession} = useSessionApi()
 
   // init
   useEffect(() => {
-    setupState().then(store => {
-      setRootStore(store)
-      analytics.init(store)
-      notifications.init(store)
-      store.onSessionDropped(() => {
-        Toast.show('Sorry! Your session expired. Please log in again.')
-      })
+    initReminders()
+    analytics.init()
+    notifications.init(queryClient)
+    listenSessionDropped(() => {
+      Toast.show('Sorry! Your session expired. Please log in again.')
     })
-  }, [])
+
+    const account = persisted.get('session').currentAccount
+    resumeSession(account)
+  }, [resumeSession])
 
   // show nothing prior to init
-  if (!rootStore) {
+  if (isInitialLoad) {
+    // TODO add a loading state
     return null
   }
+
+  /*
+   * Session and initial state should be loaded prior to rendering below.
+   */
+
   return (
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider theme={colorMode}>
-        <RootSiblingParent>
-          <analytics.Provider>
-            <RootStoreProvider value={rootStore}>
-              <GestureHandlerRootView style={s.h100pct}>
-                <TestCtrls />
-                <Shell />
-              </GestureHandlerRootView>
-            </RootStoreProvider>
-          </analytics.Provider>
-        </RootSiblingParent>
-      </ThemeProvider>
-    </QueryClientProvider>
+    <React.Fragment
+      // Resets the entire tree below when it changes:
+      key={currentAccount?.did}>
+      <LoggedOutViewProvider>
+        <UnreadNotifsProvider>
+          <ThemeProvider theme={colorMode}>
+            <analytics.Provider>
+              {/* All components should be within this provider */}
+              <RootSiblingParent>
+                <GestureHandlerRootView style={s.h100pct}>
+                  <TestCtrls />
+                  <Shell />
+                </GestureHandlerRootView>
+              </RootSiblingParent>
+            </analytics.Provider>
+          </ThemeProvider>
+        </UnreadNotifsProvider>
+      </LoggedOutViewProvider>
+    </React.Fragment>
   )
-})
+}
 
 function App() {
   const [isReady, setReady] = useState(false)
@@ -76,10 +103,30 @@ function App() {
     return null
   }
 
+  /*
+   * NOTE: only nothing here can depend on other data or session state, since
+   * that is set up in the InnerApp component above.
+   */
   return (
-    <ShellStateProvider>
-      <InnerApp />
-    </ShellStateProvider>
+    <QueryClientProvider client={queryClient}>
+      <SessionProvider>
+        <ShellStateProvider>
+          <PrefsStateProvider>
+            <MutedThreadsProvider>
+              <InvitesStateProvider>
+                <ModalStateProvider>
+                  <LightboxStateProvider>
+                    <I18nProvider>
+                      <InnerApp />
+                    </I18nProvider>
+                  </LightboxStateProvider>
+                </ModalStateProvider>
+              </InvitesStateProvider>
+            </MutedThreadsProvider>
+          </PrefsStateProvider>
+        </ShellStateProvider>
+      </SessionProvider>
+    </QueryClientProvider>
   )
 }