Add persistent state provider (#1830)

* Add persistent state provider

* Catch write error

* Handle read errors, update error msgs

* Fix lint

* Don't provide initial state to loader

* Remove colorMode from shell state

* Idea: hook into persisted context from other files

* Migrate settings to new hook

* Rework persisted state to split individual contexts

* Tweak persisted schema and validation

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

1 files changed, 35 insertions, 16 deletions

diff --git a/src/App.web.tsx b/src/App.web.tsx
index 6bbc2065d..adad9ddb6 100644
--- a/src/App.web.tsx
+++ b/src/App.web.tsx
@@ -8,6 +8,8 @@ import {RootSiblingParent} from 'react-native-root-siblings'
 
 import 'view/icons'
 
+import {init as initPersistedState} from '#/state/persisted'
+import {useColorMode} from 'state/shell'
 import * as analytics from 'lib/analytics/analytics'
 import {RootStoreModel, setupState, RootStoreProvider} from './state'
 import {Shell} from 'view/shell/index'
@@ -16,7 +18,8 @@ import {ThemeProvider} from 'lib/ThemeContext'
 import {queryClient} from 'lib/react-query'
 import {Provider as ShellStateProvider} from 'state/shell'
 
-const App = observer(function AppImpl() {
+const InnerApp = observer(function AppImpl() {
+  const colorMode = useColorMode()
   const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
     undefined,
   )
@@ -35,23 +38,39 @@ const App = observer(function AppImpl() {
   }
 
   return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={colorMode}>
+        <RootSiblingParent>
+          <analytics.Provider>
+            <RootStoreProvider value={rootStore}>
+              <SafeAreaProvider>
+                <Shell />
+              </SafeAreaProvider>
+              <ToastContainer />
+            </RootStoreProvider>
+          </analytics.Provider>
+        </RootSiblingParent>
+      </ThemeProvider>
+    </QueryClientProvider>
+  )
+})
+
+function App() {
+  const [isReady, setReady] = useState(false)
+
+  React.useEffect(() => {
+    initPersistedState().then(() => setReady(true))
+  }, [])
+
+  if (!isReady) {
+    return null
+  }
+
+  return (
     <ShellStateProvider>
-      <QueryClientProvider client={queryClient}>
-        <ThemeProvider theme={rootStore.shell.colorMode}>
-          <RootSiblingParent>
-            <analytics.Provider>
-              <RootStoreProvider value={rootStore}>
-                <SafeAreaProvider>
-                  <Shell />
-                </SafeAreaProvider>
-                <ToastContainer />
-              </RootStoreProvider>
-            </analytics.Provider>
-          </RootSiblingParent>
-        </ThemeProvider>
-      </QueryClientProvider>
+      <InnerApp />
     </ShellStateProvider>
   )
-})
+}
 
 export default App