Chore: Mobile: Improve Notes screen type safety (#11093)

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

@@ -36,6 +36,13 @@ const PADDING_V = 10;
 
 type OnPressCallback=()=> void;
 
+export interface FolderPickerOptions {
+	enabled: boolean;
+	selectedFolderId?: string;
+	onValueChange?: OnValueChangedListener;
+	mustSelect?: boolean;
+}
+
 interface ScreenHeaderProps {
 	selectedNoteIds: string[];
 	selectedFolderId: string;
@@ -49,12 +56,7 @@ interface ScreenHeaderProps {
 	menuOptions: MenuOptionType[];
 	title?: string|null;
 	folders: FolderEntity[];
-	folderPickerOptions?: {
-		enabled: boolean;
-		selectedFolderId?: string;
-		onValueChange?: OnValueChangedListener;
-		mustSelect?: boolean;
-	};
+	folderPickerOptions?: FolderPickerOptions;
 	plugins: PluginStates;
 
 	dispatch: Dispatch;

packages/app-mobile/components/app-nav.tsx

@@ -115,7 +115,7 @@ class AppNavComponent extends Component<Props, State> {
 				behavior={Platform.OS === 'ios' ? 'padding' : null}
 				style={style}
 			>
-				<NotesScreen visible={notesScreenVisible} navigation={{ state: route }} />
+				<NotesScreen visible={notesScreenVisible} />
 				{searchScreenLoaded && <SearchScreen visible={searchScreenVisible} navigation={{ state: route }} />}
 				{!notesScreenVisible && !searchScreenVisible && <Screen navigation={{ state: route }} themeId={this.props.themeId} dispatch={this.props.dispatch} />}
 				<View style={{ height: this.state.autoCompletionBarExtraHeight }} />

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

@@ -1,41 +1,73 @@
-const React = require('react');
-import { AppState as RNAppState, View, StyleSheet, NativeEventSubscription } from 'react-native';
+import * as React from 'react';
+import { AppState as RNAppState, View, StyleSheet, NativeEventSubscription, ViewStyle, TextStyle } from 'react-native';
 import { stateUtils } from '@joplin/lib/reducer';
 import { connect } from 'react-redux';
 import NoteList from '../NoteList';
 import Folder from '@joplin/lib/models/Folder';
 import Tag from '@joplin/lib/models/Tag';
-import Note from '@joplin/lib/models/Note';
+import Note, { PreviewsOrder } from '@joplin/lib/models/Note';
 import Setting from '@joplin/lib/models/Setting';
 import { themeStyle } from '../global-style';
-import { ScreenHeader } from '../ScreenHeader';
+import { FolderPickerOptions, ScreenHeader } from '../ScreenHeader';
 import { _ } from '@joplin/lib/locale';
 import ActionButton from '../buttons/FloatingActionButton';
 const { dialogs } = require('../../utils/dialogs.js');
 const DialogBox = require('react-native-dialogbox').default;
-const { BaseScreenComponent } = require('../base-screen');
+import { BaseScreenComponent } from '../base-screen';
 const { BackButtonService } = require('../../services/back-button.js');
 import { AppState } from '../../utils/types';
-import { NoteEntity } from '@joplin/lib/services/database/types';
+import { FolderEntity, NoteEntity, TagEntity } from '@joplin/lib/services/database/types';
 import { itemIsInTrash } from '@joplin/lib/services/trash';
 import AccessibleView from '../accessibility/AccessibleView';
+import { Dispatch } from 'redux';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-class NotesScreenComponent extends BaseScreenComponent<any> {
+interface Props {
+	dispatch: Dispatch;
+
+	themeId: number;
+	visible: boolean;
+
+	folders: FolderEntity[];
+	tags: TagEntity[];
+	notesSource: string;
+	notesOrder: PreviewsOrder[];
+	uncompletedTodosOnTop: boolean;
+	showCompletedTodos: boolean;
+	noteSelectionEnabled: boolean;
+
+	activeFolderId: string;
+	selectedFolderId: string;
+	selectedTagId: string;
+	selectedSmartFilterId: string;
+	notesParentType: string;
+}
+
+interface State {
+
+}
+
+type Styles = Record<string, ViewStyle|TextStyle>;
+
+class NotesScreenComponent extends BaseScreenComponent<Props, State> {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Partial refactor of old code from before rule was applied
+	private dialogbox: any;
 
 	private onAppStateChangeSub_: NativeEventSubscription = null;
+	private styles_: Record<number, Styles> = {};
+	private folderPickerOptions_: FolderPickerOptions;
 
-	public constructor() {
-		super();
+	public constructor(props: Props) {
+		super(props);
+	}
 
-		this.onAppStateChange_ = async () => {
+	private onAppStateChange_ = async () => {
 		// Force an update to the notes list when app state changes
 		const newProps = { ...this.props };
 		newProps.notesSource = '';
 		await this.refreshNotes(newProps);
 	};
 
-		this.sortButton_press = async () => {
+	private sortButton_press = async () => {
 		const buttons = [];
 		const sortNoteOptions = Setting.enumOptions('notes.sortOrder.field');
 
@@ -73,14 +105,13 @@ class NotesScreenComponent extends BaseScreenComponent<any> {
 		Setting.setValue(r.name, r.value);
 	};
 
-		this.backHandler = () => {
+	private backHandler = () => {
 		if (this.dialogbox && this.dialogbox.state && this.dialogbox.state.isVisible) {
 			this.dialogbox.close();
 			return true;
 		}
 		return false;
 	};
-	}
 
 	public styles() {
 		if (!this.styles_) this.styles_ = {};
@@ -111,15 +142,13 @@ class NotesScreenComponent extends BaseScreenComponent<any> {
 		BackButtonService.removeHandler(this.backHandler);
 	}
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-	public async componentDidUpdate(prevProps: any) {
+	public async componentDidUpdate(prevProps: Props) {
 		if (prevProps.notesOrder !== this.props.notesOrder || prevProps.selectedFolderId !== this.props.selectedFolderId || prevProps.selectedTagId !== this.props.selectedTagId || prevProps.selectedSmartFilterId !== this.props.selectedSmartFilterId || prevProps.notesParentType !== this.props.notesParentType || prevProps.uncompletedTodosOnTop !== this.props.uncompletedTodosOnTop || prevProps.showCompletedTodos !== this.props.showCompletedTodos) {
 			await this.refreshNotes(this.props);
 		}
 	}
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-	public async refreshNotes(props: any = null) {
+	public async refreshNotes(props: Props|null = null) {
 		if (props === null) props = this.props;
 
 		const options = {
@@ -172,8 +201,7 @@ class NotesScreenComponent extends BaseScreenComponent<any> {
 		}
 	};
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-	public parentItem(props: any = null) {
+	public parentItem(props: Props|null = null) {
 		if (!props) props = this.props;
 
 		let output = null;
@@ -305,8 +333,6 @@ const NotesScreen = connect((state: AppState) => {
 		noteSelectionEnabled: state.noteSelectionEnabled,
 		notesOrder: stateUtils.notesOrder(state.settings),
 	};
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-})(NotesScreenComponent as any);
+})(NotesScreenComponent);
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-export default NotesScreen as any;
+export default NotesScreen;

packages/lib/models/Note.ts

@@ -24,11 +24,13 @@ const { isImageMimeType } = require('../resourceUtils');
 const { MarkupToHtml } = require('@joplin/renderer');
 const { ALL_NOTES_FILTER_ID } = require('../reserved-ids');
 
-interface PreviewsOptions {
-	order?: {
+export interface PreviewsOrder {
 	by: string;
 	dir: string;
-	}[];
+}
+
+interface PreviewsOptions {
+	order?: PreviewsOrder[];
 	conditions?: string[];
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
 	conditionsParams?: any[];