Chore: Migrate back-button.js to TypeScript (#11087)

.eslintignore

@@ -728,6 +728,7 @@ packages/app-mobile/root.js
 packages/app-mobile/services/AlarmServiceDriver.android.js
 packages/app-mobile/services/AlarmServiceDriver.ios.js
 packages/app-mobile/services/AlarmServiceDriver.web.js
+packages/app-mobile/services/BackButtonService.js
 packages/app-mobile/services/e2ee/RSA.react-native.js
 packages/app-mobile/services/plugins/PlatformImplementation.js
 packages/app-mobile/services/profiles/index.js

.gitignore

@@ -705,6 +705,7 @@ packages/app-mobile/root.js
 packages/app-mobile/services/AlarmServiceDriver.android.js
 packages/app-mobile/services/AlarmServiceDriver.ios.js
 packages/app-mobile/services/AlarmServiceDriver.web.js
+packages/app-mobile/services/BackButtonService.js
 packages/app-mobile/services/e2ee/RSA.react-native.js
 packages/app-mobile/services/plugins/PlatformImplementation.js
 packages/app-mobile/services/profiles/index.js

packages/app-mobile/components/BackButtonDialogBox.ts

@@ -1,4 +1,4 @@
-const { BackButtonService } = require('../services/back-button.js');
+import BackButtonService from '../services/BackButtonService';
 const DialogBox = require('react-native-dialogbox').default;
 
 export default class BackButtonDialogBox extends DialogBox {

packages/app-mobile/components/ScreenHeader/index.tsx

@@ -3,7 +3,7 @@ import { PureComponent, ReactElement } from 'react';
 import { connect } from 'react-redux';
 import { View, Text, StyleSheet, TouchableOpacity, Image, ViewStyle, Platform } from 'react-native';
 const Icon = require('react-native-vector-icons/Ionicons').default;
-const { BackButtonService } = require('../../services/back-button.js');
+import BackButtonService from '../../services/BackButtonService';
 import NavService from '@joplin/lib/services/NavService';
 import { _, _n } from '@joplin/lib/locale';
 import Note from '@joplin/lib/models/Note';

packages/app-mobile/components/screens/ConfigScreen/ConfigScreen.tsx

@@ -7,7 +7,7 @@ import checkPermissions from '../../../utils/checkPermissions';
 import setIgnoreTlsErrors from '../../../utils/TlsUtils';
 import { reg } from '@joplin/lib/registry';
 import { State } from '@joplin/lib/reducer';
-const { BackButtonService } = require('../../../services/back-button.js');
+import BackButtonService from '../../../services/BackButtonService';
 import { connect } from 'react-redux';
 import ScreenHeader from '../../ScreenHeader';
 import { _ } from '@joplin/lib/locale';

packages/app-mobile/components/screens/Note.tsx

@@ -6,7 +6,7 @@ import UndoRedoService from '@joplin/lib/services/UndoRedoService';
 import NoteBodyViewer from '../NoteBodyViewer/NoteBodyViewer';
 import checkPermissions from '../../utils/checkPermissions';
 import NoteEditor from '../NoteEditor/NoteEditor';
-const React = require('react');
+import * as React from 'react';
 import { Keyboard, View, TextInput, StyleSheet, Linking, Share, NativeSyntheticEvent } from 'react-native';
 import { Platform, PermissionsAndroid } from 'react-native';
 import { connect } from 'react-redux';
@@ -17,7 +17,7 @@ import Resource from '@joplin/lib/models/Resource';
 import Folder from '@joplin/lib/models/Folder';
 const Clipboard = require('@react-native-clipboard/clipboard').default;
 const md5 = require('md5');
-const { BackButtonService } = require('../../services/back-button.js');
+import BackButtonService from '../../services/BackButtonService';
 import NavService, { OnNavigateCallback as OnNavigateCallback } from '@joplin/lib/services/NavService';
 import { ModelType } from '@joplin/lib/BaseModel';
 import FloatingActionButton from '../buttons/FloatingActionButton';

packages/app-mobile/components/screens/Notes.tsx

@@ -13,8 +13,8 @@ import { _ } from '@joplin/lib/locale';
 import ActionButton from '../buttons/FloatingActionButton';
 const { dialogs } = require('../../utils/dialogs.js');
 const DialogBox = require('react-native-dialogbox').default;
+import BackButtonService from '../../services/BackButtonService';
 import { BaseScreenComponent } from '../base-screen';
-const { BackButtonService } = require('../../services/back-button.js');
 import { AppState } from '../../utils/types';
 import { FolderEntity, NoteEntity, TagEntity } from '@joplin/lib/services/database/types';
 import { itemIsInTrash } from '@joplin/lib/services/trash';

packages/app-mobile/root.tsx

@@ -37,7 +37,7 @@ const AlarmServiceDriver = require('./services/AlarmServiceDriver').default;
 const SafeAreaView = require('./components/SafeAreaView');
 const { connect, Provider } = require('react-redux');
 import { Provider as PaperProvider, MD3DarkTheme, MD3LightTheme } from 'react-native-paper';
-const { BackButtonService } = require('./services/back-button.js');
+import BackButtonService from './services/BackButtonService';
 import NavService from '@joplin/lib/services/NavService';
 import { createStore, applyMiddleware, Dispatch } from 'redux';
 import reduxSharedMiddleware from '@joplin/lib/components/shared/reduxSharedMiddleware';

packages/app-mobile/services/BackButtonService.ts

@@ -0,0 +1,42 @@
+import { BackHandler } from 'react-native';
+
+type BackButtonHandler = ()=> boolean|Promise<boolean>;
+
+export default class BackButtonService {
+	private static handlers_: BackButtonHandler[] = [];
+	private static defaultHandler_: BackButtonHandler;
+
+	public static initialize(defaultHandler: BackButtonHandler) {
+		this.defaultHandler_ = defaultHandler;
+
+		BackHandler.addEventListener('hardwareBackPress', () => {
+			void this.back();
+			return true;
+		});
+	}
+
+	public static async back() {
+		if (this.handlers_.length) {
+			const r = await this.handlers_[this.handlers_.length - 1]();
+			if (r) return r;
+		}
+
+		return await this.defaultHandler_();
+	}
+
+	public static addHandler(handler: BackButtonHandler) {
+		for (let i = this.handlers_.length - 1; i >= 0; i--) {
+			const h = this.handlers_[i];
+			if (h === handler) return false;
+		}
+
+		this.handlers_.push(handler);
+		return true;
+	}
+
+	public static removeHandler(handler: BackButtonHandler) {
+		this.handlers_ = this.handlers_.filter(h => h !== handler);
+	}
+}
+
+