Better handling of folder screen

ReactNativeClient/lib/components/action-button.js

@@ -106,7 +106,7 @@ class ActionButtonComponent extends React.Component {
 
 		if (this.props.multiStates) {
 			if (!this.props.buttons || !this.props.buttons.length) throw new Error('Multi-state button requires at least one state');
-			if (this.state.buttonIndex < 0 || this.state.buttonIndex >= this.props.buttons.length) throw new Error('Button index out of bounds');
+			if (this.state.buttonIndex < 0 || this.state.buttonIndex >= this.props.buttons.length) throw new Error('Button index out of bounds: ' + this.state.buttonIndex + '/' + this.props.buttons.length);
 			let button = this.props.buttons[this.state.buttonIndex];
 			let mainIcon = <Icon name={button.icon} style={styles.actionButtonIcon} />
 			return (

ReactNativeClient/lib/components/checkbox.js

@@ -38,8 +38,12 @@ class Checkbox extends Component {
 	render() {
 		const iconName = this.state.checked ? 'md-checkbox-outline' : 'md-square-outline';
 
+		let style = this.props.style ? Object.assign({}, this.props.style) : {};
+		style.justifyContent = 'center';
+		style.alignItems = 'center';
+
 		return (
-			<TouchableHighlight onPress={() => this.onPress()} style={{justifyContent: 'center', alignItems: 'center'}}>
+			<TouchableHighlight onPress={() => this.onPress()} style={style}>
 				<Icon name={iconName} style={styles.checkboxIcon}/>
 			</TouchableHighlight>
 		);

ReactNativeClient/lib/components/screens/folder.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { View, Button, TextInput } from 'react-native';
 import { connect } from 'react-redux'
 import { Log } from 'lib/log.js'
+import { ActionButton } from 'lib/components/action-button.js';
 import { Folder } from 'lib/models/folder.js'
 import { BaseModel } from 'lib/base-model.js'
 import { ScreenHeader } from 'lib/components/screen-header.js';
@@ -18,21 +19,36 @@ class FolderScreenComponent extends BaseScreenComponent {
 
 	constructor() {
 		super();
-		this.state = { folder: Folder.new() };
-		this.originalFolder = null;
+		this.state = {
+			folder: Folder.new(),
+			lastSavedFolder: null,
+		};
 	}
 
 	componentWillMount() {
 		if (!this.props.folderId) {
-			this.setState({ folder: Folder.new() });
+			const folder = Folder.new();
+			this.setState({
+				folder: folder,
+				lastSavedFolder: Object.assign({}, folder),
+			});
 		} else {
 			Folder.load(this.props.folderId).then((folder) => {
-				this.originalFolder = Object.assign({}, folder);
-				this.setState({ folder: folder });
+				this.setState({
+					folder: folder,
+					lastSavedFolder: Object.assign({}, folder),
+				});
 			});
 		}
 	}
 
+	isModified() {
+		if (!this.state.folder || !this.state.lastSavedFolder) return false;
+		let diff = BaseModel.diffObjects(this.state.folder, this.state.lastSavedFolder);
+		delete diff.type_;
+		return !!Object.getOwnPropertyNames(diff).length;
+	}
+
 	folderComponent_change(propName, propValue) {
 		this.setState((prevState, props) => {
 			let folder = Object.assign({}, prevState.folder);
@@ -46,53 +62,52 @@ class FolderScreenComponent extends BaseScreenComponent {
 	}
 
 	async saveFolderButton_press() {
-		let toSave = {
-			title: this.state.folder.title,
-		};
-
-		if (this.originalFolder) toSave.id = this.originalFolder.id;
+		let folder = Object.assign({}, this.state.folder);
 
 		try {
-			let f = await Folder.save(toSave, {
+			folder = await Folder.save(folder, {
 				duplicateCheck: true,
 				reservedTitleCheck: true,
 			});
-			this.originalFolder = f;
 		} catch (error) {
 			dialogs.error(this, _('The folder could not be saved: %s', error.message));
 			return;
 		}
 
-		this.setState({ folder: this.originalFolder });
+		this.setState({
+			lastSavedFolder: Object.assign({}, folder),
+			folder: folder,
+		});
 
-		await NotesScreenUtils.openDefaultNoteList();
+		await NotesScreenUtils.openNoteList(folder.id);
 	}
 
 	render() {
-		// const renderActionButton = () => {
-		// 	let buttons = [];
+		const renderActionButton = () => {
+			let buttons = [];
 
-		// 	buttons.push({
-		// 		title: _('Save'),
-		// 		icon: 'md-checkmark',
-		// 		onPress: () => {
-		// 			this.saveFolderButton_press();
-		// 			return false;
-		// 		},
-		// 	});
+			buttons.push({
+				title: _('Save'),
+				icon: 'md-checkmark',
+				onPress: () => {
+					this.saveFolderButton_press()
+				},
+			});
 
-		// 	if (this.state.mode == 'edit' && !this.isModified()) return <ActionButton style={{display:'none'}}/>;
+			if (!this.isModified()) return <ActionButton style={{display:'none'}}/>;
 
-		// 	let toggled = this.state.mode == 'edit';
+			let buttonIndex = this.state.mode == 'view' ? 0 : 1;
 
-		// 	return <ActionButton isToggle={true} buttons={buttons} toggled={toggled} />
-		// }
+			return <ActionButton multiStates={true} buttons={buttons} buttonIndex={0} />
+		}
+
+		const actionButtonComp = renderActionButton();
 
 		return (
 			<View style={this.styles().screen}>
 				<ScreenHeader navState={this.props.navigation.state} />
 				<TextInput value={this.state.folder.title} onChangeText={(text) => this.title_changeText(text)} />
-				<Button title="Save folder" onPress={() => this.saveFolderButton_press()} />
+				{ actionButtonComp }
 				<dialogs.DialogBox ref={dialogbox => { this.dialogbox = dialogbox }}/>
 			</View>
 		);