improve multi-select ux

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

@@ -11,7 +11,7 @@ import {db, DDS} from '../../../App';
 import {opacity, ph, pv, SIZE, WEIGHT} from '../../common/common';
 import {ACTIONS} from '../../provider/actions';
 import NavigationService from '../../services/NavigationService';
-import {getElevation, ToastEvent, editing} from '../../utils/utils';
+import {getElevation, ToastEvent, editing, history} from '../../utils/utils';
 import {dialogActions, updateEvent} from '../DialogManager';
 import {eSendEvent} from '../../services/eventManager';
 import {eCloseFullscreenEditor, eOnLoadNote} from '../../services/events';
@@ -21,6 +21,7 @@ export class Dialog extends Component {
     super(props);
     this.state = {
       visible: false,
+      selecteItemsLength: 0,
     };
   }
 
@@ -29,23 +30,29 @@ export class Dialog extends Component {
 
     switch (template.action) {
       case dialogActions.ACTION_DELETE: {
-        if (item.type === 'note') {
+        if (item.id && history.selectedItemsList.length === 0) {
-          await db.notes.delete(item.id);
+          history.selectedItemsList = [];
-
+          history.selectedItemsList.push(item);
-          ToastEvent.show('Note moved to trash', 'error', 3000);
-          updateEvent({type: item.type});
-        } else if (item.type === 'topic') {
-          await db.notebooks
-            .notebook(item.notebookId)
-            .topics.delete(item.title);
-          updateEvent({type: 'notebook'});
-
-          ToastEvent.show('Topic deleted', 'error', 3000);
-        } else if (item.type === 'notebook') {
-          await db.notebooks.delete(item.id);
-          updateEvent({type: item.type});
-          ToastEvent.show('Notebook moved to trash', 'error', 3000);
         }
+        history.selectedItemsList.forEach(async i => {
+          if (i.type === 'note') {
+            await db.notes.delete(i.id);
+            ToastEvent.show('Notes moved to trash', 'error', 3000);
+            updateEvent({type: i.type});
+          } else if (i.type === 'topic') {
+            await db.notebooks.notebook(i.notebookId).topics.delete(i.title);
+            updateEvent({type: 'notebook'});
+
+            ToastEvent.show('Topics deleted', 'error', 3000);
+          } else if (i.type === 'notebook') {
+            await db.notebooks.delete(i.id);
+            updateEvent({type: i.type});
+            ToastEvent.show('Notebooks moved to trash', 'error', 3000);
+          }
+        });
+
+        updateEvent({type: ACTIONS.CLEAR_SELECTION});
+        updateEvent({type: ACTIONS.SELECTION_MODE, enabled: false});
 
         this.setState({
           visible: false,
@@ -87,7 +94,7 @@ export class Dialog extends Component {
         break;
       }
       case dialogActions.ACTION_TRASH: {
-        db.trash.restore(item.id);
+        await db.trash.restore(i.id);
         ToastEvent.show(
           item.type.slice(0, 1).toUpperCase() +
             item.type.slice(1) +
@@ -95,6 +102,7 @@ export class Dialog extends Component {
           'success',
           3000,
         );
+
         updateEvent({type: ACTIONS.TRASH});
         this.hide();
         break;
@@ -114,8 +122,10 @@ export class Dialog extends Component {
   };
 
   show = () => {
+    console.log(history.selectedItemsList.length, 'length');
     this.setState({
       visible: true,
+      selectedItemsLength: history.selectedItemsList.length,
     });
   };
   hide = () => {
@@ -193,7 +203,11 @@ export class Dialog extends Component {
                   textAlign: 'center',
                   marginTop: 10,
                 }}>
-                {paragraph}
+                {this.state.selectedItemsLength > 0
+                  ? 'Delete ' +
+                    this.state.selectedItemsLength +
+                    ' selected items?'
+                  : paragraph}
               </Text>
             ) : null}
 

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

@@ -14,8 +14,9 @@ import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
 import {w, ToastEvent} from '../../utils/utils';
 import {eSendEvent} from '../../services/eventManager';
-import {eOpenMoveNoteDialog} from '../../services/events';
+import {eOpenMoveNoteDialog, eOpenSimpleDialog} from '../../services/events';
 import {db} from '../../../App';
+import {TEMPLATE_DELETE} from '../DialogManager';
 
 export const AnimatedSafeAreaView = Animatable.createAnimatableComponent(
   SafeAreaView,
@@ -105,6 +106,7 @@ export const SelectionHeader = ({navigation}) => {
             <TouchableOpacity
               onPress={() => {
                 dispatch({type: ACTIONS.SELECTION_MODE, enabled: false});
+                dispatch({type: ACTIONS.CLEAR_SELECTION});
                 eSendEvent(eOpenMoveNoteDialog);
               }}>
               <Icon
@@ -144,6 +146,8 @@ export const SelectionHeader = ({navigation}) => {
           {currentScreen === 'trash' ? null : (
             <TouchableOpacity
               onPress={async () => {
+                eSendEvent(eOpenSimpleDialog, TEMPLATE_DELETE('item'));
+                return;
                 if (selectedItemsList.length > 0) {
                   let noteIds = [];
                   selectedItemsList.forEach(item => {

apps/mobile/src/utils/utils.js

@@ -20,6 +20,11 @@ export const getElevation = elevation => {
 
 export const editing = {
   currentlyEditing: false,
+  isFullscreen: false,
+};
+
+export const history = {
+  selectedItemsList: [],
 };
 
 export function timeSince(date) {

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

@@ -355,17 +355,11 @@ const Editor = ({navigation, noMenu}) => {
 
         {noMenu ? null : (
           <TouchableOpacity
-            onPress={() => {
+            onPress={async () => {
               if (DDS.isTab) {
                 simpleDialogEvent(TEMPLATE_EXIT_FULLSCREEN());
               } else {
-                tapCount = 0;
+                await closeEditor();
-                title = null;
-                content = null;
-                note = null;
-                id = null;
-                ToastEvent.show('Note Saved!', 'success');
-                NavigationService.goBack();
               }
             }}
             style={{
@@ -534,6 +528,33 @@ const Editor = ({navigation, noMenu}) => {
     };
   });
 
+  const closeEditor = async () => {
+    await saveNote();
+    title = null;
+    content = null;
+    note = null;
+    id = null;
+    dateEdited = null;
+    tapCount = 0;
+    NavigationService.goBack();
+    ToastEvent.show('Note Saved!', 'success');
+  };
+
+  const _onHardwareBackPress = async () => {
+    if (tapCount > 0) {
+      await closeEditor();
+
+      return true;
+    } else {
+      tapCount = 1;
+      setTimeout(() => {
+        tapCount = 0;
+      }, 3000);
+      ToastEvent.show('Press back again to exit editor', 'success');
+      return true;
+    }
+  };
+
   useEffect(() => {
     editing.currentlyEditing = true;
 
@@ -545,24 +566,10 @@ const Editor = ({navigation, noMenu}) => {
         return true;
       });
     } else if (!DDS.isTab) {
-      handleBack = BackHandler.addEventListener('hardwareBackPress', () => {
+      handleBack = BackHandler.addEventListener(
-        if (tapCount > 0) {
+        'hardwareBackPress',
-          tapCount = 0;
+        _onHardwareBackPress,
-          title = null;
+      );
-          content = null;
-          note = null;
-          id = null;
-          ToastEvent.show('Note Saved!', 'success');
-          return false;
-        } else {
-          tapCount = 1;
-          setTimeout(() => {
-            tapCount = 0;
-          }, 3000);
-          ToastEvent.show('Press back again to exit editor', 'success');
-          return true;
-        }
-      });
     } else {
       if (handleBack) {
         handleBack.remove();