Mobile: Refactored and made dialog boxes more reliable

ReactNativeClient/lib/components/dialogs.tsx

@@ -0,0 +1,103 @@
+const React = require('react');
+const { forwardRef,useState, useImperativeHandle } = require('react');
+const RnDialog = require('react-native-dialog').default;
+const { View } = require('react-native');
+const { _ } = require('lib/locale');
+
+let dialogRef_:any = null;
+
+export function initializeDialogs(ref:any) {
+	dialogRef_ = ref;
+}
+
+export const Dialog = forwardRef(function(_props:any, ref:any) {
+	const [visible, setVisible] = useState(false);
+	const [type, setType] = useState('');
+	const [message, setMessage] = useState('');
+	const [buttons, setButtons] = useState([]);
+	const [resultPromise, setResultPromise] = useState({});
+
+	function dialogTitle(type:string) {
+		if (type === 'info') return _('Information');
+		if (type === 'error') return _('Error');
+		return '';
+	}
+
+	useImperativeHandle(ref, () => {
+		return {
+			show: async function(type:string, message:string, buttons:any[] = null) {
+				// Shouldn't happen but just to be sure throw an error in this case
+				if (visible) throw new Error('Only one dialog can be visible at a time');
+
+				setVisible(true);
+				setType(type);
+				setMessage(message);
+				setButtons(buttons);
+
+				return new Promise((resolve, reject) => {
+					setResultPromise({
+						resolve: resolve,
+						reject: reject,
+					});
+				});
+			},
+		};
+	});
+
+	function onPress(event:any) {
+		setVisible(false);
+		resultPromise.resolve(event ? event.value : true);
+	}
+
+	function renderTitle() {
+		const title = dialogTitle(type);
+		if (!title) return null;
+		return <RnDialog.Title>{title}</RnDialog.Title>;
+	}
+
+	function renderButtons() {
+		const output = [];
+
+		if (type === 'confirm') {
+			output.push(<RnDialog.Button key="ok" label={_('OK')} onPress={() => onPress({ value: true })} />);
+			output.push(<RnDialog.Button key="cancel" label={_('Cancel')}  onPress={() => onPress({ value: false })} />);
+		}
+
+		if (type === 'info' || type === 'error') {
+			output.push(<RnDialog.Button key="ok" label={_('OK')} onPress={onPress} />);
+		}
+
+		if (type === 'pop') {
+			for (const button of buttons) {
+				output.push(<RnDialog.Button key={button.text} label={button.text} onPress={() => onPress({ value: button.id })} />);
+			}
+		}
+
+		return output;
+	}
+
+	return (
+		<View>
+			<RnDialog.Container visible={visible}>
+				{renderTitle()}
+				<RnDialog.Description>{message}</RnDialog.Description>
+				{renderButtons()}
+			</RnDialog.Container>
+		</View>
+	);
+});
+
+export default {
+	confirm: async function(message:string) {
+		return dialogRef_.current.show('confirm', message);
+	},
+	pop: async function(message:string, buttons:any[]) {
+		return dialogRef_.current.show('pop', message, buttons);
+	},
+	error: async function(message:string) {
+		return dialogRef_.current.show('error', message);
+	},
+	info: async function(message:string) {
+		return dialogRef_.current.show('info', message);
+	},
+};

ReactNativeClient/lib/components/screen-header.js

@@ -12,8 +12,7 @@ const Note = require('lib/models/Note.js');
 const Folder = require('lib/models/Folder.js');
 const { themeStyle } = require('lib/components/global-style.js');
 const { Dropdown } = require('lib/components/Dropdown.js');
-const { dialogs } = require('lib/dialogs.js');
-const DialogBox = require('react-native-dialogbox').default;
+const dialogs = require('lib/components/dialogs.js').default;
 
 Icon.loadFont();
 
@@ -182,7 +181,7 @@ class ScreenHeaderComponent extends React.PureComponent {
 	async deleteButton_press() {
 		// Dialog needs to be displayed as a child of the parent component, otherwise
 		// it won't be visible within the header component.
-		const ok = await dialogs.confirm(this.props.parentComponent, _('Delete these notes?'));
+		const ok = await dialogs.confirm(_('Delete these notes?'));
 		if (!ok) return;
 
 		const noteIds = this.props.selectedNoteIds;
@@ -400,7 +399,7 @@ class ScreenHeaderComponent extends React.PureComponent {
 
 							const folder = await Folder.load(folderId);
 
-							const ok = noteIds.length > 1 ? await dialogs.confirm(this.props.parentComponent, _('Move %d notes to notebook "%s"?', noteIds.length, folder.title)) : true;
+							const ok = noteIds.length > 1 ? await dialogs.confirm(_('Move %d notes to notebook "%s"?', noteIds.length, folder.title)) : true;
 							if (!ok) return;
 
 							this.props.dispatch({ type: 'NOTE_SELECTION_END' });
@@ -480,11 +479,6 @@ class ScreenHeaderComponent extends React.PureComponent {
 					{menuComp}
 				</View>
 				{warningComps}
-				<DialogBox
-					ref={dialogbox => {
-						this.dialogbox = dialogbox;
-					}}
-				/>
 			</View>
 		);
 	}

ReactNativeClient/lib/components/screens/dropbox-login.js

@@ -5,8 +5,7 @@ const { connect } = require('react-redux');
 const { ScreenHeader } = require('lib/components/screen-header.js');
 const { _ } = require('lib/locale.js');
 const { BaseScreenComponent } = require('lib/components/base-screen.js');
-const DialogBox = require('react-native-dialogbox').default;
-const { dialogs } = require('lib/dialogs.js');
+const dialogs = require('lib/components/dialogs.js').default;
 const Shared = require('lib/components/shared/dropbox-login-shared');
 const { themeStyle } = require('lib/components/global-style.js');
 
@@ -16,7 +15,7 @@ class DropboxLoginScreenComponent extends BaseScreenComponent {
 
 		this.styles_ = {};
 
-		this.shared_ = new Shared(this, msg => dialogs.info(this, msg), msg => dialogs.error(this, msg));
+		this.shared_ = new Shared(this, msg => dialogs.info(msg), msg => dialogs.error(msg));
 	}
 
 	UNSAFE_componentWillMount() {
@@ -66,12 +65,6 @@ class DropboxLoginScreenComponent extends BaseScreenComponent {
 					{/* Add this extra padding to make sure the view is scrollable when the keyboard is visible on small screens (iPhone SE) */}
 					<View style={{ height: 200 }}></View>
 				</ScrollView>
-
-				<DialogBox
-					ref={dialogbox => {
-						this.dialogbox = dialogbox;
-					}}
-				/>
 			</View>
 		);
 	}

ReactNativeClient/lib/components/screens/encryption-config.js

@@ -9,8 +9,7 @@ const { BaseScreenComponent } = require('lib/components/base-screen.js');
 const { themeStyle } = require('lib/components/global-style.js');
 const { time } = require('lib/time-utils.js');
 const shared = require('lib/components/shared/encryption-config-shared.js');
-const { dialogs } = require('lib/dialogs.js');
-const DialogBox = require('react-native-dialogbox').default;
+const dialogs = require('lib/components/dialogs.js').default;
 
 class EncryptionConfigScreenComponent extends BaseScreenComponent {
 	static navigationOptions() {
@@ -141,7 +140,7 @@ class EncryptionConfigScreenComponent extends BaseScreenComponent {
 				await EncryptionService.instance().generateMasterKeyAndEnableEncryption(password);
 				this.setState({ passwordPromptShow: false });
 			} catch (error) {
-				await dialogs.error(this, error.message);
+				await dialogs.error(error.message);
 			}
 		};
 
@@ -212,13 +211,13 @@ class EncryptionConfigScreenComponent extends BaseScreenComponent {
 
 		const onToggleButtonClick = async () => {
 			if (this.props.encryptionEnabled) {
-				const ok = await dialogs.confirm(this, _('Disabling encryption means *all* your notes and attachments are going to be re-synchronised and sent unencrypted to the sync target. Do you wish to continue?'));
+				const ok = await dialogs.confirm(_('Disabling encryption means *all* your notes and attachments are going to be re-synchronised and sent unencrypted to the sync target. Do you wish to continue?'));
 				if (!ok) return;
 
 				try {
 					await EncryptionService.instance().disableEncryption();
 				} catch (error) {
-					await dialogs.error(this, error.message);
+					await dialogs.error(error.message);
 				}
 			} else {
 				this.setState({
@@ -285,11 +284,6 @@ class EncryptionConfigScreenComponent extends BaseScreenComponent {
 					{nonExistingMasterKeySection}
 					<View style={{ flex: 1, height: 20 }}></View>
 				</ScrollView>
-				<DialogBox
-					ref={dialogbox => {
-						this.dialogbox = dialogbox;
-					}}
-				/>
 			</View>
 		);
 	}

ReactNativeClient/lib/components/screens/folder.js

@@ -6,7 +6,7 @@ const Folder = require('lib/models/Folder.js');
 const BaseModel = require('lib/BaseModel.js');
 const { ScreenHeader } = require('lib/components/screen-header.js');
 const { BaseScreenComponent } = require('lib/components/base-screen.js');
-const { dialogs } = require('lib/dialogs.js');
+const dialogs = require('lib/components/dialogs.js').default;
 const { themeStyle } = require('lib/components/global-style.js');
 const { _ } = require('lib/locale.js');
 
@@ -84,7 +84,7 @@ class FolderScreenComponent extends BaseScreenComponent {
 		try {
 			folder = await Folder.save(folder, { userSideValidation: true });
 		} catch (error) {
-			dialogs.error(this, _('The notebook could not be saved: %s', error.message));
+			dialogs.error(_('The notebook could not be saved: %s', error.message));
 			return;
 		}
 
@@ -108,11 +108,6 @@ class FolderScreenComponent extends BaseScreenComponent {
 			<View style={this.rootStyle(this.props.theme).root}>
 				<ScreenHeader title={_('Edit notebook')} showSaveButton={true} saveButtonDisabled={saveButtonDisabled} onSaveButtonPress={() => this.saveFolderButton_press()} showSideMenuButton={false} showSearchButton={false} />
 				<TextInput placeholder={_('Enter notebook title')} placeholderTextColor={theme.colorFaded} underlineColorAndroid={theme.dividerColor} selectionColor={theme.textSelectionColor} keyboardAppearance={theme.keyboardAppearance} style={this.styles().textInput} autoFocus={true} value={this.state.folder.title} onChangeText={text => this.title_changeText(text)} />
-				<dialogs.DialogBox
-					ref={dialogbox => {
-						this.dialogbox = dialogbox;
-					}}
-				/>
 			</View>
 		);
 	}

ReactNativeClient/lib/components/screens/note.js

@@ -29,8 +29,7 @@ const { shim } = require('lib/shim.js');
 const ResourceFetcher = require('lib/services/ResourceFetcher');
 const { BaseScreenComponent } = require('lib/components/base-screen.js');
 const { themeStyle, editorFont } = require('lib/components/global-style.js');
-const { dialogs } = require('lib/dialogs.js');
-const DialogBox = require('react-native-dialogbox').default;
+const dialogs = require('lib/components/dialogs.js').default;
 const { NoteBodyViewer } = require('lib/components/note-body-viewer.js');
 const { DocumentPicker, DocumentPickerUtil } = require('react-native-document-picker');
 const ImageResizer = require('react-native-image-resizer').default;
@@ -90,7 +89,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 
 		const saveDialog = async () => {
 			if (this.isModified()) {
-				const buttonId = await dialogs.pop(this, _('This note has been modified:'), [{ text: _('Save changes'), id: 'save' }, { text: _('Discard changes'), id: 'discard' }, { text: _('Cancel'), id: 'cancel' }]);
+				const buttonId = await dialogs.pop(_('This note has been modified:'), [{ text: _('Save changes'), id: 'save' }, { text: _('Discard changes'), id: 'discard' }, { text: _('Cancel'), id: 'cancel' }]);
 
 				if (buttonId == 'cancel') return true;
 				if (buttonId == 'save') await this.saveNoteButton_press();
@@ -185,7 +184,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 					}
 				}
 			} catch (error) {
-				dialogs.error(this, error.message);
+				dialogs.error(error.message);
 			}
 		};
 
@@ -398,7 +397,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		const note = this.state.note;
 		if (!note.id) return;
 
-		const ok = await dialogs.confirm(this, _('Delete note?'));
+		const ok = await dialogs.confirm(_('Delete note?'));
 		if (!ok) return;
 
 		const folderId = note.parent_id;
@@ -460,7 +459,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		let mustResize = dimensions.width > maxSize || dimensions.height > maxSize;
 
 		if (mustResize) {
-			const buttonId = await dialogs.pop(this, _('You are about to attach a large image (%dx%d pixels). Would you like to resize it down to %d pixels before attaching it?', dimensions.width, dimensions.height, maxSize), [
+			const buttonId = await dialogs.pop(_('You are about to attach a large image (%dx%d pixels). Would you like to resize it down to %d pixels before attaching it?', dimensions.width, dimensions.height, maxSize), [
 				{ text: _('Yes'), id: 'yes' },
 				{ text: _('No'), id: 'no' },
 				{ text: _('Cancel'), id: 'cancel' },
@@ -555,7 +554,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 				if (!done) return;
 			} else {
 				if (fileType === 'image') {
-					dialogs.error(this, _('Unsupported image type: %s', mimeType));
+					dialogs.error(_('Unsupported image type: %s', mimeType));
 					return;
 				} else {
 					await shim.fsDriver().copy(localFilePath, targetPath);
@@ -569,7 +568,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 			}
 		} catch (error) {
 			reg.logger().warn('Could not attach file:', error);
-			await dialogs.error(this, error.message);
+			await dialogs.error(error.message);
 			return;
 		}
 
@@ -681,7 +680,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 			Linking.openURL(url);
 		} catch (error) {
 			this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
-			await dialogs.error(this, error.message);
+			await dialogs.error(error.message);
 		}
 	}
 
@@ -692,7 +691,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		try {
 			Linking.openURL(note.source_url);
 		} catch (error) {
-			await dialogs.error(this, error.message);
+			await dialogs.error(error.message);
 		}
 	}
 
@@ -752,7 +751,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 			output.push({
 				title: _('Attach...'),
 				onPress: async () => {
-					const buttonId = await dialogs.pop(this, _('Choose an option'), [{ text: _('Take photo'), id: 'takePhoto' }, { text: _('Attach photo'), id: 'attachPhoto' }, { text: _('Attach any file'), id: 'attachFile' }]);
+					const buttonId = await dialogs.pop(_('Choose an option'), [{ text: _('Take photo'), id: 'takePhoto' }, { text: _('Attach photo'), id: 'attachPhoto' }, { text: _('Attach any file'), id: 'attachFile' }]);
 
 					if (buttonId === 'takePhoto') this.takePhoto_onPress();
 					if (buttonId === 'attachPhoto') this.attachPhoto_onPress();
@@ -1082,12 +1081,6 @@ class NoteScreenComponent extends BaseScreenComponent {
 				{!Setting.value('editor.beta') && actionButtonComp}
 
 				<SelectDateTimeDialog shown={this.state.alarmDialogShown} date={dueDate} onAccept={this.onAlarmDialogAccept} onReject={this.onAlarmDialogReject} />
-
-				<DialogBox
-					ref={dialogbox => {
-						this.dialogbox = dialogbox;
-					}}
-				/>
 				{noteTagDialog}
 			</View>
 		);

ReactNativeClient/lib/components/screens/notes.js

@@ -12,8 +12,7 @@ const { themeStyle } = require('lib/components/global-style.js');
 const { ScreenHeader } = require('lib/components/screen-header.js');
 const { _ } = require('lib/locale.js');
 const { ActionButton } = require('lib/components/action-button.js');
-const { dialogs } = require('lib/dialogs.js');
-const DialogBox = require('react-native-dialogbox').default;
+const dialogs = require('lib/components/dialogs.js').default;
 const { BaseScreenComponent } = require('lib/components/base-screen.js');
 const { BackButtonService } = require('lib/services/back-button.js');
 
@@ -64,17 +63,17 @@ class NotesScreenComponent extends BaseScreenComponent {
 				id: { name: 'showCompletedTodos', value: !Setting.value('showCompletedTodos') },
 			});
 
-			const r = await dialogs.pop(this, Setting.settingMetadata('notes.sortOrder.field').label(), buttons);
+			const r = await dialogs.pop(Setting.settingMetadata('notes.sortOrder.field').label(), buttons);
 			if (!r) return;
 
 			Setting.setValue(r.name, r.value);
 		};
 
 		this.backHandler = () => {
-			if (this.dialogbox.state.isVisible) {
-				this.dialogbox.close();
-				return true;
-			}
+			// if (this.dialogbox.state.isVisible) {
+			// 	this.dialogbox.close();
+			// 	return true;
+			// }
 			return false;
 		};
 	}
@@ -151,7 +150,7 @@ class NotesScreenComponent extends BaseScreenComponent {
 	}
 
 	deleteFolder_onPress(folderId) {
-		dialogs.confirm(this, _('Delete notebook? All notes and sub-notebooks within this notebook will also be deleted.')).then(ok => {
+		dialogs.confirm(_('Delete notebook? All notes and sub-notebooks within this notebook will also be deleted.')).then(ok => {
 			if (!ok) return;
 
 			Folder.delete(folderId)
@@ -236,11 +235,7 @@ class NotesScreenComponent extends BaseScreenComponent {
 				<ScreenHeader title={title} showBackButton={false} parentComponent={thisComp} sortButton_press={this.sortButton_press} folderPickerOptions={this.folderPickerOptions()} showSearchButton={true} showSideMenuButton={true} />
 				<NoteList style={this.styles().noteList} />
 				{actionButtonComp}
-				<DialogBox
-					ref={dialogbox => {
-						this.dialogbox = dialogbox;
-					}}
-				/>
+
 			</View>
 		);
 	}

ReactNativeClient/lib/components/screens/search.js

@@ -10,7 +10,6 @@ const { NoteItem } = require('lib/components/note-item.js');
 const { BaseScreenComponent } = require('lib/components/base-screen.js');
 const { themeStyle } = require('lib/components/global-style.js');
 const SearchEngineUtils = require('lib/services/SearchEngineUtils');
-const DialogBox = require('react-native-dialogbox').default;
 
 Icon.loadFont();
 
@@ -190,11 +189,6 @@ class SearchScreenComponent extends BaseScreenComponent {
 
 					<FlatList data={this.state.notes} keyExtractor={(item) => item.id} renderItem={event => <NoteItem note={event.item} />} />
 				</View>
-				<DialogBox
-					ref={dialogbox => {
-						this.dialogbox = dialogbox;
-					}}
-				/>
 			</View>
 		);
 	}