Chore: Refactor note list on desktop using React Hooks (#6410)

.eslintignore

@@ -556,12 +556,18 @@ packages/app-desktop/gui/NoteEditor/utils/useWindowCommandHandler.js.map
 packages/app-desktop/gui/NoteList/NoteList.d.ts
 packages/app-desktop/gui/NoteList/NoteList.js
 packages/app-desktop/gui/NoteList/NoteList.js.map
+packages/app-desktop/gui/NoteList/NoteList2.d.ts
+packages/app-desktop/gui/NoteList/NoteList2.js
+packages/app-desktop/gui/NoteList/NoteList2.js.map
 packages/app-desktop/gui/NoteList/commands/focusElementNoteList.d.ts
 packages/app-desktop/gui/NoteList/commands/focusElementNoteList.js
 packages/app-desktop/gui/NoteList/commands/focusElementNoteList.js.map
 packages/app-desktop/gui/NoteList/commands/index.d.ts
 packages/app-desktop/gui/NoteList/commands/index.js
 packages/app-desktop/gui/NoteList/commands/index.js.map
+packages/app-desktop/gui/NoteList/types.d.ts
+packages/app-desktop/gui/NoteList/types.js
+packages/app-desktop/gui/NoteList/types.js.map
 packages/app-desktop/gui/NoteListControls/NoteListControls.d.ts
 packages/app-desktop/gui/NoteListControls/NoteListControls.js
 packages/app-desktop/gui/NoteListControls/NoteListControls.js.map

.gitignore

@@ -546,12 +546,18 @@ packages/app-desktop/gui/NoteEditor/utils/useWindowCommandHandler.js.map
 packages/app-desktop/gui/NoteList/NoteList.d.ts
 packages/app-desktop/gui/NoteList/NoteList.js
 packages/app-desktop/gui/NoteList/NoteList.js.map
+packages/app-desktop/gui/NoteList/NoteList2.d.ts
+packages/app-desktop/gui/NoteList/NoteList2.js
+packages/app-desktop/gui/NoteList/NoteList2.js.map
 packages/app-desktop/gui/NoteList/commands/focusElementNoteList.d.ts
 packages/app-desktop/gui/NoteList/commands/focusElementNoteList.js
 packages/app-desktop/gui/NoteList/commands/focusElementNoteList.js.map
 packages/app-desktop/gui/NoteList/commands/index.d.ts
 packages/app-desktop/gui/NoteList/commands/index.js
 packages/app-desktop/gui/NoteList/commands/index.js.map
+packages/app-desktop/gui/NoteList/types.d.ts
+packages/app-desktop/gui/NoteList/types.js
+packages/app-desktop/gui/NoteList/types.js.map
 packages/app-desktop/gui/NoteListControls/NoteListControls.d.ts
 packages/app-desktop/gui/NoteListControls/NoteListControls.js
 packages/app-desktop/gui/NoteListControls/NoteListControls.js.map

packages/app-desktop/gui/NoteList/NoteList.tsx

@@ -1,3 +1,5 @@
+import * as React from 'react';
+import { useMemo, useEffect, useState, useRef, useCallback } from 'react';
 import { AppState } from '../../app.reducer';
 import eventManager from '@joplin/lib/eventManager';
 import NoteListUtils from '../utils/NoteListUtils';
@@ -11,12 +13,12 @@ import CommandService from '@joplin/lib/services/CommandService';
 import shim from '@joplin/lib/shim';
 import styled from 'styled-components';
 import { themeStyle } from '@joplin/lib/theme';
-const React = require('react');
-
 const { ItemList } = require('../ItemList.min.js');
 const { connect } = require('react-redux');
 import Note from '@joplin/lib/models/Note';
 import Folder from '@joplin/lib/models/Folder';
+import { Props } from './types';
+import usePrevious from '../hooks/usePrevious';
 
 const commands = [
 	require('./commands/focusElementNoteList'),
@@ -29,50 +31,48 @@ const StyledRoot = styled.div`
 	border-right: 1px solid ${(props: any) => props.theme.dividerColor};
 `;
 
-class NoteListComponent extends React.Component {
+const itemAnchorRefs_: any = {
-	constructor() {
+	current: {},
-		super();
+};
 
-		CommandService.instance().componentRegisterCommands(this, commands);
+export const itemAnchorRef = (itemId: string) => {
+	if (itemAnchorRefs_.current[itemId] && itemAnchorRefs_.current[itemId].current) return itemAnchorRefs_.current[itemId].current;
+	return null;
+};
 
-		this.itemHeight = 34;
+const NoteListComponent = (props: Props) => {
+	const [dragOverTargetNoteIndex, setDragOverTargetNoteIndex] = useState(null);
+	const [width, setWidth] = useState(0);
+	const [, setHeight] = useState(0);
 
-		this.state = {
+	useEffect(() => {
-			dragOverTargetNoteIndex: null,
+		itemAnchorRefs_.current = {};
-			width: 0,
+		CommandService.instance().registerCommands(commands);
-			height: 0,
+
+		return () => {
+			itemAnchorRefs_.current = {};
+			CommandService.instance().unregisterCommands(commands);
 		};
+	}, []);
 
-		this.noteListRef = React.createRef();
+	const itemHeight = 34;
-		this.itemListRef = React.createRef();
-		this.itemAnchorRefs_ = {};
 
-		this.renderItem = this.renderItem.bind(this);
+	const focusItemIID_ = useRef<any>(null);
-		this.onKeyDown = this.onKeyDown.bind(this);
+	const noteListRef = useRef(null);
-		this.noteItem_titleClick = this.noteItem_titleClick.bind(this);
+	const itemListRef = useRef(null);
-		this.noteItem_noteDragOver = this.noteItem_noteDragOver.bind(this);
-		this.noteItem_noteDrop = this.noteItem_noteDrop.bind(this);
-		this.noteItem_checkboxClick = this.noteItem_checkboxClick.bind(this);
-		this.noteItem_dragStart = this.noteItem_dragStart.bind(this);
-		this.onGlobalDrop_ = this.onGlobalDrop_.bind(this);
-		this.registerGlobalDragEndEvent_ = this.registerGlobalDragEndEvent_.bind(this);
-		this.unregisterGlobalDragEndEvent_ = this.unregisterGlobalDragEndEvent_.bind(this);
-		this.itemContextMenu = this.itemContextMenu.bind(this);
-		this.resizableLayout_resize = this.resizableLayout_resize.bind(this);
-	}
 
-	style() {
+	let globalDragEndEventRegistered_ = false;
-		if (this.styleCache_ && this.styleCache_[this.props.themeId]) return this.styleCache_[this.props.themeId];
 
-		const theme = themeStyle(this.props.themeId);
+	const style = useMemo(() => {
+		const theme = themeStyle(props.themeId);
 
-		const style = {
+		return {
 			root: {
 				backgroundColor: theme.backgroundColor,
 			},
 			listItem: {
 				maxWidth: '100%',
-				height: this.itemHeight,
+				height: itemHeight,
 				boxSizing: 'border-box',
 				display: 'flex',
 				alignItems: 'stretch',
@@ -99,76 +99,71 @@ class NoteListComponent extends React.Component {
 				textDecoration: 'line-through',
 			},
 		};
+	}, [props.themeId, itemHeight]);
 
-		this.styleCache_ = {};
+	const itemContextMenu = useCallback((event: any) => {
-		this.styleCache_[this.props.themeId] = style;
-
-		return style;
-	}
-
-	itemContextMenu(event: any) {
 		const currentItemId = event.currentTarget.getAttribute('data-id');
 		if (!currentItemId) return;
 
 		let noteIds = [];
-		if (this.props.selectedNoteIds.indexOf(currentItemId) < 0) {
+		if (props.selectedNoteIds.indexOf(currentItemId) < 0) {
 			noteIds = [currentItemId];
 		} else {
-			noteIds = this.props.selectedNoteIds;
+			noteIds = props.selectedNoteIds;
 		}
 
 		if (!noteIds.length) return;
 
 		const menu = NoteListUtils.makeContextMenu(noteIds, {
-			notes: this.props.notes,
+			notes: props.notes,
-			dispatch: this.props.dispatch,
+			dispatch: props.dispatch,
-			watchedNoteFiles: this.props.watchedNoteFiles,
+			watchedNoteFiles: props.watchedNoteFiles,
-			plugins: this.props.plugins,
+			plugins: props.plugins,
-			inConflictFolder: this.props.selectedFolderId === Folder.conflictFolderId(),
+			inConflictFolder: props.selectedFolderId === Folder.conflictFolderId(),
-			customCss: this.props.customCss,
+			customCss: props.customCss,
 		});
 
 		menu.popup(bridge().window());
-	}
+	}, [props.selectedNoteIds, props.notes, props.dispatch, props.watchedNoteFiles,props.plugins, props.selectedFolderId, props.customCss]);
 
-	onGlobalDrop_() {
+	const onGlobalDrop_ = () => {
-		this.unregisterGlobalDragEndEvent_();
+		unregisterGlobalDragEndEvent_();
-		this.setState({ dragOverTargetNoteIndex: null });
+		setDragOverTargetNoteIndex(null);
-	}
+	};
 
-	registerGlobalDragEndEvent_() {
+	const registerGlobalDragEndEvent_ = () => {
-		if (this.globalDragEndEventRegistered_) return;
+		if (globalDragEndEventRegistered_) return;
-		this.globalDragEndEventRegistered_ = true;
+		globalDragEndEventRegistered_ = true;
-		document.addEventListener('dragend', this.onGlobalDrop_);
+		document.addEventListener('dragend', onGlobalDrop_);
-	}
+	};
 
-	unregisterGlobalDragEndEvent_() {
+	const unregisterGlobalDragEndEvent_ = () => {
-		this.globalDragEndEventRegistered_ = false;
+		globalDragEndEventRegistered_ = false;
-		document.removeEventListener('dragend', this.onGlobalDrop_);
+		document.removeEventListener('dragend', onGlobalDrop_);
-	}
+	};
 
-	dragTargetNoteIndex_(event: any) {
+	const dragTargetNoteIndex_ = (event: any) => {
-		return Math.abs(Math.round((event.clientY - this.itemListRef.current.offsetTop() + this.itemListRef.current.offsetScroll()) / this.itemHeight));
+		return Math.abs(Math.round((event.clientY - itemListRef.current.offsetTop() + itemListRef.current.offsetScroll()) / itemHeight));
-	}
+	};
 
-	noteItem_noteDragOver(event: any) {
+	const noteItem_noteDragOver = (event: any) => {
-		if (this.props.notesParentType !== 'Folder') return;
+		if (props.notesParentType !== 'Folder') return;
 
 		const dt = event.dataTransfer;
 
 		if (dt.types.indexOf('text/x-jop-note-ids') >= 0) {
 			event.preventDefault();
-			const newIndex = this.dragTargetNoteIndex_(event);
+			const newIndex = dragTargetNoteIndex_(event);
-			if (this.state.dragOverTargetNoteIndex === newIndex) return;
+			if (dragOverTargetNoteIndex === newIndex) return;
-			this.registerGlobalDragEndEvent_();
+			registerGlobalDragEndEvent_();
-			this.setState({ dragOverTargetNoteIndex: newIndex });
+			setDragOverTargetNoteIndex(newIndex);
 		}
-	}
+	};
 
-	async noteItem_noteDrop(event: any) {
+	const noteItem_noteDrop = async (event: any) => {
-		if (this.props.notesParentType !== 'Folder') return;
+		if (props.notesParentType !== 'Folder') return;
 
-		if (this.props.noteSortOrder !== 'order') {
+		if (props.noteSortOrder !== 'order') {
 			const doIt = await bridge().showConfirmMessageBox(_('To manually sort the notes, the sort order must be changed to "%s" in the menu "%s" > "%s"', _('Custom order'), _('View'), _('Sort notes by')), {
 				buttons: [_('Do it now'), _('Cancel')],
 			});
@@ -181,17 +176,17 @@ class NoteListComponent extends React.Component {
 		// TODO: check that parent type is folder
 
 		const dt = event.dataTransfer;
-		this.unregisterGlobalDragEndEvent_();
+		unregisterGlobalDragEndEvent_();
-		this.setState({ dragOverTargetNoteIndex: null });
+		setDragOverTargetNoteIndex(null);
 
-		const targetNoteIndex = this.dragTargetNoteIndex_(event);
+		const targetNoteIndex = dragTargetNoteIndex_(event);
 		const noteIds = JSON.parse(dt.getData('text/x-jop-note-ids'));
 
-		void Note.insertNotesAt(this.props.selectedFolderId, noteIds, targetNoteIndex);
+		void Note.insertNotesAt(props.selectedFolderId, noteIds, targetNoteIndex);
-	}
+	};
 
 
-	async noteItem_checkboxClick(event: any, item: any) {
+	const noteItem_checkboxClick = async (event: any, item: any) => {
 		const checked = event.target.checked;
 		const newNote = {
 			id: item.id,
@@ -199,37 +194,37 @@ class NoteListComponent extends React.Component {
 		};
 		await Note.save(newNote, { userSideValidation: true });
 		eventManager.emit('todoToggle', { noteId: item.id, note: newNote });
-	}
+	};
 
-	async noteItem_titleClick(event: any, item: any) {
+	const noteItem_titleClick = async (event: any, item: any) => {
 		if (event.ctrlKey || event.metaKey) {
 			event.preventDefault();
-			this.props.dispatch({
+			props.dispatch({
 				type: 'NOTE_SELECT_TOGGLE',
 				id: item.id,
 			});
 		} else if (event.shiftKey) {
 			event.preventDefault();
-			this.props.dispatch({
+			props.dispatch({
 				type: 'NOTE_SELECT_EXTEND',
 				id: item.id,
 			});
 		} else {
-			this.props.dispatch({
+			props.dispatch({
 				type: 'NOTE_SELECT',
 				id: item.id,
 			});
 		}
-	}
+	};
 
-	noteItem_dragStart(event: any) {
+	const noteItem_dragStart = (event: any) => {
 		let noteIds = [];
 
 		// Here there is two cases:
 		// - If multiple notes are selected, we drag the group
 		// - If only one note is selected, we drag the note that was clicked on (which might be different from the currently selected note)
-		if (this.props.selectedNoteIds.length >= 2) {
+		if (props.selectedNoteIds.length >= 2) {
-			noteIds = this.props.selectedNoteIds;
+			noteIds = props.selectedNoteIds;
 		} else {
 			const clickedNoteId = event.currentTarget.getAttribute('data-id');
 			if (clickedNoteId) noteIds.push(clickedNoteId);
@@ -240,61 +235,66 @@ class NoteListComponent extends React.Component {
 		event.dataTransfer.setDragImage(new Image(), 1, 1);
 		event.dataTransfer.clearData();
 		event.dataTransfer.setData('text/x-jop-note-ids', JSON.stringify(noteIds));
-	}
+	};
 
-	renderItem(item: any, index: number) {
+	const renderItem = useCallback((item: any, index: number) => {
 		const highlightedWords = () => {
-			if (this.props.notesParentType === 'Search') {
+			if (props.notesParentType === 'Search') {
-				const query = BaseModel.byId(this.props.searches, this.props.selectedSearchId);
+				const query = BaseModel.byId(props.searches, props.selectedSearchId);
 				if (query) {
-					return this.props.highlightedWords;
+					return props.highlightedWords;
 				}
 			}
 			return [];
 		};
 
-		if (!this.itemAnchorRefs_[item.id]) this.itemAnchorRefs_[item.id] = React.createRef();
+		if (!itemAnchorRefs_.current[item.id]) itemAnchorRefs_.current[item.id] = React.createRef();
-		const ref = this.itemAnchorRefs_[item.id];
+		const ref = itemAnchorRefs_.current[item.id];
 
 		return <NoteListItem
 			ref={ref}
 			key={item.id}
-			style={this.style()}
+			style={style}
 			item={item}
 			index={index}
-			themeId={this.props.themeId}
+			themeId={props.themeId}
-			width={this.state.width}
+			width={width}
-			height={this.itemHeight}
+			height={itemHeight}
-			dragItemIndex={this.state.dragOverTargetNoteIndex}
+			dragItemIndex={dragOverTargetNoteIndex}
 			highlightedWords={highlightedWords()}
-			isProvisional={this.props.provisionalNoteIds.includes(item.id)}
+			isProvisional={props.provisionalNoteIds.includes(item.id)}
-			isSelected={this.props.selectedNoteIds.indexOf(item.id) >= 0}
+			isSelected={props.selectedNoteIds.indexOf(item.id) >= 0}
-			isWatched={this.props.watchedNoteFiles.indexOf(item.id) < 0}
+			isWatched={props.watchedNoteFiles.indexOf(item.id) < 0}
-			itemCount={this.props.notes.length}
+			itemCount={props.notes.length}
-			onCheckboxClick={this.noteItem_checkboxClick}
+			onCheckboxClick={noteItem_checkboxClick}
-			onDragStart={this.noteItem_dragStart}
+			onDragStart={noteItem_dragStart}
-			onNoteDragOver={this.noteItem_noteDragOver}
+			onNoteDragOver={noteItem_noteDragOver}
-			onNoteDrop={this.noteItem_noteDrop}
+			onNoteDrop={noteItem_noteDrop}
-			onTitleClick={this.noteItem_titleClick}
+			onTitleClick={noteItem_titleClick}
-			onContextMenu={this.itemContextMenu}
+			onContextMenu={itemContextMenu}
 		/>;
-	}
+	}, [style, props.themeId, width, itemHeight, dragOverTargetNoteIndex, props.provisionalNoteIds, props.selectedNoteIds, props.watchedNoteFiles,
+		props.notes,
+		props.notesParentType,
+		props.searches,
+		props.selectedSearchId,
+		props.highlightedWords,
+	]);
 
-	itemAnchorRef(itemId: string) {
+	const previousSelectedNoteIds = usePrevious(props.selectedNoteIds, []);
-		if (this.itemAnchorRefs_[itemId] && this.itemAnchorRefs_[itemId].current) return this.itemAnchorRefs_[itemId].current;
+	const previousNotes = usePrevious(props.notes, []);
-		return null;
+	const previousVisible = usePrevious(props.visible, false);
-	}
 
-	componentDidUpdate(prevProps: any) {
+	useEffect(() => {
-		if (prevProps.selectedNoteIds !== this.props.selectedNoteIds && this.props.selectedNoteIds.length === 1) {
+		if (previousSelectedNoteIds !== props.selectedNoteIds && props.selectedNoteIds.length === 1) {
-			const id = this.props.selectedNoteIds[0];
+			const id = props.selectedNoteIds[0];
-			const doRefocus = this.props.notes.length < prevProps.notes.length;
+			const doRefocus = props.notes.length < previousNotes.length;
 
-			for (let i = 0; i < this.props.notes.length; i++) {
+			for (let i = 0; i < props.notes.length; i++) {
-				if (this.props.notes[i].id === id) {
+				if (props.notes[i].id === id) {
-					this.itemListRef.current.makeItemIndexVisible(i);
+					itemListRef.current.makeItemIndexVisible(i);
 					if (doRefocus) {
-						const ref = this.itemAnchorRef(id);
+						const ref = itemAnchorRef(id);
 						if (ref) ref.focus();
 					}
 					break;
@@ -302,24 +302,24 @@ class NoteListComponent extends React.Component {
 			}
 		}
 
-		if (prevProps.visible !== this.props.visible) {
+		if (previousVisible !== props.visible) {
-			this.updateSizeState();
+			updateSizeState();
 		}
-	}
+	}, [previousSelectedNoteIds,previousNotes, previousVisible, props.selectedNoteIds, props.notes]);
 
-	scrollNoteIndex_(keyCode: any, ctrlKey: any, metaKey: any, noteIndex: any) {
+	const scrollNoteIndex_ = (keyCode: any, ctrlKey: any, metaKey: any, noteIndex: any) => {
 
 		if (keyCode === 33) {
 			// Page Up
-			noteIndex -= (this.itemListRef.current.visibleItemCount() - 1);
+			noteIndex -= (itemListRef.current.visibleItemCount() - 1);
 
 		} else if (keyCode === 34) {
 			// Page Down
-			noteIndex += (this.itemListRef.current.visibleItemCount() - 1);
+			noteIndex += (itemListRef.current.visibleItemCount() - 1);
 
 		} else if ((keyCode === 35 && ctrlKey) || (keyCode === 40 && metaKey)) {
 			// CTRL+End, CMD+Down
-			noteIndex = this.props.notes.length - 1;
+			noteIndex = props.notes.length - 1;
 
 		} else if ((keyCode === 36 && ctrlKey) || (keyCode === 38 && metaKey)) {
 			// CTRL+Home, CMD+Up
@@ -334,31 +334,31 @@ class NoteListComponent extends React.Component {
 			noteIndex += 1;
 		}
 		if (noteIndex < 0) noteIndex = 0;
-		if (noteIndex > this.props.notes.length - 1) noteIndex = this.props.notes.length - 1;
+		if (noteIndex > props.notes.length - 1) noteIndex = props.notes.length - 1;
 		return noteIndex;
-	}
+	};
 
-	async onKeyDown(event: any) {
+	const onKeyDown = async (event: any) => {
 		const keyCode = event.keyCode;
-		const noteIds = this.props.selectedNoteIds;
+		const noteIds = props.selectedNoteIds;
 
 		if (noteIds.length > 0 && (keyCode === 40 || keyCode === 38 || keyCode === 33 || keyCode === 34 || keyCode === 35 || keyCode == 36)) {
 			// DOWN / UP / PAGEDOWN / PAGEUP / END / HOME
 			const noteId = noteIds[0];
-			let noteIndex = BaseModel.modelIndexById(this.props.notes, noteId);
+			let noteIndex = BaseModel.modelIndexById(props.notes, noteId);
 
-			noteIndex = this.scrollNoteIndex_(keyCode, event.ctrlKey, event.metaKey, noteIndex);
+			noteIndex = scrollNoteIndex_(keyCode, event.ctrlKey, event.metaKey, noteIndex);
 
-			const newSelectedNote = this.props.notes[noteIndex];
+			const newSelectedNote = props.notes[noteIndex];
 
-			this.props.dispatch({
+			props.dispatch({
 				type: 'NOTE_SELECT',
 				id: newSelectedNote.id,
 			});
 
-			this.itemListRef.current.makeItemIndexVisible(noteIndex);
+			itemListRef.current.makeItemIndexVisible(noteIndex);
 
-			this.focusNoteId_(newSelectedNote.id);
+			focusNoteId_(newSelectedNote.id);
 
 			event.preventDefault();
 		}
@@ -373,7 +373,7 @@ class NoteListComponent extends React.Component {
 			// SPACE
 			event.preventDefault();
 
-			const notes = BaseModel.modelsByIds(this.props.notes, noteIds);
+			const notes = BaseModel.modelsByIds(props.notes, noteIds);
 			const todos = notes.filter((n: any) => !!n.is_todo);
 			if (!todos.length) return;
 
@@ -382,7 +382,7 @@ class NoteListComponent extends React.Component {
 				await Note.save(toggledTodo);
 			}
 
-			this.focusNoteId_(todos[0].id);
+			focusNoteId_(todos[0].id);
 		}
 
 		if (keyCode === 9) {
@@ -400,62 +400,63 @@ class NoteListComponent extends React.Component {
 			// Ctrl+A key
 			event.preventDefault();
 
-			this.props.dispatch({
+			props.dispatch({
 				type: 'NOTE_SELECT_ALL',
 			});
 		}
-	}
+	};
 
-	focusNoteId_(noteId: string) {
+	const focusNoteId_ = (noteId: string) => {
 		// - We need to focus the item manually otherwise focus might be lost when the
 		//   list is scrolled and items within it are being rebuilt.
 		// - We need to use an interval because when leaving the arrow pressed, the rendering
 		//   of items might lag behind and so the ref is not yet available at this point.
-		if (!this.itemAnchorRef(noteId)) {
+		if (!itemAnchorRef(noteId)) {
-			if (this.focusItemIID_) shim.clearInterval(this.focusItemIID_);
+			if (focusItemIID_.current) shim.clearInterval(focusItemIID_.current);
-			this.focusItemIID_ = shim.setInterval(() => {
+			focusItemIID_.current = shim.setInterval(() => {
-				if (this.itemAnchorRef(noteId)) {
+				if (itemAnchorRef(noteId)) {
-					this.itemAnchorRef(noteId).focus();
+					itemAnchorRef(noteId).focus();
-					shim.clearInterval(this.focusItemIID_);
+					shim.clearInterval(focusItemIID_.current);
-					this.focusItemIID_ = null;
+					focusItemIID_.current = null;
 				}
 			}, 10);
 		} else {
-			this.itemAnchorRef(noteId).focus();
+			itemAnchorRef(noteId).focus();
 		}
-	}
+	};
 
-	updateSizeState() {
+	const updateSizeState = () => {
-		this.setState({
+		setWidth(noteListRef.current.clientWidth);
-			width: this.noteListRef.current.clientWidth,
+		setHeight(noteListRef.current.clientHeight);
-			height: this.noteListRef.current.clientHeight,
+	};
-		});
-	}
 
-	resizableLayout_resize() {
+	const resizableLayout_resize = () => {
-		this.updateSizeState();
+		updateSizeState();
-	}
+	};
 
-	componentDidMount() {
+	useEffect(() => {
-		this.props.resizableLayoutEventEmitter.on('resize', this.resizableLayout_resize);
+		props.resizableLayoutEventEmitter.on('resize', resizableLayout_resize);
-		this.updateSizeState();
+		return () => {
-	}
+			props.resizableLayoutEventEmitter.off('resize', resizableLayout_resize);
+		};
+	}, [props.resizableLayoutEventEmitter]);
 
-	componentWillUnmount() {
+	useEffect(() => {
-		if (this.focusItemIID_) {
+		updateSizeState();
-			shim.clearInterval(this.focusItemIID_);
-			this.focusItemIID_ = null;
-		}
 
-		this.props.resizableLayoutEventEmitter.off('resize', this.resizableLayout_resize);
+		return () => {
+			if (focusItemIID_.current) {
+				shim.clearInterval(focusItemIID_.current);
+				focusItemIID_.current = null;
+			}
+			CommandService.instance().componentUnregisterCommands(commands);
+		};
+	}, []);
 
-		CommandService.instance().componentUnregisterCommands(commands);
+	const renderEmptyList = () => {
-	}
+		if (props.notes.length) return null;
 
-	renderEmptyList() {
+		const theme = themeStyle(props.themeId);
-		if (this.props.notes.length) return null;
-
-		const theme = themeStyle(this.props.themeId);
 		const padding = 10;
 		const emptyDivStyle = {
 			padding: `${padding}px`,
@@ -464,39 +465,35 @@ class NoteListComponent extends React.Component {
 			backgroundColor: theme.backgroundColor,
 			fontFamily: theme.fontFamily,
 		};
-		// emptyDivStyle.width = emptyDivStyle.width - padding * 2;
+		return <div style={emptyDivStyle}>{props.folders.length ? _('No notes in here. Create one by clicking on "New note".') : _('There is currently no notebook. Create one by clicking on "New notebook".')}</div>;
-		// emptyDivStyle.height = emptyDivStyle.height - padding * 2;
+	};
-		return <div style={emptyDivStyle}>{this.props.folders.length ? _('No notes in here. Create one by clicking on "New note".') : _('There is currently no notebook. Create one by clicking on "New notebook".')}</div>;
-	}
 
-	renderItemList(style: any) {
+	const renderItemList = () => {
-		if (!this.props.notes.length) return null;
+		if (!props.notes.length) return null;
 
 		return (
 			<ItemList
-				ref={this.itemListRef}
+				ref={itemListRef}
-				disabled={this.props.isInsertingNotes}
+				disabled={props.isInsertingNotes}
-				itemHeight={this.style().listItem.height}
+				itemHeight={style.listItem.height}
 				className={'note-list'}
-				items={this.props.notes}
+				items={props.notes}
-				style={style}
+				style={props.size}
-				itemRenderer={this.renderItem}
+				itemRenderer={renderItem}
-				onKeyDown={this.onKeyDown}
+				onKeyDown={onKeyDown}
 			/>
 		);
-	}
+	};
 
-	render() {
+	if (!props.size) throw new Error('props.size is required');
-		if (!this.props.size) throw new Error('props.size is required');
 
-		return (
+	return (
-			<StyledRoot ref={this.noteListRef}>
+		<StyledRoot ref={noteListRef}>
-				{this.renderEmptyList()}
+			{renderEmptyList()}
-				{this.renderItemList(this.props.size)}
+			{renderItemList()}
-			</StyledRoot>
+		</StyledRoot>
-		);
+	);
-	}
+};
-}
 
 const mapStateToProps = (state: AppState) => {
 	return {

packages/app-desktop/gui/NoteList/commands/focusElementNoteList.ts

@@ -1,6 +1,7 @@
 import { CommandRuntime, CommandDeclaration, CommandContext } from '@joplin/lib/services/CommandService';
 import { _ } from '@joplin/lib/locale';
 import { stateUtils } from '@joplin/lib/reducer';
+import { itemAnchorRef } from '../NoteList';
 
 export const declaration: CommandDeclaration = {
 	name: 'focusElementNoteList',
@@ -8,13 +9,13 @@ export const declaration: CommandDeclaration = {
 	parentLabel: () => _('Focus'),
 };
 
-export const runtime = (comp: any): CommandRuntime => {
+export const runtime = (): CommandRuntime => {
 	return {
 		execute: async (context: CommandContext, noteId: string = null) => {
 			noteId = noteId || stateUtils.selectedNoteId(context.state);
 
 			if (noteId) {
-				const ref = comp.itemAnchorRef(noteId);
+				const ref = itemAnchorRef(noteId);
 				if (ref) ref.focus();
 			}
 		},

packages/app-desktop/gui/NoteList/types.ts

@@ -0,0 +1,24 @@
+import { FolderEntity, NoteEntity } from '@joplin/lib/services/database/types';
+import { PluginStates } from '@joplin/lib/services/plugins/reducer';
+
+export interface Props {
+	themeId: any;
+	selectedNoteIds: string[];
+	notes: NoteEntity[];
+	dispatch: Function;
+	watchedNoteFiles: any[];
+	plugins: PluginStates;
+	selectedFolderId: string;
+	customCss: string;
+	notesParentType: string;
+	noteSortOrder: string;
+	resizableLayoutEventEmitter: any;
+	isInsertingNotes: boolean;
+	folders: FolderEntity[];
+	size: any;
+	searches: any[];
+	selectedSearchId: string;
+	highlightedWords: string[];
+	provisionalNoteIds: string[];
+	visible: boolean;
+}

packages/lib/services/CommandService.ts

@@ -199,6 +199,18 @@ export default class CommandService extends BaseService {
 		command.runtime = runtime;
 	}
 
+	public registerCommands(commands: any[]) {
+		for (const command of commands) {
+			CommandService.instance().registerRuntime(command.declaration.name, command.runtime());
+		}
+	}
+
+	public unregisterCommands(commands: any[]) {
+		for (const command of commands) {
+			CommandService.instance().unregisterRuntime(command.declaration.name);
+		}
+	}
+
 	public componentRegisterCommands(component: any, commands: any[]) {
 		for (const command of commands) {
 			CommandService.instance().registerRuntime(command.declaration.name, command.runtime(component));