Clean up welcome screen logic

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

src/app.tsx

@@ -5,15 +5,13 @@ 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 { store, persistor, updateStorageUri, validateSettings } from './state';
+import { store, persistor, validateSettings } from './state';
 import { LoadingView } from './components';
 import { Welcome } from './screens';
-import { noOp } from './utilities';
 
 const App = () => {
   const [showWelcome, setShowWelcome] = useState(false);
@@ -32,7 +30,6 @@ const App = () => {
   useEffect(() => {
     const subscription = AppState.addEventListener('change', async state => {
       if (state !== 'active') return;
-
       await store.dispatch(validateSettings());
       const { settings } = store.getState();
       if (!settings.storageUri) {
@@ -55,18 +52,7 @@ const App = () => {
                 barStyle={isDarkMode ? 'light-content' : 'dark-content'}
                 backgroundColor={theme.colors.background}
               />
-              {showWelcome ? (
+              {showWelcome ? <Welcome /> : <NavigationContainer />}
-                <Welcome
-                  selectStorageLocation={async () => {
-                    const uri = await openDocumentTree(true).catch(noOp);
-                    if (!uri) return;
-                    await store.dispatch(updateStorageUri(uri.uri));
-                    setShowWelcome(false);
-                  }}
-                />
-              ) : (
-                <NavigationContainer />
-              )}
             </SafeAreaProvider>
           </RealmProvider>
         </PersistGate>

src/screens/welcome.tsx

@@ -1,11 +1,21 @@
 import React from 'react';
 import { Button, Text } from 'react-native-paper';
+import { useDispatch } from 'react-redux';
+import { openDocumentTree } from 'react-native-scoped-storage';
 import { PaddedView } from '../components';
 import styles from '../styles';
+import { noOp } from '../utilities';
+import { updateStorageUri } from '../state';
+
+const Welcome = () => {
+  const dispatch = useDispatch();
+
+  const selectStorageLocation = async () => {
+    const uri = await openDocumentTree(true).catch(noOp);
+    if (!uri) return;
+    await dispatch(updateStorageUri(uri.uri));
+  };
 
-const Welcome = (properties: {
-  selectStorageLocation: () => Promise<void>;
-}) => {
   return (
     <PaddedView centered>
       <Text
@@ -15,7 +25,7 @@ const Welcome = (properties: {
       </Text>
       <Button
         mode="contained"
-        onPress={properties.selectStorageLocation}
+        onPress={selectStorageLocation}
         style={styles.extremeMarginBottom}>
         Select Storage Location
       </Button>