Switching state handling to Redux

CliClient/.gitignore

@@ -16,4 +16,5 @@ tests/cli-integration/
 *.mo
 *.*~
 tests/sync
-out.txt
+out.txt
+linkToLocal.sh

CliClient/app/app-gui.js

@@ -14,20 +14,25 @@ const TextWidget = require('tkwidgets/TextWidget.js');
 const ConsoleWidget = require('tkwidgets/ConsoleWidget.js');
 const HLayoutWidget = require('tkwidgets/HLayoutWidget.js');
 const VLayoutWidget = require('tkwidgets/VLayoutWidget.js');
+const ReduxRootWidget = require('tkwidgets/ReduxRootWidget.js');
 const RootWidget = require('tkwidgets/RootWidget.js');
 const WindowWidget = require('tkwidgets/WindowWidget.js');
 
+const NoteWidget = require('./gui/NoteWidget.js');
+
 class AppGui {
 
-	constructor(app) {
+	constructor(app, store) {
 		this.app_ = app;
+		this.store_ = store;
 
 		BaseWidget.setLogger(app.logger());
 
 		this.term_ = tk.terminal;
 		this.renderer_ = null;
 		this.logger_ = new Logger();
-		this.rootWidget_ = this.buildUi();
+		this.buildUi();
+
 		this.renderer_ = new Renderer(this.term(), this.rootWidget_);
 
 		this.renderer_.on('renderDone', async (event) => {
@@ -42,8 +47,8 @@ class AppGui {
 	}
 
 	buildUi() {
-		const rootWidget = new RootWidget();
-		rootWidget.setName('rootWidget');
+		this.rootWidget_ = new ReduxRootWidget(this.store_);
+		this.rootWidget_.setName('rootWidget');
 
 		const folderList = new ListWidget();
 		folderList.items = [];
@@ -85,16 +90,25 @@ class AppGui {
 				}
 				noteList.setCurrentItem(note);
 			}
-			await this.updateNoteText(note);
+
+			this.store_.dispatch({
+				type: 'NOTES_SELECT',
+				noteId: note ? note.id : 0,
+			});
+			//await this.updateNoteText(note);
 		});
 
-		const noteText = new TextWidget();
+		const noteText = new NoteWidget();
 		noteText.setVStretch(true);
 		noteText.setName('noteText');
 		noteText.setStyle({
 			borderBottomWidth: 1,
 		});
 
+		this.rootWidget_.connect(noteText, (state) => {
+			return { noteId: state.selectedNoteId };
+		});
+
 		const consoleWidget = new ConsoleWidget();
 		consoleWidget.setHStretch(true);
 		consoleWidget.setName('console');
@@ -117,9 +131,7 @@ class AppGui {
 		win1.addChild(vLayout);
 		win1.setName('mainWindow');
 
-		rootWidget.addChild(win1);
-
-		return rootWidget;
+		this.rootWidget_.addChild(win1);
 	}
 
 	setupShortcuts() {

CliClient/app/app.js

@@ -1,3 +1,5 @@
+import { createStore } from 'redux';
+import { reducer, defaultState } from 'lib/reducer.js';
 import { JoplinDatabase } from 'lib/joplin-database.js';
 import { Database } from 'lib/database.js';
 import { DatabaseDriverNode } from 'lib/database-driver-node.js';
@@ -415,7 +417,7 @@ class Application {
 
 		reg.setDb(this.database_);
 		BaseModel.db_ = this.database_;
-		BaseModel.dispatch = (action) => { this.baseModelListener(action) }
+		//BaseModel.dispatch = (action) => { this.baseModelListener(action) }
 
 		await Setting.load();
 
@@ -437,8 +439,11 @@ class Application {
 		if (!this.currentFolder_) this.currentFolder_ = await Folder.defaultFolder();
 		Setting.setValue('activeFolderId', this.currentFolder_ ? this.currentFolder_.id : '');
 
+		let store = createStore(reducer);
+		BaseModel.dispatch = store.dispatch;
+
 		const AppGui = require('./app-gui.js');
-		this.gui_ = new AppGui(this);
+		this.gui_ = new AppGui(this, store);
 		this.gui_.setLogger(this.logger_);
 		await this.gui_.start();
 

CliClient/app/gui/NoteWidget.js

@@ -0,0 +1,34 @@
+//import { Note } from 'lib/models/note.js';
+
+const Note = require('lib/models/note.js').Note;
+const TextWidget = require('tkwidgets/TextWidget.js');
+
+class NoteWidget extends TextWidget {
+
+	constructor() {
+		super();
+		this.noteId_ = 0;
+		this.note_ = null;
+	}
+
+	get noteId() {
+		return this.noteId_;
+	}
+
+	set noteId(v) {
+		if (v === this.noteId_) return;
+		this.noteId_ = v;
+		this.note_ = null;
+		this.invalidate();
+	}
+
+	async willRender() {
+		if (!this.note_ && this.noteId_) {
+			this.note_ = await Note.load(this.noteId_);
+			this.text = this.note_.body;
+		}
+	}
+
+}
+
+module.exports = NoteWidget;

CliClient/build.sh

@@ -10,6 +10,10 @@ ln -s "$ROOT_DIR/../ReactNativeClient/lib" "$ROOT_DIR/app"
 
 npm run build
 
+# Files under app/gui are in ES6 already but I cannot get Babel
+# to ignore them, so copy them back to the build directory.
+rsync -a "$ROOT_DIR/app/gui/" "$ROOT_DIR/build/gui/"
+
 cp "$ROOT_DIR/package.json" "$ROOT_DIR/build"
 cp "$ROOT_DIR/app/autocompletion_template.txt" "$ROOT_DIR/build"
 

ReactNativeClient/lib/reducer.js

@@ -118,6 +118,12 @@ const reducer = (state = defaultState, action) => {
 				newState.historyCanGoBack = !!navHistory.length;
 				break;
 
+			case 'NOTES_SELECT':
+
+				newState = Object.assign({}, state);
+				newState.selectedNoteId = action.noteId;
+				break;
+
 			case 'SETTINGS_UPDATE_ALL':
 
 				newState = Object.assign({}, state);