Improved back button handling when note has been modified

CliClient/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/laurent22/joplin"
   },
   "url": "git://github.com/laurent22/joplin.git",
-  "version": "0.9.16",
+  "version": "0.9.17",
   "bin": {
     "joplin": "./main.js"
   },

ReactNativeClient/lib/components/screen-header.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux'
 import { View, Text, Button, StyleSheet, TouchableOpacity, Picker, Image } from 'react-native';
 import Icon from 'react-native-vector-icons/Ionicons';
 import { Log } from 'lib/log.js';
+import { BackButtonService } from 'lib/services/back-button.js';
 import { Menu, MenuOptions, MenuOption, MenuTrigger } from 'react-native-popup-menu';
 import { _ } from 'lib/locale.js';
 import { Setting } from 'lib/models/setting.js';
@@ -143,8 +144,9 @@ class ScreenHeaderComponent extends Component {
 		this.props.dispatch({ type: 'SIDE_MENU_TOGGLE' });
 	}
 
-	backButton_press() {
-		this.props.dispatch({ type: 'NAV_BACK' });
+	async backButton_press() {
+		await BackButtonService.back();
+		//this.props.dispatch({ type: 'NAV_BACK' });
 	}
 
 	searchButton_press() {

ReactNativeClient/lib/components/screens/note.js

@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
-import { BackHandler, View, Button, TextInput, WebView, Text, StyleSheet, Linking, Image } from 'react-native';
+import { Keyboard, BackHandler, View, Button, TextInput, WebView, Text, StyleSheet, Linking, Image } from 'react-native';
 import { connect } from 'react-redux'
 import { uuid } from 'lib/uuid.js';
 import { Log } from 'lib/log.js'
 import { Note } from 'lib/models/note.js'
 import { Resource } from 'lib/models/resource.js'
 import { Folder } from 'lib/models/folder.js'
+import { BackButtonService } from 'lib/services/back-button.js';
 import { BaseModel } from 'lib/base-model.js'
 import { ActionButton } from 'lib/components/action-button.js';
 import Icon from 'react-native-vector-icons/Ionicons';
@@ -48,24 +49,35 @@ class NoteScreenComponent extends BaseScreenComponent {
 
 		this.styles_ = {};
 
-		// Disabled for now because it doesn't work consistently and proabably interfer with the backHandler
-		// on root.js. Handling of the back button should be in one single place for this to work well.
+		this.backHandler = async () => {
+			if (this.isModified()) {
+				let buttonId = await dialogs.pop(this, _('This note has been modified:'), [
+					{ title: _('Save changes'), id: 'save' },
+					{ title: _('Discard changes'), id: 'discard' },
+					{ title: _('Cancel'), id: 'cancel' },
+				]);
 
-		// this.backHandler = () => {
-		// 	if (!this.state.note.id) {
-		// 		return false;
-		// 	}
+				if (buttonId == 'cancel') return true;
+				if (buttonId == 'save') await this.saveNoteButton_press();
+			}
 
-		// 	if (this.state.mode == 'edit') {
-		// 		this.setState({
-		// 			note: Object.assign({}, this.state.lastSavedNote),
-		// 			mode: 'view',
-		// 		});
-		// 		return true;
-		// 	}
+			if (!this.state.note.id) {
+				return false;
+			}
 
-		// 	return false;
-		// };
+			if (this.state.mode == 'edit') {
+				Keyboard.dismiss()
+
+				this.setState({
+					note: Object.assign({}, this.state.lastSavedNote),
+					mode: 'view',
+				});
+
+				return true;
+			}
+
+			return false;
+		};
 	}
 
 	styles() {
@@ -123,7 +135,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 	}
 
 	async componentWillMount() {
-		// BackHandler.addEventListener('hardwareBackPress', this.backHandler);
+		BackButtonService.addHandler(this.backHandler);
 
 		let note = null;
 		let mode = 'view';
@@ -148,7 +160,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 	}
 
 	componentWillUnmount() {
-		// BackHandler.removeEventListener('hardwareBackPress', this.backHandler);
+		BackButtonService.removeHandler(this.backHandler);
 	}
 
 	noteComponent_change(propName, propValue) {

ReactNativeClient/lib/dialogs.js

@@ -32,6 +32,30 @@ dialogs.confirm = (parentComponent, message) => {
 	});
 };
 
+dialogs.pop = (parentComponent, message, buttons) => {
+	if (!'dialogbox' in parentComponent) throw new Error('A "dialogbox" component must be defined on the parent component!');
+
+	return new Promise((resolve, reject) => {
+		Keyboard.dismiss();
+
+		let btns = [];
+		for (let i = 0; i < buttons.length; i++) {
+			btns.push({
+				text: buttons[i].title,
+				callback: () => {
+					parentComponent.dialogbox.close();
+					resolve(buttons[i].id);
+				},
+			});
+		}
+
+		parentComponent.dialogbox.pop({
+			content: message, 
+			btns: btns,
+		});
+	});
+}
+
 dialogs.error = (parentComponent, message) => {
 	Keyboard.dismiss();
 	return parentComponent.dialogbox.alert(message);

ReactNativeClient/lib/services/back-button.js

@@ -0,0 +1,43 @@
+import { BackHandler } from 'react-native';
+
+class BackButtonService {
+
+	static initialize(defaultHandler) {
+		this.defaultHandler_ = defaultHandler;
+
+		BackHandler.addEventListener('hardwareBackPress', async () => {
+			return this.back();
+		});
+	}
+
+	static async back() {
+		if (this.handlers_.length) {
+			let r = await this.handlers_[this.handlers_.length - 1]();
+			if (r) return r;
+		}
+
+		return await this.defaultHandler_();
+	}
+
+	static addHandler(handler) {
+		for (let i = this.handlers_.length - 1; i >= 0; i--) {
+			const h = this.handlers_[i];
+			if (h === handler) return;
+		}
+
+		return this.handlers_.push(handler);
+	}
+
+	static removeHandler(hanlder) {
+		for (let i = this.handlers_.length - 1; i >= 0; i--) {
+			const h = this.handlers_[i];
+			if (h === hanlder) this.handlers_.splice(i, 1);
+		}
+	}
+
+}
+
+BackButtonService.defaultHandler_ = null;
+BackButtonService.handlers_ = [];
+
+export { BackButtonService };

ReactNativeClient/root.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
-import { BackHandler, Keyboard, NativeModules } from 'react-native';
+import { Keyboard, NativeModules } from 'react-native';
 import { connect, Provider } from 'react-redux'
+import { BackButtonService } from 'lib/services/back-button.js';
 import { createStore, applyMiddleware } from 'redux';
 import { shimInit } from 'lib/shim-init-react.js';
 import { Log } from 'lib/log.js'
@@ -497,9 +498,7 @@ async function initialize(dispatch, backButtonHandler) {
 		reg.logger().error('Initialization error:', error);
 	}
 
-	BackHandler.addEventListener('hardwareBackPress', () => {
-		return backButtonHandler();
-	});
+	BackButtonService.initialize(backButtonHandler);
 
 	reg.setupRecurrentSync();
 
@@ -535,7 +534,7 @@ class AppComponent extends React.Component {
 		}
 	}
 
-	backButtonHandler() {
+	async backButtonHandler() {
 		if (this.props.showSideMenu) {
 			this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
 			return true;