refactor dialogs

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

@@ -8,6 +8,9 @@ import {eSendEvent} from '../../services/eventManager';
 import {eOnNewTopicAdded} from '../../services/events';
 import {Toast} from '../Toast';
 import {Button} from '../Button';
+import BaseDialog from '../Dialog/base-dialog';
+import DialogHeader from '../Dialog/dialog-header';
+import DialogButtons from '../Dialog/dialog-buttons';
 
 export class AddTopicDialog extends React.Component {
   constructor(props) {
@@ -44,6 +47,7 @@ export class AddTopicDialog extends React.Component {
     });
   }
   close() {
+    refs = [];
     this.title = null;
     this.setState({
       visible: false,
@@ -55,35 +59,12 @@ export class AddTopicDialog extends React.Component {
     const {colors, toEdit} = this.props;
 
     return (
-      <Modal
+      <BaseDialog
-        visible={visible}
-        animated
-        animationType="fade"
-        transparent={true}
         onShow={() => {
           this.titleRef.current?.focus();
         }}
-        onRequestClose={() => {
+        visible={visible}
-          refs = [];
+        onRequestClose={this.close}>
-          this.close();
-        }}>
-        <View
-          style={{
-            width: '100%',
-            height: '100%',
-            backgroundColor: 'rgba(0,0,0,0.3)',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}>
-          <TouchableOpacity
-            onPress={() => this.close()}
-            style={{
-              width: '100%',
-              height: '100%',
-              position: 'absolute',
-            }}
-          />
-
         <View
           style={{
             ...getElevation(5),
@@ -94,23 +75,10 @@ export class AddTopicDialog extends React.Component {
             paddingHorizontal: ph,
             paddingVertical: pv,
           }}>
-            <View
+          <DialogHeader
-              style={{
+            icon="book-outline"
-                flexDirection: 'row',
+            title={toEdit ? 'Edit Topic' : 'Add New Topic'}
-                justifyContent: 'center',
+          />
-                alignItems: 'center',
-              }}>
-              <Icon name="book-outline" color={colors.accent} size={SIZE.lg} />
-              <Text
-                style={{
-                  color: colors.accent,
-                  fontFamily: WEIGHT.bold,
-                  marginLeft: 5,
-                  fontSize: SIZE.md,
-                }}>
-                {toEdit ? 'Edit Topic' : 'Add New Topic'}
-              </Text>
-            </View>
 
           <TextInput
             ref={this.titleRef}
@@ -143,28 +111,14 @@ export class AddTopicDialog extends React.Component {
             placeholderTextColor={colors.icon}
           />
 
-            <View
+          <DialogButtons
-              style={{
+            positiveTitle={toEdit ? 'Save' : 'Add'}
-                justifyContent: 'space-around',
+            onPressNegative={this.close}
-                alignItems: 'center',
+            onPressPositive={this.addNewTopic}
-                flexDirection: 'row',
-                marginTop: 20,
-              }}>
-              <Button
-                activeOpacity={opacity}
-                onPress={async () => await this.addNewTopic()}
-                title={toEdit ? 'Save' : 'Add'}
           />
-              <Button
-                activeOpacity={opacity}
-                onPress={() => this.close()}
-                title="Cancel"
-              />
-            </View>
-          </View>
         </View>
         <Toast context="local" />
-      </Modal>
+      </BaseDialog>
     );
   }
 }

apps/mobile/src/components/Dialog/BaseDialog.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import {Modal, StyleSheet, TouchableOpacity, View} from 'react-native';
+import {useTracked} from '../../provider';
+
+const BaseDialog = ({visible, onRequestClose, children, onShow}) => {
+  const [state, dispatch] = useTracked();
+  return (
+    <Modal
+      visible={visible}
+      transparent={true}
+      animated
+      statusBarTranslucent
+      onShow={onShow}
+      animationType="fade"
+      onRequestClose={onRequestClose}>
+      <View
+        style={[
+          {
+            backgroundColor: state.colors.night
+              ? 'rgba(255,255,255,0.15)'
+              : 'rgba(0,0,0,0.3)',
+          },
+          styles.backdrop,
+        ]}>
+        <TouchableOpacity
+          onPress={onRequestClose}
+          style={styles.overlayButton}
+        />
+        {children}
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  backdrop: {
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  overlayButton: {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+  },
+});
+
+export default BaseDialog;

apps/mobile/src/components/Dialog/DialogButtons.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {useTracked} from '../../provider';
+import {Button} from '../Button';
+
+const DialogButtons = ({
+  onPressPositive,
+  onPressNegative,
+  positiveTitle,
+  negativeTitle = 'Cancel',
+}) => {
+  return (
+    <View
+      style={styles.container}>
+      <Button onPress={onPressPositive} title={positiveTitle} />
+      <Button onPress={onPressNegative} title={negativeTitle} />
+    </View>
+  );
+};
+
+export default DialogButtons;
+
+const styles = StyleSheet.create({
+  container:{
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginTop: 20,
+  }
+})

apps/mobile/src/components/Dialog/DialogHeader.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import {Text, View} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {useTracked} from '../../provider';
+
+const DialogHeader = ({icon, title}) => {
+  const [state, dispatch] = useTracked();
+  const colors = state.colors;
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      {icon ? <Icon name={icon} color={colors.accent} size={SIZE.lg} /> : null}
+      <Text
+        style={{
+          color: colors.accent,
+          fontFamily: WEIGHT.bold,
+          marginLeft: 5,
+          fontSize: SIZE.md,
+        }}>
+        {title}
+      </Text>
+    </View>
+  );
+};
+
+export default DialogHeader

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

@@ -1,20 +1,22 @@
 import React, {Component} from 'react';
 import {Modal, Text, TouchableOpacity, View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import {opacity, ph, pv, SIZE, WEIGHT} from '../../common/common';
+import {ph, pv, SIZE, WEIGHT} from '../../common/common';
 import {ACTIONS} from '../../provider/actions';
 import {eSendEvent} from '../../services/eventManager';
 import {
+  eApplyChanges,
   eClearEditor,
   eCloseFullscreenEditor,
+  eOnLoadNote,
   eOnNewTopicAdded,
-  eApplyChanges, eOnLoadNote
 } from '../../services/events';
 import NavigationService from '../../services/NavigationService';
 import {db, DDS, getElevation, history, ToastEvent} from '../../utils/utils';
+import {Button} from '../Button';
 import {dialogActions} from '../DialogManager/dialogActions';
 import {updateEvent} from '../DialogManager/recievers';
-import {Button} from '../Button';
+import BaseDialog from './base-dialog';
 
 export class Dialog extends Component {
   constructor(props) {
@@ -134,7 +136,7 @@ export class Dialog extends Component {
         break;
       }
       case dialogActions.ACTION_NEW_NOTE: {
-        eSendEvent(eOnLoadNote, {type:"new"});
+        eSendEvent(eOnLoadNote, {type: 'new'});
         this.hide();
         break;
       }
@@ -205,28 +207,7 @@ export class Dialog extends Component {
     const {title, paragraph, positiveText, negativeText, icon} = template;
     const {visible} = this.state;
     return (
-      <Modal
+      <BaseDialog visible={visible} onRequestClose={this.hide}>
-        visible={visible}
-        transparent={true}
-        animated
-        animationType="fade"
-        onRequestClose={() => this.setState({visible: false})}>
-        <View
-          style={{
-            width: '100%',
-            height: '100%',
-            backgroundColor: 'rgba(0,0,0,0.3)',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}>
-          <TouchableOpacity
-            onPress={this.hide}
-            style={{
-              width: '100%',
-              height: '100%',
-              position: 'absolute',
-            }}
-          />
         <View
           style={{
             ...getElevation(5),
@@ -265,9 +246,8 @@ export class Dialog extends Component {
               style={{
                 color: colors.icon,
                 fontFamily: WEIGHT.regular,
-                  fontSize: SIZE.sm - 2,
+                fontSize: SIZE.xs + 1,
                 textAlign: 'center',
-                  marginTop: 10,
               }}>
               {this.state.selectedItemsLength > 0
                 ? 'Delete ' +
@@ -290,8 +270,7 @@ export class Dialog extends Component {
             </View>
           )}
         </View>
-        </View>
+      </BaseDialog>
-      </Modal>
     );
   }
 }

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

@@ -14,6 +14,8 @@ import {useTracked} from '../../provider';
 import storage from '../../utils/storage';
 import {DDS, getElevation, ToastEvent} from '../../utils/utils';
 import {Button} from '../Button/index';
+import BaseDialog from '../Dialog/base-dialog';
+import DialogHeader from '../Dialog/dialog-header';
 import {Loading} from '../Loading';
 import Seperator from '../Seperator';
 
@@ -112,14 +114,7 @@ const ExportDialog = () => {
   ];
 
   return (
-    <Modal
+    <BaseDialog onRequestClose={close} visible={visible}>
-      visible={visible}
-      transparent={true}
-      animated
-      animationType="fade"
-      onRequestClose={close}>
-      <View style={styles.wrapper}>
-        <TouchableOpacity onPress={close} style={styles.overlay} />
       <View
         style={[
           {
@@ -128,16 +123,7 @@ const ExportDialog = () => {
           },
           styles.container,
         ]}>
-          <View style={styles.headingContainer}>
+        <DialogHeader icon="export" title="Export Note" />
-            <Icon name="export" color={colors.accent} size={SIZE.lg} />
-            <Text style={[{color: colors.accent}, styles.heading]}>
-              Export
-              {notes.length === 0 || notes.length === 1
-                ? ''
-                : ' ' + notes.length}{' '}
-              Note
-            </Text>
-          </View>
 
         <Seperator half />
         {exporting ? (
@@ -187,19 +173,11 @@ const ExportDialog = () => {
           </>
         )}
       </View>
-      </View>
+    </BaseDialog>
-    </Modal>
   );
 };
 
 const styles = StyleSheet.create({
-  wrapper: {
-    width: '100%',
-    height: '100%',
-    backgroundColor: 'rgba(0,0,0,0.3)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   container: {
     ...getElevation(5),
     maxHeight: 350,
@@ -207,20 +185,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: ph,
     paddingVertical: pv,
   },
-  headingContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   buttonContainer: {
     justifyContent: 'space-between',
     alignItems: 'center',
   },
-  heading: {
-    fontFamily: WEIGHT.bold,
-    marginLeft: 5,
-    fontSize: SIZE.md,
-  },
   button: {
     paddingVertical: pv,
     paddingHorizontal: ph,

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

@@ -19,6 +19,9 @@ import {
 import {openEditorAnimation} from '../../utils/animations';
 import {db, DDS, getElevation, ToastEvent} from '../../utils/utils';
 import {Button} from '../Button/index';
+import BaseDialog from '../Dialog/base-dialog';
+import DialogButtons from '../Dialog/dialog-buttons';
+import DialogHeader from '../Dialog/dialog-header';
 import {updateEvent} from '../DialogManager/recievers';
 import {Toast} from '../Toast';
 const passInputRef = createRef();
@@ -251,23 +254,12 @@ export class VaultDialog extends Component {
     } = this.state;
 
     return (
-      <Modal
+      <BaseDialog
         onShow={() => {
           passInputRef.current?.focus();
         }}
-        visible={visible}
+        onRequestClose={this.close}
-        transparent={true}
+        visible={visible}>
-        onRequestClose={this.close}>
-        <View
-          style={{
-            width: '100%',
-            height: '100%',
-            backgroundColor: colors.night
-              ? 'rgba(255,255,255,0.3)'
-              : 'rgba(0,0,0,0.3)',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}>
         <View
           style={{
             ...getElevation(5),
@@ -278,21 +270,9 @@ export class VaultDialog extends Component {
             paddingHorizontal: ph,
             paddingVertical: pv,
           }}>
-            <View
+          <DialogHeader
-              style={{
+            title={
-                flexDirection: 'row',
+              !novault
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}>
-              <Icon name="shield" color={colors.accent} size={SIZE.lg} />
-              <Text
-                style={{
-                  color: colors.accent,
-                  fontFamily: WEIGHT.bold,
-                  marginLeft: 5,
-                  fontSize: SIZE.md,
-                }}>
-                {!novault
                 ? 'Create vault'
                 : note.locked
                 ? this.state.deleteNote
@@ -302,9 +282,10 @@ export class VaultDialog extends Component {
                   : this.state.goToEditor
                   ? 'Unlock note'
                   : 'Unlock note'
-                  : 'Lock note'}
+                : 'Lock note'
-              </Text>
+            }
-            </View>
+            icon="shield"
+          />
 
           <Text
             style={{
@@ -411,18 +392,10 @@ export class VaultDialog extends Component {
             </View>
           ) : null}
 
-            <View
+          <DialogButtons
-              style={{
+            onPressNegative={this.close}
-                justifyContent: 'space-around',
+            onPressPositive={this.onPress}
-                alignItems: 'center',
+            positiveTitle={
-                flexDirection: 'row',
-                marginTop: 20,
-              }}>
-              <Button onPress={this.close} title="Cancel" />
-
-              <Button
-                onPress={this.onPress}
-                title={
               note.locked
                 ? this.state.deleteNote
                   ? 'Delete'
@@ -433,13 +406,10 @@ export class VaultDialog extends Component {
                   : 'Unlock'
                 : 'Lock'
             }
-                grayed
           />
         </View>
-          </View>
-        </View>
         <Toast context="local" />
-      </Modal>
+      </BaseDialog>
     );
   }
 }

apps/mobile/src/utils/animations.js

@@ -7,7 +7,9 @@ const {color, Value, timing} = Animated;
 export const EditorPosition = new Value(Dimensions.get('window').width * 1.5);
 export const EditorScale = new Value(1);
 export const EditorOpacity = new Value(0);
-export const EditorTranslateY = new Value(Dimensions.get('window').height * 0.75);
+export const EditorTranslateY = new Value(
+  Dimensions.get('window').height * 0.75,
+);
 
 export function openEditorAnimation() {
   EditorPosition.setValue(Dimensions.get('window').width * 1.5);
@@ -28,7 +30,6 @@ export function openEditorAnimation() {
     toValue: 1,
     easing: Easing.out(Easing.ease),
   }).start();
-
 }
 
 export function exitEditorAnimation() {
@@ -49,9 +50,6 @@ export function exitEditorAnimation() {
     toValue: Dimensions.get('window').height * 0.75,
     easing: Easing.inOut(Easing.ease),
   }).start();
-  
-
- 
 }
 
 export const slideRight = {