Added NoteText component

ElectronClient/app/ElectronAppWrapper.js

@@ -39,24 +39,17 @@ class ElectronAppWrapper {
 	}
 
 	createWindow() {
-		// Create the browser window.
 		this.win_ = new BrowserWindow({width: 800, height: 600})
 
-		// and load the index.html of the app.
 		this.win_.loadURL(url.format({
 			pathname: path.join(__dirname, 'index.html'),
 			protocol: 'file:',
 			slashes: true
 		}))
 
-		// Open the DevTools.
 		this.win_.webContents.openDevTools()
 
-		// Emitted when the window is closed.
 		this.win_.on('closed', () => {
-			// Dereference the window object, usually you would store windows
-			// in an array if your app supports multi windows, this is the time
-			// when you should delete the corresponding element.
 			this.win_ = null
 		})
 
@@ -97,7 +90,6 @@ class ElectronAppWrapper {
 
 		this.createWindow();
 
-		// Quit when all windows are closed.
 		this.electronApp_.on('window-all-closed', () => {
 			// On macOS it is common for applications and their menu bar
 			// to stay active until the user quits explicitly with Cmd + Q

ElectronClient/app/gui/NoteList.jsx

@@ -3,9 +3,16 @@ const { ItemList } = require('./ItemList.min.js');
 class NoteListComponent extends React.Component {
 
 	itemRenderer(index, item) {
+		const onClick = () => {
+			this.props.dispatch({
+				type: 'NOTES_SELECT',
+				noteId: item.id,
+			});
+		}
+
 		let classes = ['item'];
 		classes.push(index % 2 === 0 ? 'even' : 'odd');
-		return <div onClick={() => {console.info(item)}} className={classes.join(' ')} key={index}>{item.title}</div>
+		return <div onClick={() => { onClick() }} className={classes.join(' ')} key={index}>{item.title}</div>
 	}
 
 	render() {
@@ -16,19 +23,19 @@ class NoteListComponent extends React.Component {
 				className={"note-list"}
 				items={this.props.notes}
 				itemRenderer={ (index, item) => { return this.itemRenderer(index, item) } }
-			/>
+			></ItemList>
 		);
 	}
 
 }
 
 const mapStateToProps = (state) => {
-	let notes = [];
+	//let notes = [];
-	for (let i = 0; i < 100; i++) notes.push({ title: "Note " + i });
+	//for (let i = 0; i < 100; i++) notes.push({ title: "Note " + i });
 
 	return {
-		//notes: state.notes,
+		notes: state.notes,
-		notes: notes,
+		//notes: notes,
 	};
 };
 

ElectronClient/app/gui/NoteText.jsx

@@ -0,0 +1,44 @@
+//const { BaseModel } = require('lib/base-model.js');
+
+class NoteTextComponent extends React.Component {
+
+	componentWillMount() {
+		this.setState({
+			note: null,
+		});
+	}
+
+	componentWillReceiveProps(nextProps) {
+		if (nextProps.noteId) this.reloadNote();
+	}
+
+	async reloadNote() {
+		const note = this.props.noteId ? await Note.load(this.props.noteId) : null;
+		this.setState({
+			note: note,
+		});
+	}
+
+	render() {
+		const note = this.state.note;
+		const body = note ? note.body : 'no note';
+
+		return (
+			<div style={this.props.style}>
+				{ body }
+			</div>
+		);
+	}
+
+}
+
+const mapStateToProps = (state) => {
+	return {
+		noteId: state.selectedNoteId,
+		notes: state.notes,
+	};
+};
+
+const NoteText = connect(mapStateToProps)(NoteTextComponent);
+
+module.exports = { NoteText };

ElectronClient/app/gui/Root.jsx

@@ -4,6 +4,7 @@ const { createStore } = require('redux');
 const { connect, Provider } = require('react-redux');
 
 const { NoteList } = require('./gui/NoteList.min.js');
+const { NoteText } = require('./gui/NoteText.min.js');
 
 const { app } = require('electron').remote.require('./app');
 
@@ -16,13 +17,23 @@ class ReactRootComponent extends React.Component {
 		};
 
 		const noteListStyle = {
-			width: this.props.size.width,
+			width: Math.floor(this.props.size.width / 2),
 			height: this.props.size.height,
+			display: 'inline-block',
+			verticalAlign: 'top',
+		};
+
+		const noteTextStyle = {
+			width: this.props.size.width - noteListStyle.width,
+			height: this.props.size.height,
+			display: 'inline-block',
+			verticalAlign: 'top',
 		};
 
 		return (
 			<div style={style}>
 				<NoteList itemHeight={40} style={noteListStyle}></NoteList>
+				<NoteText style={noteTextStyle}></NoteText>
 			</div>
 		);
 	}