Update Storage URI settings

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

src/constants.ts

@@ -0,0 +1,8 @@
+const packageName = 'com.terminallyonline';
+const appName = 'Terminally Online';
+const escapedAppName = appName.replaceAll(' ', '%20');
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noOp = () => {};
+
+export { packageName, appName, escapedAppName, noOp };

src/contexts/settings.tsx

@@ -1,8 +1,14 @@
 import React, { createContext, useContext, useState, useEffect } from 'react';
 import { Settings } from '../types';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { DocumentDirectoryPath } from 'react-native-fs';
 import { LoadingView } from '../components';
+import WelcomeScreen from '../screens/welcome';
+import { FileSystem } from 'react-native-file-access';
+import {
+  getPersistedUriPermissions,
+  openDocumentTree,
+  releasePersistableUriPermission,
+} from 'react-native-scoped-storage';
 
 interface SettingsContextType {
   settings: Settings;
@@ -17,28 +23,44 @@ const SettingsProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   const [settings, setSettings] = useState<Settings>({
-    useInternalStorage: true,
     storageUri: '',
-    addNoMedia: false,
   });
   const [hasLoaded, setHasLoaded] = useState(false);
 
+  const updateSettings = (newSettings: Partial<Settings>) => {
+    const updatedSettings = { ...settings, ...newSettings };
+
+    if (settings.storageUri !== updatedSettings.storageUri) {
+      void getPersistedUriPermissions().then(permissions => {
+        if (permissions.includes(settings.storageUri)) {
+          void releasePersistableUriPermission(settings.storageUri);
+        }
+      });
+      void AsyncStorage.setItem('storageUri', updatedSettings.storageUri);
+    }
+
+    setSettings(updatedSettings);
+  };
+
   useEffect(() => {
     const loadSettings = async () => {
-      const useInternalStorageValue = await AsyncStorage.getItem(
-        'useInternalStorage',
-      );
       const storageUriValue = await AsyncStorage.getItem('storageUri');
-      const addNoMediaValue = await AsyncStorage.getItem('addNoMedia');
+      let storageUri = storageUriValue ?? '';
+
+      if (storageUri !== '') {
+        const permissions = await getPersistedUriPermissions();
+        if (!permissions.includes(storageUri)) {
+          storageUri = '';
+        }
+
+        const exists = await FileSystem.exists(storageUri);
+        if (!exists) {
+          storageUri = '';
+        }
+      }
 
       setSettings({
-        useInternalStorage: useInternalStorageValue
-          ? (JSON.parse(useInternalStorageValue) as boolean)
-          : true,
-        storageUri: storageUriValue ?? DocumentDirectoryPath,
-        addNoMedia: addNoMediaValue
-          ? (JSON.parse(addNoMediaValue) as boolean)
-          : false,
+        storageUri,
       });
 
       setHasLoaded(true);
@@ -47,25 +69,23 @@ const SettingsProvider: React.FC<{ children: React.ReactNode }> = ({
     void loadSettings();
   }, []);
 
-  const updateSettings = (newSettings: Partial<Settings>) => {
-    const updatedSettings = { ...settings, ...newSettings };
-
-    void AsyncStorage.setItem(
-      'useInternalStorage',
-      JSON.stringify(updatedSettings.useInternalStorage),
-    );
-    void AsyncStorage.setItem('storageUri', updatedSettings.storageUri);
-    void AsyncStorage.setItem(
-      'addNoMedia',
-      JSON.stringify(updatedSettings.addNoMedia),
-    );
-
-    setSettings(updatedSettings);
-  };
-
   return (
     <SettingsContext.Provider value={{ settings, setSettings: updateSettings }}>
-      {hasLoaded ? children : <LoadingView />}
+      {hasLoaded ? (
+        settings.storageUri === '' ? (
+          <WelcomeScreen
+            selectStorageLocation={() => {
+              void openDocumentTree().then(uri => {
+                updateSettings({ storageUri: uri.uri });
+              });
+            }}
+          />
+        ) : (
+          children
+        )
+      ) : (
+        <LoadingView />
+      )}
     </SettingsContext.Provider>
   );
 };

src/screens/home.tsx

@@ -4,7 +4,7 @@ import { Text } from 'react-native-paper';
 import { PaddedView } from '../components';
 import { useSettings } from '../contexts';
 
-function Home(): JSX.Element {
+const Home = () => {
   const { settings } = useSettings();
 
   return (
@@ -13,6 +13,6 @@ function Home(): JSX.Element {
       <Text>Settings: {JSON.stringify(settings)}</Text>
     </PaddedView>
   );
-}
+};
 
 export default Home;

src/screens/settings.tsx

@@ -1,16 +1,8 @@
 import React, { useState } from 'react';
 import { View } from 'react-native';
-import {
-  Button,
-  Switch,
-  SegmentedButtons,
-  Text,
-  List,
-  Snackbar,
-} from 'react-native-paper';
+import { Button, List, Snackbar } from 'react-native-paper';
 import { useRealm } from '@realm/react';
 import { openDocumentTree } from 'react-native-scoped-storage';
-import { DocumentDirectoryPath } from 'react-native-fs';
 import { PaddedView } from '../components';
 import styles from '../styles';
 import { Meme } from '../database';
@@ -22,48 +14,7 @@ const SettingsScreen = () => {
   const [snackbarVisible, setSnackbarVisible] = useState(false);
   const [snackbarMessage, setSnackbarMessage] = useState('');
 
-  const { settings, setSettings } = useSettings();
-
-  const setUseInternalStorage = (use: boolean) => {
-    if (settings.useInternalStorage === use) {
-      return;
-    }
-
-    if (use) {
-      setSettings({
-        useInternalStorage: use,
-        storageUri: DocumentDirectoryPath,
-      });
-    } else {
-      openDocumentTree(true)
-        .then(uri => {
-          setSettings({
-            useInternalStorage: use,
-            storageUri: uri.uri,
-          });
-        })
-        .catch(() => {
-          setSnackbarMessage('Failed to select storage path!');
-          setSnackbarVisible(true);
-        });
-    }
-  };
-
-  const setStorageUri = (uri: string) => {
-    if (settings.storageUri === uri) {
-      return;
-    }
-
-    setSettings({ storageUri: uri });
-  };
-
-  const setAddNoMedia = (add: boolean) => {
-    if (settings.addNoMedia === add) {
-      return;
-    }
-
-    setSettings({ addNoMedia: add });
-  };
+  const { setSettings } = useSettings();
 
   const realm = useRealm();
 
@@ -105,41 +56,16 @@ const SettingsScreen = () => {
           </List.Section>
           <List.Section>
             <List.Subheader>Media Storage</List.Subheader>
-            <SegmentedButtons
-              style={styles.marginBottom}
-              buttons={[
-                { label: 'Internal', value: 'interneal' },
-                { label: 'External', value: 'external' },
-              ]}
-              value={settings.useInternalStorage ? 'interneal' : 'external'}
-              onValueChange={value =>
-                setUseInternalStorage(value === 'interneal')
-              }
-            />
             <Button
               mode="elevated"
               style={styles.marginBottom}
-              disabled={settings.useInternalStorage}
               onPress={() => {
-                openDocumentTree(true)
-                  .then(uri => {
-                    setStorageUri(uri.uri);
-                  })
-                  .catch(() => {
-                    setSnackbarMessage('Failed to select storage path!');
-                    setSnackbarVisible(true);
-                  });
+                void openDocumentTree().then(uri => {
+                  setSettings({ storageUri: uri.uri });
+                });
               }}>
               Change External Storage Path
             </Button>
-            <View style={styles.spaceBetweenHorizontal}>
-              <Text>Hide media from Gallery</Text>
-              <Switch
-                value={settings.addNoMedia}
-                onValueChange={setAddNoMedia}
-                disabled={settings.useInternalStorage}
-              />
-            </View>
           </List.Section>
         </View>
       </PaddedView>

src/screens/welcome.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Button, Text } from 'react-native-paper';
+import { PaddedView } from '../components';
+import styles from '../styles';
+
+const WelcomeScreen = (properties: { selectStorageLocation: () => void }) => {
+  return (
+    <PaddedView centered>
+      <Text
+        variant="displayMedium"
+        style={[styles.marginBottom, styles.centerText]}>
+        Welcome to Terminally Online!
+      </Text>
+
+      <Button mode="contained" onPress={properties.selectStorageLocation}>
+        Select Storage Location
+      </Button>
+    </PaddedView>
+  );
+};
+
+export default WelcomeScreen;

src/styles.tsx

@@ -9,6 +9,9 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
   },
+  centerText: {
+    textAlign: 'center',
+  },
 });
 
 export default styles;

src/types/settings.ts

@@ -1,7 +1,5 @@
 interface Settings {
-  useInternalStorage: boolean;
   storageUri: string;
-  addNoMedia: boolean;
 }
 
 export default Settings;