Refactor to use Redux

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

src/app.tsx

@@ -1,32 +1,77 @@
-import React from 'react';
-import { StatusBar, useColorScheme } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { AppState, StatusBar, useColorScheme } from 'react-native';
 import { PaperProvider } from 'react-native-paper';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { RealmProvider } from '@realm/react';
+import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+import { openDocumentTree } from 'react-native-scoped-storage';
+import type {} from 'redux-thunk/extend-redux';
 import { lightTheme, darkTheme } from './theme';
 import { Meme, Tag } from './database';
 import NavigationContainer from './navigation';
-import { SettingsProvider } from './contexts';
+import { store, persistor, updateStorageUri, validateSettings } from './redux';
+import { LoadingView } from './components';
+import { Welcome } from './screens';
+import { noOp } from './constants';
 
 const App = () => {
+  const [showWelcome, setShowWelcome] = useState(false);
   const colorScheme = useColorScheme();
   const isDarkMode = colorScheme === 'dark';
   const theme = isDarkMode ? darkTheme : lightTheme;
 
+  const onBeforeLift = async () => {
+    await store.dispatch(validateSettings());
+    const { settings } = store.getState();
+    if (!settings.storageUri) {
+      setShowWelcome(true);
+    }
+  };
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', async state => {
+      if (state !== 'active') return;
+
+      await store.dispatch(validateSettings());
+      const { settings } = store.getState();
+      if (!settings.storageUri) {
+        setShowWelcome(true);
+      }
+    });
+    return () => subscription.remove();
+  }, []);
+
   return (
-    <RealmProvider schema={[Meme, Tag]}>
-      <PaperProvider theme={theme}>
-        <SettingsProvider>
-          <SafeAreaProvider>
-            <StatusBar
-              barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-              backgroundColor={theme.colors.background}
-            />
-            <NavigationContainer />
-          </SafeAreaProvider>
-        </SettingsProvider>
-      </PaperProvider>
-    </RealmProvider>
+    <Provider store={store}>
+      <PersistGate
+        loading={<LoadingView />}
+        persistor={persistor}
+        onBeforeLift={onBeforeLift}>
+        <RealmProvider schema={[Meme, Tag]}>
+          <PaperProvider theme={theme}>
+            <SafeAreaProvider>
+              <StatusBar
+                barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+                backgroundColor={theme.colors.background}
+              />
+              {showWelcome ? (
+                <Welcome
+                  selectStorageLocation={async () => {
+                    const uri = await openDocumentTree(true).catch(noOp);
+                    if (!uri) return;
+                    await store.dispatch(updateStorageUri(uri.uri));
+                    setShowWelcome(false);
+                  }}
+                />
+              ) : (
+                <NavigationContainer />
+              )}
+            </SafeAreaProvider>
+          </PaperProvider>
+        </RealmProvider>
+      </PersistGate>
+    </Provider>
   );
 };