ability to import and exprt data

app.json

@@ -19,7 +19,7 @@
       "userInterfaceStyle": "automatic"
     },
     "android": {
-      "permissions":["READ_EXTERNAL_STORAGE", "WRITE_EXTERNAL_STORAGE"],
+      "permissions":["READ_EXTERNAL_STORAGE", "WRITE_EXTERNAL_STORAGE", "INTERNET"],
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"

package-lock.json

@@ -15,6 +15,8 @@
         "@rneui/themed": "^4.0.0-rc.7",
         "@types/react-native": "^0.72.1",
         "expo": "~48.0.15",
+        "expo-file-system": "^15.2.2",
+        "expo-media-library": "^15.2.3",
         "expo-status-bar": "~1.4.4",
         "react": "18.2.0",
         "react-native": "0.71.8",
@@ -6049,7 +6051,6 @@
       "version": "15.2.2",
       "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-15.2.2.tgz",
       "integrity": "sha512-LFkOLcWwlmnjkURxZ3/0ukS35OswX8iuQknLHRHeyk8mUA8fpRPPelD/a1lS+yclqfqavMJmTXVKM1Nsq5XVMA==",
-      "license": "MIT",
       "dependencies": {
         "uuid": "^3.4.0"
       },
@@ -6087,6 +6088,14 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-media-library": {
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/expo-media-library/-/expo-media-library-15.2.3.tgz",
+      "integrity": "sha512-Oz8b8Xsvfj7YcutUBtI84NUIqSnt7iCM5HZ5DyKoWKKiDK/+aUuj3RXNQELG8jUw6pQPgEwgbZ1+J8SdH/y9jw==",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-modules-autolinking": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.2.0.tgz",

package.json

@@ -16,6 +16,8 @@
     "@rneui/themed": "^4.0.0-rc.7",
     "@types/react-native": "^0.72.1",
     "expo": "~48.0.15",
+    "expo-file-system": "^15.2.2",
+    "expo-media-library": "^15.2.3",
     "expo-status-bar": "~1.4.4",
     "react": "18.2.0",
     "react-native": "0.71.8",

routes/Settings.tsx

@@ -1,11 +1,16 @@
-import { StyleSheet, Text, View, Modal} from 'react-native';
+import { StyleSheet, Text, View, Modal, Alert} from 'react-native';
 import Button from '../components/Button';
 import { useState, useEffect } from 'react';
 import DropDownPicker from 'react-native-dropdown-picker';
 import db from '../lib/client';
+import { Platform } from 'react-native';
+import * as MediaLibrary from 'expo-media-library';
+import * as FileSystem from 'expo-file-system';
+const { StorageAccessFramework } = FileSystem;
 
 
-export default function Settings({theme, changeTheme, themeMode, clearAll}:any){
+
+export default function Settings({theme, changeTheme, themeMode, clearAll, resyncData}:any){
     const [open, setOpen] = useState(false);
     const [value, setValue] = useState(themeMode);
     const [items, setItems] = useState([
@@ -19,13 +24,47 @@ export default function Settings({theme, changeTheme, themeMode, clearAll}:any){
 
     const st = style(theme);
 
-    const test = async () => {
+    const handleExport = async () => {
-        //const res = await db.from('test').insert({test: 'test'});
+        const dataToExport = await db.fileExport()
-        const res2 = await db.from('test').update({row: 'updated again'}).eq({'id': 1});
+        const data = JSON.stringify(dataToExport);
-        console.log(res2);
+        // export dataToExport in json format to a file using react-native-fs
-        //const data = await AsyncStorage.getItem('test');
+        if (Platform.OS === 'android') {
-        const data = await db.from('test').select().eq();
+            const permissions = await StorageAccessFramework.requestDirectoryPermissionsAsync();
-        //console.log(data);
+            if (permissions.granted) {
+                // Gets SAF URI from response
+                const uri = permissions.directoryUri;
+                // Writes file to SAF URI
+                await StorageAccessFramework.createFileAsync(uri, 'tali', 'application/json').then(async (fileUri) => {
+                    await  StorageAccessFramework.writeAsStringAsync(fileUri, data, { encoding: FileSystem.EncodingType.UTF8 }).catch((err) => console.log(err))
+                })
+            }
+        }
+    };
+
+    const handleImport = async () => {
+        StorageAccessFramework.requestDirectoryPermissionsAsync().then(async (permissions) => {
+            if (permissions.granted) {
+                const uri = permissions.directoryUri;
+                const fileUri = await StorageAccessFramework.readDirectoryAsync(uri).then((res) => {
+                    for (let i = 0; i < res.length; i++) {
+                        if (res[i].endsWith('tali.json')) {
+                            return res[i];
+                        }
+                    }
+                })
+                if (fileUri) {
+                    const data = await StorageAccessFramework.readAsStringAsync(fileUri).then((res) => res);
+                    const dataToImport = JSON.parse(data);
+                    const res = await db.fileImport(dataToImport);
+                    if (res) {
+                        resyncData();
+                    } else {
+                        Alert.alert('Error importing data', 'File seems to be corrupted');
+                        clearAll();
+                    }
+                }
+            }
+        })
     }
 
 
@@ -33,7 +72,7 @@ export default function Settings({theme, changeTheme, themeMode, clearAll}:any){
 
 
     return (
-        <View style={style(theme).container}>
+        <View style={st.container}>
             <Modal
                 animationType="slide"
                 transparent={true}
@@ -51,8 +90,8 @@ export default function Settings({theme, changeTheme, themeMode, clearAll}:any){
                     </View>
                 </View>
             </Modal>
-            <View style={style(theme).row}>
+            <View style={st.row}>
-                <Text style={style(theme).droptext}>Choose Theme: </Text>
+                <Text style={st.droptext}>Choose Theme: </Text>
                 <DropDownPicker
                     open={open}
                     value={value}
@@ -60,12 +99,17 @@ export default function Settings({theme, changeTheme, themeMode, clearAll}:any){
                     setOpen={setOpen}
                     setValue={setValue}
                     setItems={setItems}
-                    style={style(theme).dropdown}
+                    style={st.dropdown}
                     theme={theme.dropDown}
                 />
             </View>
-            <Button title="clear all" theme={theme} onPress={()=>setDeleteAllModal(true)}/>
+            <View style={{...st.row, zIndex:0}}>
-            <Button title="test" theme={theme} onPress={test}/>
+                <Button theme={theme} title="Export Data" onPress={handleExport} style={{padding:30, flex:1}}/>
+                <Button theme={theme} title="Import Data" onPress={handleImport} style={{padding:30, flex:1}}/>
+            </View>
+            <View style={{...st.row, zIndex:0}}>
+                <Button theme={theme} title="Delete All Data" onPress={() => setDeleteAllModal(true)} style={{width:'100%'}}/>
+            </View>
         </View>
     )
 }
@@ -93,6 +137,7 @@ const style = (theme:any) => {
         row: {
             flexDirection: 'row',
             zIndex: 100,
+            margin: 20,
         },
         centeredView: {
             flex: 1,

yarn.lock

@@ -3355,7 +3355,7 @@ expo-constants@~14.2.0, expo-constants@~14.2.1:
     "@expo/config" "~8.0.0"
     uuid "^3.3.2"
 
-expo-file-system@~15.2.0, expo-file-system@~15.2.2:
+expo-file-system@^15.2.2, expo-file-system@~15.2.0, expo-file-system@~15.2.2:
   version "15.2.2"
   resolved "https://registry.npmjs.org/expo-file-system/-/expo-file-system-15.2.2.tgz"
   integrity sha512-LFkOLcWwlmnjkURxZ3/0ukS35OswX8iuQknLHRHeyk8mUA8fpRPPelD/a1lS+yclqfqavMJmTXVKM1Nsq5XVMA==
@@ -3374,6 +3374,11 @@ expo-keep-awake@~12.0.1:
   resolved "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-12.0.1.tgz"
   integrity sha512-hqeCnb4033TyuZaXs93zTK7rjVJ3bywXATyMmKmKkLEsH2PKBAl/VmjlCOPQL/2Ncqz6aj7Wo//tjeJTARBD4g==
 
+expo-media-library@^15.2.3:
+  version "15.2.3"
+  resolved "https://registry.npmjs.org/expo-media-library/-/expo-media-library-15.2.3.tgz"
+  integrity sha512-Oz8b8Xsvfj7YcutUBtI84NUIqSnt7iCM5HZ5DyKoWKKiDK/+aUuj3RXNQELG8jUw6pQPgEwgbZ1+J8SdH/y9jw==
+
 expo-modules-autolinking@>=0.8.1, expo-modules-autolinking@1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.2.0.tgz"