Chore: Mobile: Convert note-list.js to NoteList.tsx (#8064)

.eslintignore

@@ -396,6 +396,7 @@ packages/app-mobile/components/NoteEditor/NoteEditor.js
 packages/app-mobile/components/NoteEditor/SearchPanel.js
 packages/app-mobile/components/NoteEditor/SelectionFormatting.js
 packages/app-mobile/components/NoteEditor/types.js
+packages/app-mobile/components/NoteList.js
 packages/app-mobile/components/ProfileSwitcher/ProfileEditor.js
 packages/app-mobile/components/ProfileSwitcher/ProfileSwitcher.js
 packages/app-mobile/components/ProfileSwitcher/useProfileConfig.js

.gitignore

@@ -383,6 +383,7 @@ packages/app-mobile/components/NoteEditor/NoteEditor.js
 packages/app-mobile/components/NoteEditor/SearchPanel.js
 packages/app-mobile/components/NoteEditor/SelectionFormatting.js
 packages/app-mobile/components/NoteEditor/types.js
+packages/app-mobile/components/NoteList.js
 packages/app-mobile/components/ProfileSwitcher/ProfileEditor.js
 packages/app-mobile/components/ProfileSwitcher/ProfileSwitcher.js
 packages/app-mobile/components/ProfileSwitcher/useProfileConfig.js

packages/app-mobile/components/NoteList.tsx

@@ -1,15 +1,32 @@
 const React = require('react');
-const Component = React.Component;
+
-const { connect } = require('react-redux');
+import { Component } from 'react';
-const { FlatList, Text, StyleSheet, Button, View } = require('react-native');
+
+import { connect } from 'react-redux';
+import { FlatList, Text, StyleSheet, Button, View } from 'react-native';
+import { FolderEntity, NoteEntity } from '@joplin/lib/services/database/types';
+import { AppState } from '../utils/types';
+
 const { _ } = require('@joplin/lib/locale');
 const { NoteItem } = require('./note-item.js');
-const time = require('@joplin/lib/time').default;
 const { themeStyle } = require('./global-style.js');
 
-class NoteListComponent extends Component {
+interface NoteListProps {
-	constructor() {
+	themeId: string;
-		super();
+	dispatch: (action: any)=> void;
+	notesSource: string;
+	items: NoteEntity[];
+	folders: FolderEntity[];
+	noteSelectionEnabled?: boolean;
+	selectedFolderId?: string;
+}
+
+class NoteListComponent extends Component<NoteListProps> {
+	private rootRef_: FlatList;
+	private styles_: Record<string, StyleSheet.NamedStyles<any>>;
+
+	public constructor(props: NoteListProps) {
+		super(props);
 
 		this.state = {
 			items: [],
@@ -21,7 +38,7 @@ class NoteListComponent extends Component {
 		this.createNotebookButton_click = this.createNotebookButton_click.bind(this);
 	}
 
-	styles() {
+	private styles() {
 		const themeId = this.props.themeId;
 		const theme = themeStyle(themeId);
 
@@ -47,7 +64,7 @@ class NoteListComponent extends Component {
 		return this.styles_[themeId];
 	}
 
-	createNotebookButton_click() {
+	private createNotebookButton_click() {
 		this.props.dispatch({
 			type: 'NAV_GO',
 			routeName: 'Folder',
@@ -55,34 +72,14 @@ class NoteListComponent extends Component {
 		});
 	}
 
-	filterNotes(notes) {
+	public UNSAFE_componentWillReceiveProps(newProps: NoteListProps) {
-		const todoFilter = 'all'; // Setting.value('todoFilter');
-		if (todoFilter === 'all') return notes;
-
-		const now = time.unixMs();
-		const maxInterval = 1000 * 60 * 60 * 24;
-		const notRecentTime = now - maxInterval;
-
-		const output = [];
-		for (let i = 0; i < notes.length; i++) {
-			const note = notes[i];
-			if (note.is_todo) {
-				if (todoFilter === 'recent' && note.user_updated_time < notRecentTime && !!note.todo_completed) continue;
-				if (todoFilter === 'nonCompleted' && !!note.todo_completed) continue;
-			}
-			output.push(note);
-		}
-		return output;
-	}
-
-	UNSAFE_componentWillReceiveProps(newProps) {
 		// Make sure scroll position is reset when switching from one folder to another or to a tag list.
 		if (this.rootRef_ && newProps.notesSource !== this.props.notesSource) {
 			this.rootRef_.scrollToOffset({ offset: 0, animated: false });
 		}
 	}
 
-	render() {
+	public render() {
 		// `enableEmptySections` is to fix this warning: https://github.com/FaridSafi/react-native-gifted-listview/issues/39
 
 		if (this.props.items.length) {
@@ -109,7 +106,7 @@ class NoteListComponent extends Component {
 	}
 }
 
-const NoteList = connect(state => {
+const NoteList = connect((state: AppState) => {
 	return {
 		items: state.notes,
 		folders: state.folders,
@@ -119,4 +116,4 @@ const NoteList = connect(state => {
 	};
 })(NoteListComponent);
 
-module.exports = { NoteList };
+export default NoteList;

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

@@ -2,7 +2,7 @@ const React = require('react');
 import { AppState as RNAppState, View, StyleSheet, NativeEventSubscription } from 'react-native';
 import { stateUtils } from '@joplin/lib/reducer';
 import { connect } from 'react-redux';
-const { NoteList } = require('../note-list.js');
+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';
@@ -254,7 +254,7 @@ class NotesScreenComponent extends BaseScreenComponent<any> {
 		return (
 			<View style={rootStyle}>
 				<ScreenHeader title={iconString + title} showBackButton={false} parentComponent={thisComp} sortButton_press={this.sortButton_press} folderPickerOptions={this.folderPickerOptions()} showSearchButton={true} showSideMenuButton={true} />
-				<NoteList style={this.styles().noteList} />
+				<NoteList />
 				{actionButtonComp}
 				<DialogBox
 					ref={(dialogbox: any) => {