fix recovery key dialog

apps/mobile/src/components/RecoveryKeyDialog/index.js

@@ -4,15 +4,20 @@ import QRCode from 'react-native-qrcode-svg';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import RNFetchBlob from 'rn-fetch-blob';
 import {LOGO_BASE64} from '../../assets/images/assets';
-import {eSubscribeEvent, eUnSubscribeEvent, ToastEvent} from '../../services/EventManager';
+import {
+  eSubscribeEvent,
+  eUnSubscribeEvent,
+  ToastEvent,
+} from '../../services/EventManager';
 import {eOpenRecoveryKeyDialog} from '../../utils/Events';
 import {dWidth} from '../../utils';
 import ActionSheet from '../ActionSheet';
 import {Button} from '../Button';
 import Seperator from '../Seperator';
 import {Toast} from '../Toast';
-import {SIZE, WEIGHT} from "../../utils/SizeUtils";
-import {db} from "../../utils/DB";
+import {SIZE, WEIGHT} from '../../utils/SizeUtils';
+import {db} from '../../utils/DB';
+import Storage from '../../utils/storage';
 class RecoveryKeyDialog extends React.Component {
   constructor(props) {
     super(props);
@@ -21,6 +26,7 @@ class RecoveryKeyDialog extends React.Component {
     };
     this.actionSheetRef = createRef();
     this.svg = createRef();
+    this.user;
   }
 
   open = () => {
@@ -32,45 +38,32 @@ class RecoveryKeyDialog extends React.Component {
   };
   async componentDidMount() {
     eSubscribeEvent(eOpenRecoveryKeyDialog, this.open);
-    let k = await db.user.key();
-    
-    if (k) {
-      this.setState({
-        key: k.key,
-      });
-    }
   }
 
   async componentWillUnmount() {
     eUnSubscribeEvent(eOpenRecoveryKeyDialog, this.open);
   }
 
-  componentDidUpdate() {}
+  saveQRCODE = async () => {
+    if ((await Storage.requestPermission()) === false) {
+      ToastEvent.show('Storage access not granted!', 'error', 'local');
+      return;
+    }
 
-  saveQRCODE = () => {
-    this.svg.current?.toDataURL((data) => {
-      RNFetchBlob.fs
-        .writeFile(
-          RNFetchBlob.fs.dirs.SDCardDir +
-            '/Notesnook/nn_recovery_key_qrcode.png',
-          data,
-          'base64',
-        )
-        .then((res) => {
+    this.svg.current?.toDataURL(async (data) => {
+      let path = await Storage.checkAndCreateDir('/');
+      let fileName = 'nn_' + this.user.username + '_recovery_key_qrcode.png';
+      RNFetchBlob.fs.writeFile(path + fileName, data, 'base64').then((res) => {
         RNFetchBlob.fs
           .scanFile([
             {
-                path:
-                  RNFetchBlob.fs.dirs.SDCardDir +
-                  '/Notesnook/nn_recovery_key_qrcode.png',
+              path: path + fileName,
               mime: 'image/png',
             },
           ])
           .then((r) => {
             ToastEvent.show(
-                'Recovery key saved to Gallery as ' +
-                  RNFetchBlob.fs.dirs.SDCardDir +
-                  '/Notesnook/nn_recovery_key_qrcode.png',
+              'Recovery key saved to Gallery as ' + path + fileName,
               'success',
               'local',
             );
@@ -79,6 +72,37 @@ class RecoveryKeyDialog extends React.Component {
     });
   };
 
+  saveToTextFile = async () => {
+    if ((await Storage.requestPermission()) === false) {
+      ToastEvent.show('Storage access not granted!', 'error', 'local');
+      return;
+    }
+    let path = await Storage.checkAndCreateDir('/');
+    let fileName = 'nn_' + this.user.username + '_recovery_key.txt';
+
+    RNFetchBlob.fs
+      .writeFile(path + fileName, this.state.key, 'utf8')
+      .then((r) => {
+        ToastEvent.show(
+          'Recovery key saved as ' + path + fileName,
+          'success',
+          'local',
+        );
+      })
+      .catch((e) => {});
+  };
+
+  onOpen = async () => {
+    let k = await db.user.key();
+    this.user = await db.user.get();
+    console.log(k);
+    if (k) {
+      this.setState({
+        key: k.key,
+      });
+    }
+  };
+
   render() {
     const {colors} = this.props;
     return (
@@ -89,6 +113,7 @@ class RecoveryKeyDialog extends React.Component {
           alignSelf: 'center',
           borderRadius: 10,
         }}
+        onOpen={this.onOpen}
         ref={this.actionSheetRef}
         initialOffsetFromBottom={1}>
         <View
@@ -169,14 +194,7 @@ class RecoveryKeyDialog extends React.Component {
               />
               <Seperator />
               <Button
-                onPress={() => {
-                  RNFetchBlob.fs.writeFile(
-                    RNFetchBlob.fs.dirs.SDCardDir +
-                      '/Notesnook/nn_recovery_key.txt',
-                    this.state.key,
-                    'utf8',
-                  );
-                }}
+                onPress={this.saveToTextFile}
                 title="Save as Text File"
                 width="100%"
                 height={40}
@@ -185,7 +203,7 @@ class RecoveryKeyDialog extends React.Component {
               <Button
                 onPress={() => {
                   Clipboard.setString(this.state.key);
-                  ToastEvent.show('Recovery key copied');
+                  ToastEvent.show('Copied!', 'success', 'local');
                 }}
                 title="Copy Key"
                 width="100%"