refactor

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

@@ -1,28 +1,33 @@
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import {
   Keyboard,
-  StyleSheet,
+  StyleSheet, TextInput, TouchableOpacity,
-  TouchableOpacity,
+  View
-  View,
-  TextInput,
-  Platform
 } from 'react-native';
-import {FlatList, ScrollView} from 'react-native-gesture-handler';
+import { FlatList } from 'react-native-gesture-handler';
-import {notesnook} from '../../../e2e/test.ids';
+import { notesnook } from '../../../e2e/test.ids';
-import {useMenuStore} from '../../provider/stores';
+import { useMenuStore } from '../../provider/stores';
-import {DDS} from '../../services/DeviceDetection';
+import { DDS } from '../../services/DeviceDetection';
-import {ToastEvent} from '../../services/EventManager';
+import {
+  eSubscribeEvent,
+  eUnSubscribeEvent,
+  ToastEvent
+} from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
-import {db} from '../../utils/database';
+import { db } from '../../utils/database';
-import {ph, pv, SIZE} from '../../utils/SizeUtils';
+import {
-import {sleep} from '../../utils/TimeUtils';
+  eCloseAddNotebookDialog,
-import {ActionIcon} from '../ActionIcon';
+  eOpenAddNotebookDialog
-import SheetWrapper from '../Sheet';
+} from '../../utils/Events';
-import {Button} from '../Button';
+import { ph, pv, SIZE } from '../../utils/SizeUtils';
+import { sleep } from '../../utils/TimeUtils';
+import { ActionIcon } from '../ActionIcon';
+import { Button } from '../Button';
 import DialogHeader from '../Dialog/dialog-header';
 import Input from '../Input';
 import Seperator from '../Seperator';
-import {Toast} from '../Toast';
+import SheetWrapper from '../Sheet';
+import { Toast } from '../Toast';
 
 let refs = [];
 
@@ -30,6 +35,7 @@ export class AddNotebookDialog extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      notebook: null,
       visible: false,
       topics: [],
       description: null,
@@ -58,26 +64,37 @@ export class AddNotebookDialog extends React.Component {
     this.actionSheetRef = createRef();
   }
 
-  open = () => {
+  componentDidMount() {
-    console.log('opening called');
+    eSubscribeEvent(eOpenAddNotebookDialog, this.open);
+    eSubscribeEvent(eCloseAddNotebookDialog, this.close);
+  }
+
+  componentWillUnmount() {
+    eUnSubscribeEvent(eOpenAddNotebookDialog, this.open);
+    eUnSubscribeEvent(eCloseAddNotebookDialog, this.close);
+  }
+
+  open = notebook => {
     refs = [];
-    let {toEdit} = this.props;
+
-    if (toEdit && toEdit.type === 'notebook') {
+    if (notebook) {
       let topicsList = [];
-      toEdit.topics.forEach((item, index) => {
+      notebook.topics.forEach((item, index) => {
         topicsList.push(item.title);
       });
-      this.id = toEdit.id;
+      this.id = notebook.id;
-      this.title = toEdit.title;
+      this.title = notebook.title;
-      this.description = toEdit.description;
+      this.description = notebook.description;
 
       this.setState({
         topics: [...topicsList],
-        visible: true
+        visible: true,
+        notebook: notebook
       });
     } else {
       this.setState({
-        visible: true
+        visible: true,
+        notebook:null
       });
     }
     sleep(100).then(r => {
@@ -102,7 +119,7 @@ export class AddNotebookDialog extends React.Component {
     let prevTopics = topics;
     refs = [];
     prevTopics.splice(index, 1);
-    let edit = this.props.toEdit;
+    let edit = this.state.notebook;
     if (edit && edit.id) {
       let topicToDelete = edit.topics[index];
 
@@ -128,8 +145,7 @@ export class AddNotebookDialog extends React.Component {
     this.setState({
       loading: true
     });
-    let {topics} = this.state;
+    let {topics, notebook} = this.state;
-    let edit = this.props.toEdit;
 
     if (!this.title || this.title?.trim().length === 0) {
       ToastEvent.show({
@@ -142,12 +158,8 @@ export class AddNotebookDialog extends React.Component {
       });
       return;
     }
-
+    if (notesnook) {
-    let id = edit && edit.id ? edit.id : null;
+      toEdit = db.notebooks.notebook(notebook.id).data;
-
-    let toEdit;
-    if (id) {
-      toEdit = db.notebooks.notebook(edit.id).data;
     }
 
     let prevTopics = [...topics];
@@ -160,7 +172,7 @@ export class AddNotebookDialog extends React.Component {
         this.currentInputValue = null;
       }
     }
-    if (id) {
+    if (notesnook) {
       if (this.topicsToDelete?.length > 0) {
         await db.notebooks
           .notebook(toEdit.id)
@@ -171,11 +183,10 @@ export class AddNotebookDialog extends React.Component {
       await db.notebooks.add({
         title: this.title,
         description: this.description,
-        id: id
+        id: notebook.id
       });
 
       let nextTopics = toEdit.topics.map((topic, index) => {
-        //if (index === 0) return topic;
         let copy = {...topic};
         copy.title = prevTopics[index];
         return copy;
@@ -187,13 +198,12 @@ export class AddNotebookDialog extends React.Component {
         }
       });
 
-      await db.notebooks.notebook(id).topics.add(...nextTopics);
+      await db.notebooks.notebook(toEdit.id).topics.add(...nextTopics);
     } else {
       await db.notebooks.add({
         title: this.title,
         description: this.description,
-        topics: prevTopics,
+        topics: prevTopics
-        id: id
       });
     }
     useMenuStore.getState().setMenuPins();
@@ -257,15 +267,15 @@ export class AddNotebookDialog extends React.Component {
   };
 
   render() {
-    const {colors, toEdit} = this.props;
+    const {colors} = this.props;
-    const {topics, visible, topicInputFocused} = this.state;
+    const {topics, visible, topicInputFocused, notebook} = this.state;
     if (!visible) return null;
     return (
       <SheetWrapper
         onOpen={async () => {
           this.topicsToDelete = [];
           await sleep(300);
-          this.props.toEdit?.type !== 'notebook' && this.titleRef?.focus();
+          !this.state.notebook && this.titleRef?.focus();
         }}
         fwdRef={this.actionSheetRef}
         onClose={() => {
@@ -275,7 +285,8 @@ export class AddNotebookDialog extends React.Component {
             topics: [],
             descFocused: false,
             titleFocused: false,
-            editTopic: false
+            editTopic: false,
+            notesnook: null
           });
         }}
         statusBarTranslucent={false}
@@ -298,10 +309,12 @@ export class AddNotebookDialog extends React.Component {
           />
           <DialogHeader
             title={
-              toEdit && toEdit.dateCreated ? 'Edit Notebook' : 'New Notebook'
+              notebook && notebook.dateCreated
+                ? 'Edit Notebook'
+                : 'New Notebook'
             }
             paragraph={
-              toEdit && toEdit.dateCreated
+              notebook && notebook.dateCreated
                 ? 'You are editing ' + this.title + ' notebook.'
                 : 'Notebooks are the best way to organize your notes.'
             }
@@ -320,7 +333,7 @@ export class AddNotebookDialog extends React.Component {
             }}
             returnKeyLabel="Next"
             returnKeyType="next"
-            defaultValue={toEdit ? toEdit.title : null}
+            defaultValue={notebook ? notebook.title : null}
           />
 
           <Input
@@ -335,7 +348,7 @@ export class AddNotebookDialog extends React.Component {
             }}
             returnKeyLabel="Next"
             returnKeyType="next"
-            defaultValue={toEdit ? toEdit.description : null}
+            defaultValue={notebook ? notebook.description : null}
           />
 
           <Input
@@ -404,12 +417,14 @@ export class AddNotebookDialog extends React.Component {
             height={50}
             fontSize={SIZE.md}
             title={
-              toEdit && toEdit.dateCreated ? 'Save changes' : 'Create notebook'
+              notebook && notebook.dateCreated
+                ? 'Save changes'
+                : 'Create notebook'
             }
             type="accent"
             onPress={this.addNewNotebook}
           />
-{/* 
+          {/* 
           {Platform.OS === 'ios'  && (
             <View
               style={{

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

@@ -1,6 +1,5 @@
 import React, {createRef} from 'react';
 import {View} from 'react-native';
-import {Actions} from '../../provider/Actions';
 import {useMenuStore} from '../../provider/stores';
 import {
   eSubscribeEvent,
@@ -15,7 +14,6 @@ import BaseDialog from '../Dialog/base-dialog';
 import DialogButtons from '../Dialog/dialog-buttons';
 import DialogContainer from '../Dialog/dialog-container';
 import DialogHeader from '../Dialog/dialog-header';
-import {updateEvent} from '../DialogManager/recievers';
 import Input from '../Input';
 import Seperator from '../Seperator';
 import {Toast} from '../Toast';
@@ -92,7 +90,6 @@ export class AddTopicDialog extends React.Component {
     });
   };
   close = () => {
-    this.props.close();
     this.title = null;
     this.notebook = null;
     this.toEdit = null;
@@ -107,6 +104,11 @@ export class AddTopicDialog extends React.Component {
     return (
       <BaseDialog
         onShow={async () => {
+          if (this.toEdit) {
+            this.titleRef.current?.setNativeProps({
+              text: this.toEdit.title
+            });
+          }
           await sleep(300);
           this.titleRef.current?.focus();
         }}
@@ -135,7 +137,6 @@ export class AddTopicDialog extends React.Component {
                 this.title = value;
               }}
               blurOnSubmit={false}
-              defaultValue={this.toEdit ? this.toEdit.title : null}
               placeholder="Enter title"
               onSubmit={() => this.addNewTopic()}
               returnKeyLabel="Done"

apps/mobile/src/components/Announcements/cta.js

@@ -36,16 +36,12 @@ export const Cta = ({actions, style = {}, color, inline}) => {
               text: item.title
             }}
           />
-        ),
+        )
-        noIcon: true,
-        noProgress: true
       });
     } else if (item.type === 'backup') {
       presentSheet({
         title: 'Backup & restore',
         paragraph: 'Please enable automatic backups to keep your data safe',
-        noProgress: true,
-        noIcon: true,
         component: <SettingsBackupAndRestore isSheet={true} />
       });
     }

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

@@ -125,8 +125,6 @@ const AppLoader = ({onLoad}) => {
       if (!version.needsUpdate) return false;
 
       presentSheet({
-        noIcon: true,
-        noProgess: true,
         component: ref => <Update version={version} fwdRef={ref} />
       });
 
@@ -183,8 +181,6 @@ const AppLoader = ({onLoad}) => {
         presentSheet({
           title: 'Backup & restore',
           paragraph: 'Please enable automatic backups to keep your data safe',
-          noProgress: true,
-          noIcon: true,
           component: <SettingsBackupAndRestore isSheet={true} />
         });
 

apps/mobile/src/components/DialogManager/Recievers.js

@@ -29,13 +29,13 @@ export const moveNoteHideEvent = () => {
 };
 
 export const AddNotebookEvent = notebook => {
-  eSendEvent(eOpenAddNotebookDialog, {item: notebook});
+  eSendEvent(eOpenAddNotebookDialog, notebook);
 };
 export const HideAddNotebookEvent = notebook => {
   eSendEvent(eCloseAddNotebookDialog, notebook);
 };
-export const AddTopicEvent = notebook => {
+export const AddTopicEvent = topic => {
-  eSendEvent(eOpenAddTopicDialog, notebook);
+  eSendEvent(eOpenAddTopicDialog, topic);
 };
 export const HideAddTopicEvent = notebook => {
   eSendEvent(eCloseAddTopicDialog, notebook);

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

@@ -1,31 +1,13 @@
-import React, {Component, createRef} from 'react';
+import React, { Component } from 'react';
-import {
+import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
-  eSendEvent,
+import { getCurrentColors } from '../../utils/Colors';
-  eSubscribeEvent,
+import { eThemeUpdated } from '../../utils/Events';
-  eUnSubscribeEvent,
+import { EditorSettings } from '../../views/Editor/EditorSettings';
-  openVault
+import { AddNotebookDialog } from '../AddNotebookDialog';
-} from '../../services/EventManager';
+import { AddTopicDialog } from '../AddTopicDialog';
-import {getCurrentColors} from '../../utils/Colors';
+import { AnnouncementDialog } from '../Announcements';
-import {
+import { AttachmentDialog } from '../AttachmentDialog';
-  eCloseActionSheet,
+import { Dialog } from '../Dialog';
-  eCloseAddNotebookDialog,
-  eCloseLoginDialog,
-  eClosePremiumDialog,
-  eOnLoadNote,
-  eOpenActionSheet,
-  eOpenAddNotebookDialog,
-  eOpenExportDialog,
-  eOpenLoginDialog,
-  eOpenPremiumDialog,
-  eShowGetPremium,
-  eThemeUpdated
-} from '../../utils/Events';
-import {EditorSettings} from '../../views/Editor/EditorSettings';
-import {AddNotebookDialog} from '../AddNotebookDialog';
-import {AddTopicDialog} from '../AddTopicDialog';
-import {AnnouncementDialog} from '../Announcements';
-import {AttachmentDialog} from '../AttachmentDialog';
-import {Dialog} from '../Dialog';
 import ExportDialog from '../ExportDialog';
 import GeneralSheet from '../GeneralSheet';
 import ImagePreview from '../ImagePreview';
@@ -33,35 +15,20 @@ import LoginDialog from '../LoginDialog';
 import MergeEditor from '../MergeEditor';
 import MoveNoteDialog from '../MoveNoteDialog';
 import PremiumDialog from '../Premium';
-import {Expiring} from '../Premium/expiring';
+import { Expiring } from '../Premium/expiring';
-import {Properties} from '../Properties';
 import PublishNoteDialog from '../PublishNoteDialog';
 import RateDialog from '../RateDialog';
 import RecoveryKeyDialog from '../RecoveryKeyDialog';
 import RestoreDialog from '../RestoreDialog';
 import ResultDialog from '../ResultDialog';
-import SheetWrapper from '../Sheet';
 import TagsDialog from '../TagsDialog';
-import {VaultDialog} from '../VaultDialog';
+import { VaultDialog } from '../VaultDialog';
 
 export class DialogManager extends Component {
   constructor(props) {
     super(props);
-    this.actionSheet = createRef();
-    this.opened = false;
     this.state = {
-      item: {},
+      colors: getCurrentColors()
-      actionSheetVisible: false,
-      colors: getCurrentColors(),
-      actionSheetButtons: [],
-      simpleDialog: {
-        title: '',
-        paragraph: '',
-        positiveText: '',
-        negativeText: '',
-        action: 0,
-        icon: ''
-      }
     };
   }
 
@@ -72,47 +39,6 @@ export class DialogManager extends Component {
     );
   }
 
-  _showActionSheet = data => {
-    this.setState(
-      {
-        actionSheetButtons: data.buttons,
-        item: data.item ? data.item : {},
-        actionSheetVisible: true
-      },
-      () => {
-        this.actionSheet.current?.setModalVisible();
-      }
-    );
-  };
-
-  _hideActionSheet = () => {
-    this.actionSheet.current?.setModalVisible(false);
-  };
-
-  loadNote = i => {
-    if (i && i.type === 'new') {
-      this.setState({
-        item: {}
-      });
-    } else {
-      this.setState({
-        item: i
-      });
-    }
-  };
-
-  showAddTopic = () => {
-    let item = this.state.item;
-    this.addTopicsDialog.open({
-      notebookId: item?.type !== 'topic' ? item.id : item.notebookId,
-      toEdit: item?.type === 'topic' ? item : null
-    });
-  };
-
-  hideAddTopic = () => {
-    this.addTopicsDialog.close();
-  };
-
   onThemeChange = () => {
     this.setState({
       colors: getCurrentColors()
@@ -121,157 +47,20 @@ export class DialogManager extends Component {
 
   componentDidMount() {
     eSubscribeEvent(eThemeUpdated, this.onThemeChange);
-    eSubscribeEvent(eOnLoadNote, this.loadNote);
-
-    eSubscribeEvent(eOpenActionSheet, this._showActionSheet);
-    eSubscribeEvent(eCloseActionSheet, this._hideActionSheet);
-
-    eSubscribeEvent(eOpenAddNotebookDialog, this.showAddNotebook);
-    eSubscribeEvent(eCloseAddNotebookDialog, this.hideAddNotebook);
-
-    eSubscribeEvent(eOpenPremiumDialog, this.showPremiumDialog);
-    eSubscribeEvent(eClosePremiumDialog, this.hidePremiumDialog);
   }
 
   componentWillUnmount() {
     eUnSubscribeEvent(eThemeUpdated, this.onThemeChange);
-    eUnSubscribeEvent(eOnLoadNote, this.loadNote);
-
-    eUnSubscribeEvent(eOpenActionSheet, this._showActionSheet);
-    eUnSubscribeEvent(eCloseActionSheet, this._hideActionSheet);
-
-    eUnSubscribeEvent(eOpenAddNotebookDialog, this.showAddNotebook);
-    eUnSubscribeEvent(eCloseAddNotebookDialog, this.hideAddNotebook);
-
-    eUnSubscribeEvent(eOpenLoginDialog, this.showLoginDialog);
-    eUnSubscribeEvent(eCloseLoginDialog, this.hideLoginDialog);
-
-    eUnSubscribeEvent(eOpenPremiumDialog, this.showPremiumDialog);
-    eUnSubscribeEvent(eClosePremiumDialog, this.hidePremiumDialog);
   }
 
-  showPremiumDialog = prompoInfo => {
-    this.premiumDialog.open(prompoInfo);
-  };
-
-  hidePremiumDialog = () => {
-    this.premiumDialog.close();
-  };
-
-  showAddNotebook = data => {
-    this.setState(
-      {
-        item: data.item ? data.item : data.type === 'notebook' ? data : {}
-      },
-      () => {
-        this.addNotebooksDialog.open();
-      }
-    );
-  };
-  hideAddNotebook = () => {
-    this.addNotebooksDialog.close();
-  };
-
-  onActionSheetHide = () => {
-    if (this.show) {
-      switch (this.show) {
-        case 'novault': {
-          openVault({
-            item: this.state.item,
-            novault: false,
-            title: 'Create vault',
-            description: 'Set a password to create a vault and lock note.'
-          });
-          break;
-        }
-        case 'locked': {
-          openVault({
-            item: this.state.item,
-            novault: true,
-            locked: true,
-            title: 'Lock note',
-            description: 'Give access to vault to lock this note.'
-          });
-          break;
-        }
-        case 'unlock': {
-          openVault({
-            item: this.state.item,
-            novault: true,
-            locked: true,
-            permanant: true,
-            title: 'Unlock note',
-            description: 'Remove note from the vault.'
-          });
-          break;
-        }
-        case 'notebook': {
-          this.showAddNotebook({item: this.state.item});
-          break;
-        }
-        case 'topic': {
-          this.showAddTopic();
-          break;
-        }
-        case 'premium': {
-          eSendEvent(eOpenPremiumDialog);
-          break;
-        }
-        case 'export': {
-          eSendEvent(eOpenExportDialog, [this.state.item]);
-          break;
-        }
-      }
-    }
-    this.show = null;
-  };
-
   render() {
-    let {actionSheetButtons, item, colors} = this.state;
+    let {colors} = this.state;
     return (
       <>
-        {!this.state.actionSheetVisible ? null : (
-          <SheetWrapper
-            fwdRef={this.actionSheet}
-            onClose={() => {
-              eSendEvent(eShowGetPremium, null);
-              this.onActionSheetHide();
-              this.setState({
-                actionSheetVisible: false
-              });
-            }}>
-            <Properties
-              item={item}
-              getRef={() => this.actionSheet}
-              rowItems={actionSheetButtons}
-              close={value => {
-                if (value) {
-                  this.show = value;
-                }
-                this.actionSheet.current?.setModalVisible();
-              }}
-            />
-          </SheetWrapper>
-        )}
         <Dialog context="global" />
-        <AddTopicDialog
+        <AddTopicDialog colors={colors} />
-          ref={ref => (this.addTopicsDialog = ref)}
+        <AddNotebookDialog colors={colors} />
-          close={() => {
+        <PremiumDialog colors={colors} />
-            this.setState({
-              item: {}
-            });
-          }}
-          colors={colors}
-        />
-        <AddNotebookDialog
-          ref={ref => (this.addNotebooksDialog = ref)}
-          toEdit={item}
-          colors={colors}
-        />
-        <PremiumDialog
-          ref={ref => (this.premiumDialog = ref)}
-          colors={colors}
-        />
         <LoginDialog colors={colors} />
         <MergeEditor />
         <ExportDialog />

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

@@ -15,10 +15,7 @@ const GeneralSheet = ({context}) => {
   const [state] = useTracked();
   const {colors} = state;
   const [visible, setVisible] = useState(false);
-  const [dialogData, setDialogData] = useState({
+  const [dialogData, setDialogData] = useState(null);
-    title: 'Loading',
-    paragraph: 'Loading tagline'
-  });
   const actionSheetRef = useRef();
   useEffect(() => {
     eSubscribeEvent(eOpenProgressDialog, open);
@@ -52,10 +49,10 @@ const GeneralSheet = ({context}) => {
   return !visible ? null : (
     <SheetWrapper
       fwdRef={actionSheetRef}
-      gestureEnabled={dialogData?.noProgress}
+      gestureEnabled={!dialogData.progress}
-      closeOnTouchBackdrop={dialogData?.noProgress}
+      closeOnTouchBackdrop={!dialogData.progress}
       onClose={() => {
-        if (dialogData.noProgress) {
+        if (!dialogData.progress) {
           setVisible(false);
           setDialogData(null);
         }
@@ -65,23 +62,31 @@ const GeneralSheet = ({context}) => {
           justifyContent: 'center',
           alignItems: 'center',
           marginBottom:
-            dialogData.noProgress &&
+            !dialogData.progress &&
-            dialogData.noIcon &&
+            !dialogData.icon &&
             !dialogData.title &&
             !dialogData.paragraph
               ? 0
               : 10,
           paddingHorizontal: 12
         }}>
-        {!dialogData?.noProgress && !dialogData.component ? (
+        {dialogData?.progress ? (
-          <ActivityIndicator size={50} color={colors.accent} />
+          <ActivityIndicator
-        ) : dialogData?.noIcon ? null : (
+            style={{
+              marginTop: 15
+            }}
+            size={50}
+            color={colors.accent}
+          />
+        ) : null}
+
+        {dialogData?.icon ? (
           <Icon
             color={colors[dialogData.iconColor] || colors.accent}
-            name={dialogData.icon || 'check'}
+            name={dialogData.icon}
             size={50}
           />
-        )}
+        ) : null}
 
         {dialogData?.title ? <Heading> {dialogData?.title}</Heading> : null}
 
@@ -93,7 +98,7 @@ const GeneralSheet = ({context}) => {
       </View>
 
       {typeof dialogData.component === 'function'
-        ? dialogData.component(actionSheetRef)
+        ? dialogData.component(actionSheetRef, close)
         : dialogData.component}
 
       {dialogData?.learnMore ? (
@@ -156,7 +161,7 @@ const GeneralSheet = ({context}) => {
               key={item.accentText}
               title={item.actionText}
               icon={item.icon && item.icon}
-              type={item.type || "accent"}
+              type={item.type || 'accent'}
               height={50}
               style={{
                 marginBottom: 10

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

@@ -248,7 +248,7 @@ const LoginDialog = () => {
       presentSheet({
         title: 'Syncing your data',
         paragraph: 'Please wait while we sync all your data.',
-        noProgress: false
+        progress:true
       });
     } catch (e) {
       setLoading(false);

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

@@ -42,8 +42,6 @@ export default function NoteHistory({note, ref}) {
         />
       ),
       context: 'note_history',
-      noProgress: true,
-      noIcon: true
     });
   }
 

apps/mobile/src/components/Premium/component.js

@@ -31,8 +31,6 @@ export const Component = ({close, promo, getRef}) => {
       presentSheet({
         context: 'pricing_plans',
         component: <PricingPlans marginTop={1} promo={promo} />,
-        noIcon: true,
-        noProgress: true
       });
     } else {
       close();

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

@@ -1,4 +1,6 @@
 import React, {createRef} from 'react';
+import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
+import {eClosePremiumDialog, eOpenPremiumDialog} from '../../utils/Events';
 import BaseDialog from '../Dialog/base-dialog';
 import {Component} from './component';
 
@@ -12,6 +14,16 @@ class PremiumDialog extends React.Component {
     this.actionSheetRef = createRef();
   }
 
+  componentDidMount() {
+    eSubscribeEvent(eOpenPremiumDialog, this.open);
+    eSubscribeEvent(eClosePremiumDialog, this.close);
+  }
+
+  componentWillUnmount() {
+    eUnSubscribeEvent(eOpenPremiumDialog, this.open);
+    eUnSubscribeEvent(eClosePremiumDialog, this.close);
+  }
+
   open(promoInfo) {
     console.log(promoInfo);
     this.setState({

apps/mobile/src/components/Premium/pricingplans.js

@@ -151,7 +151,6 @@ export const PricingPlans = ({
         },
         icon: 'check',
         actionText: 'Continue',
-        noProgress: true
       });
     } catch (e) {
       setBuying(false);

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

@@ -2,9 +2,9 @@ import React from 'react';
 import {ScrollView, View} from 'react-native';
 import {useTracked} from '../../provider';
 import {DDS} from '../../services/DeviceDetection';
+import {presentSheet} from '../../services/EventManager';
 import {db} from '../../utils/database';
 import {SIZE} from '../../utils/SizeUtils';
-import {ActionSheetEvent} from '../DialogManager/recievers';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 import {ColorTags} from './color-tags';
@@ -16,7 +16,7 @@ import {Synced} from './synced';
 import {Tags} from './tags';
 import {Topics} from './topics';
 
-export const Properties = ({close = () => {}, item, rowItems = [], getRef}) => {
+export const Properties = ({close = () => {}, item, buttons = [], getRef}) => {
   const [state, dispatch] = useTracked();
   const {colors} = state;
 
@@ -97,7 +97,7 @@ export const Properties = ({close = () => {}, item, rowItems = [], getRef}) => {
 
       {item.type === 'note' ? <ColorTags close={close} item={item} /> : null}
 
-      <Items item={item} rowItems={rowItems} close={close} />
+      <Items item={item} buttons={buttons} close={close} />
       <Synced item={item} close={close} />
       <DevMode item={item} />
 
@@ -148,5 +148,17 @@ Properties.present = (item, buttons = []) => {
       props.push(['Add Shortcut', 'Delete', 'Rename Tag']);
       break;
   }
-  ActionSheetEvent(...props);
+
+  presentSheet({
+    component: (ref, close) => (
+      <Properties
+        close={() => {
+          close();
+        }}
+        getRef={() => ref}
+        item={props[0]}
+        buttons={props[1]}
+      />
+    )
+  });
 };

apps/mobile/src/components/Properties/items.js

@@ -11,12 +11,12 @@ import {PressableButton} from '../PressableButton';
 import Paragraph from '../Typography/Paragraph';
 import {useActions} from './use-actions';
 
-export const Items = ({item, rowItems, close}) => {
+export const Items = ({item, buttons, close}) => {
   const [state] = useTracked();
   const {colors} = state;
   const dimensions = useSettingStore(state => state.dimensions);
-  const actions= useActions({item, close});
+  const actions = useActions({item, close});
-  const data = actions.filter(i => rowItems.indexOf(i.name) > -1 && !i.hidden);
+  const data = actions.filter(i => buttons.indexOf(i.name) > -1 && !i.hidden);
 
   let width = dimensions.width > 600 ? 600 : dimensions.width;
   let columnItemsCount = DDS.isLargeTablet() ? 7 : 5;
@@ -93,7 +93,7 @@ export const Items = ({item, rowItems, close}) => {
     <FlatList
       data={data}
       keyExtractor={item => item.title}
-      numColumns={rowItems.length < 5 ? rowItems.length : columnItemsCount}
+      numColumns={buttons.length < 5 ? buttons.length : columnItemsCount}
       style={{
         marginTop: item.type !== 'note' ? 10 : 0,
         paddingTop: 10
@@ -103,8 +103,8 @@ export const Items = ({item, rowItems, close}) => {
       }}
       contentContainerStyle={{
         alignSelf: 'center',
-        width: rowItems.length < 5 ? '100%' : null,
+        width: buttons.length < 5 ? '100%' : null,
-        paddingLeft: rowItems.length < 5 ? 10 : 0
+        paddingLeft: buttons.length < 5 ? 10 : 0
       }}
       renderItem={_renderRowItem}
     />

apps/mobile/src/components/Properties/useActions.js

@@ -32,6 +32,8 @@ import {
 } from '../../utils/Colors';
 import {db} from '../../utils/database';
 import {
+  eOpenAddNotebookDialog,
+  eOpenAddTopicDialog,
   eOpenAttachmentsDialog,
   eOpenLoginDialog,
   eOpenMoveNoteDialog,
@@ -282,7 +284,16 @@ export const useActions = ({close = () => {}, item}) => {
   async function addToVault() {
     if (!item.id) return;
     if (item.locked) {
-      close('unlock');
+      close();
+      await sleep(300);
+      openVault({
+        item: item,
+        novault: true,
+        locked: true,
+        permanant: true,
+        title: 'Unlock note',
+        description: 'Remove note from the vault.'
+      });
       return;
     }
     try {
@@ -297,15 +308,25 @@ export const useActions = ({close = () => {}, item}) => {
         ]);
       }
     } catch (e) {
+      close();
+      await sleep(300);
       switch (e.message) {
         case db.vault.ERRORS.noVault:
-          close('novault');
+          openVault({
+            item: item,
+            novault: false,
+            title: 'Create vault',
+            description: 'Set a password to create a vault and lock note.'
+          });
           break;
         case db.vault.ERRORS.vaultLocked:
-          close('locked');
+          openVault({
-          break;
+            item: item,
-        case db.vault.ERRORS.wrongPassword:
+            novault: true,
-          close();
+            locked: true,
+            title: 'Lock note',
+            description: 'Give access to vault to lock this note.'
+          });
           break;
       }
     }
@@ -455,8 +476,6 @@ export const useActions = ({close = () => {}, item}) => {
     close();
     await sleep(300);
     presentSheet({
-      noProgress: true,
-      noIcon: true,
       component: ref => <NoteHistory ref={ref} note={item} />
     });
   }
@@ -523,13 +542,24 @@ export const useActions = ({close = () => {}, item}) => {
       name: 'Edit Notebook',
       title: 'Edit notebook',
       icon: 'square-edit-outline',
-      func: () => close('notebook')
+      func: async () => {
+        close();
+        await sleep(300);
+        eSendEvent(eOpenAddNotebookDialog, item);
+      }
     },
     {
       name: 'Edit Topic',
       title: 'Edit topic',
       icon: 'square-edit-outline',
-      func: () => close('topic')
+      func: async () => {
+        close();
+        await sleep(300);
+        eSendEvent(eOpenAddTopicDialog, {
+          notebookId: item.notebookId,
+          toEdit: item
+        });
+      }
     },
     {
       name: 'Copy',
@@ -592,7 +622,11 @@ export const useActions = ({close = () => {}, item}) => {
       name: 'Export',
       title: 'Export',
       icon: 'export',
-      func: () => close('export')
+      func: async () => {
+        close();
+        await sleep(300);
+        eSendEvent(eOpenExportDialog, [item]);
+      }
     },
     {
       name: 'RemoveTopic',
@@ -625,5 +659,5 @@ export const useActions = ({close = () => {}, item}) => {
     }
   ];
 
-  return actions
+  return actions;
 };

apps/mobile/src/components/SimpleList/sectionheader.js

@@ -95,8 +95,6 @@ export const SectionHeader = ({item, index, type, color, screen}) => {
             <Button
               onPress={() => {
                 presentSheet({
-                  noProgress: true,
-                  noIcon: true,
                   component: <Sort screen={screen} type={type} />
                 });
               }}

apps/mobile/src/services/Backup.js

@@ -74,7 +74,8 @@ async function run() {
   presentSheet({
     title: 'Backing up your data',
     paragraph:
-      "All your backups are stored in 'Phone Storage/Notesnook/backups/' folder"
+      "All your backups are stored in 'Phone Storage/Notesnook/backups/' folder",
+    progress:true
   });
   let backup;
   let error;
@@ -128,7 +129,6 @@ async function run() {
         icon: 'cloud-upload',
         paragraph:
           'Share your backup to your cloud storage such as Dropbox or Google Drive so you do not lose it.',
-        noProgress: true,
         actionText: 'Share backup',
         actionsArray: [
           {

apps/mobile/src/services/PremiumService.js

@@ -181,7 +181,6 @@ const showVerifyEmailDialog = () => {
       }
     },
     actionText: 'Resend Confirmation Link',
-    noProgress: true
   });
 };
 
@@ -360,8 +359,6 @@ const sheet = (context, promo) => {
         <PricingPlans compact heading={false} promo={promo} />
       </>
     ),
-    noIcon: true,
-    noProgress: true
   });
 };
 

apps/mobile/src/utils/filesystem.js

@@ -259,7 +259,6 @@ async function downloadAttachment(hash, global = true) {
           ? 'selected path'
           : 'File Manager/Notesnook/downloads'
       }`,
-      noProgress: true,
       icon: 'download',
       context: global ? null : attachment.metadata.hash,
       component: (

apps/mobile/src/utils/useAppEvents.js

@@ -221,7 +221,6 @@ export const useAppEvents = () => {
     presentSheet({
       title: 'Email confirmed!',
       paragraph: message,
-      noProgress: true,
       component: (
         <View
           style={{
@@ -263,7 +262,6 @@ export const useAppEvents = () => {
         },
         icon: 'check',
         actionText: 'Continue',
-        noProgress: true
       });
     }
     await PremiumService.setPremiumStatus();
@@ -316,7 +314,6 @@ export const useAppEvents = () => {
       },
       icon: 'logout',
       actionText: 'Login',
-      noProgress: true
     });
 
     setTimeout(() => {

apps/mobile/src/views/Editor/Functions.js

@@ -485,8 +485,6 @@ export const _onMessage = async evt => {
       console.log(message.value);
       eSendEvent('updatecell', message.value);
       presentSheet({
-        noIcon: true,
-        noProgress: true,
         component: <TableCellProperties data={message.value} />
       });
       break;
@@ -494,8 +492,6 @@ export const _onMessage = async evt => {
       console.log('tablerowoptions', message.value);
       eSendEvent('updaterow', message.value);
       presentSheet({
-        noIcon: true,
-        noProgress: true,
         component: <TableRowProperties data={message.value} />
       });
       break;

apps/mobile/src/views/Editor/tiny/toolbar/item.js

@@ -221,8 +221,6 @@ const ToolbarItem = ({
 
     if (format === 'table') {
       presentSheet({
-        noProgress:true,
-        noIcon:true,
         component:<Table/>
       })
     }

apps/mobile/src/views/Editor/tiny/toolbar/picker.js

@@ -27,7 +27,6 @@ const showEncryptionSheet = file => {
   presentSheet({
     title: 'Encrypting attachment',
     paragraph: 'Please wait while we encrypt file for upload',
-    nowarn: true,
     icon: 'attachment',
     component: (
       <View
@@ -222,8 +221,6 @@ const pick = async () => {
     editing.isFocused = true;
   }
   presentSheet({
-    noProgress: true,
-    noIcon: true,
     actionsArray: [
       {
         action: async () => {

apps/mobile/src/views/Settings/backuprestore.js

@@ -79,7 +79,6 @@ const SettingsBackupAndRestore = ({isSheet}) => {
             presentSheet({
               title: 'Notesnook Importer',
               icon: 'import',
-              noProgress: true,
               action: async () => {
                 try {
                   await openLinkInBrowser(

apps/mobile/src/views/Settings/index.js

@@ -129,7 +129,6 @@ export const Settings = ({navigation}) => {
       name: `Report an issue`,
       func: async () => {
         presentSheet({
-          noIcon: true,
           component: <Issue />
         });
       },
@@ -151,7 +150,6 @@ export const Settings = ({navigation}) => {
             'Get early access to new features',
             'Meet other people using Notesnook'
           ],
-          noProgress: true,
           icon: 'discord',
           action: async () => {
             try {

apps/mobile/src/views/Settings/usersection.js

@@ -248,7 +248,6 @@ const SettingsUserSection = () => {
                       paragraph:
                         SUBSCRIPTION_PROVIDER[user?.subscription?.provider]
                           .desc,
-                      noProgress: true
                     });
                   }}
                   style={{
@@ -323,7 +322,6 @@ const SettingsUserSection = () => {
                   },
                   icon: 'information-outline',
                   actionText: 'Verify',
-                  noProgress: true
                 });
               },
               desc: 'Verify your subscription to Notesnook Pro'