Started fixing ReactNative app

ReactNativeClient/lib/components/screens/folder.js

@@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+import { View, Button, TextInput } from 'react-native';
+import { connect } from 'react-redux'
+import { Log } from 'lib/log.js'
+import { Folder } from 'lib/models/folder.js'
+import { ScreenHeader } from 'lib/components/screen-header.js';
+import { NoteFolderService } from 'lib/services/note-folder-service.js';
+
+class FolderScreenComponent extends React.Component {
+	
+	static navigationOptions(options) {
+		return { header: null };
+	}
+
+	constructor() {
+		super();
+		this.state = { folder: Folder.new() };
+		this.originalFolder = null;
+	}
+
+	componentWillMount() {
+		if (!this.props.folderId) {
+			this.setState({ folder: Folder.new() });
+		} else {
+			Folder.load(this.props.folderId).then((folder) => {
+				this.originalFolder = Object.assign({}, folder);
+				this.setState({ folder: folder });
+			});
+		}
+	}
+
+	folderComponent_change(propName, propValue) {
+		this.setState((prevState, props) => {
+			let folder = Object.assign({}, prevState.folder);
+			folder[propName] = propValue;
+			return { folder: folder }
+		});
+	}
+
+	title_changeText(text) {
+		this.folderComponent_change('title', text);
+	}
+
+	saveFolderButton_press() {
+		console.warn('CHANGE NOT TESTED');
+		let toSave = BaseModel.diffObjects(this.originalFolder, this.state.folder);
+		toSave.id = this.state.folder.id;
+		Folder.save(toSave).then((folder) => {
+			this.originalFolder = Object.assign({}, folder);
+			this.setState({ folder: folder });
+		});
+		// NoteFolderService.save('folder', this.state.folder, this.originalFolder).then((folder) => {
+		// 	this.originalFolder = Object.assign({}, folder);
+		// 	this.setState({ folder: folder });
+		// });
+	}
+
+	render() {
+		return (
+			<View style={{flex: 1}}>
+				<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()} />
+			</View>
+		);
+	}
+
+}
+
+const FolderScreen = connect(
+	(state) => {
+		return {
+			folderId: state.selectedFolderId,
+		};
+	}
+)(FolderScreenComponent)
+
+export { FolderScreen };

ReactNativeClient/lib/components/screens/folders.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import { View, Button, Picker, Text, StyleSheet } from 'react-native';
+import { connect } from 'react-redux'
+import { Log } from 'lib/log.js'
+import { FolderList } from 'lib/components/folder-list.js'
+import { ScreenHeader } from 'lib/components/screen-header.js';
+import { _ } from 'lib/locale.js';
+import { ActionButton } from 'lib/components/action-button.js';
+
+class FoldersScreenComponent extends React.Component {
+
+	static navigationOptions(options) {
+		return { header: null };
+	}
+
+	render() {
+		return (
+			<View style={{flex: 1}}>
+				<ScreenHeader navState={this.props.navigation.state} />
+				<FolderList style={{flex: 1}}/>
+				<ActionButton></ActionButton>
+			</View>
+		);
+	}
+}
+
+const FoldersScreen = connect(
+	(state) => {
+		return {
+			folders: state.folders,
+		};
+	}
+)(FoldersScreenComponent)
+
+export { FoldersScreen };

ReactNativeClient/lib/components/screens/loading.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import { View, Text } from 'react-native';
+import { connect } from 'react-redux'
+import { Log } from 'lib/log.js'
+import { Folder } from 'lib/models/folder.js'
+import { ScreenHeader } from 'lib/components/screen-header.js';
+import { NoteFolderService } from 'lib/services/note-folder-service.js';
+
+class LoadingScreenComponent extends React.Component {
+	
+	static navigationOptions(options) {
+		return { header: null };
+	}
+
+	render() {
+		return (
+			<View style={{flex: 1}}>
+				<Text>Loading...</Text>
+			</View>
+		);
+	}
+
+}
+
+const LoadingScreen = connect(
+	(state) => {
+		return {};
+	}
+)(LoadingScreenComponent)
+
+export { LoadingScreen };

ReactNativeClient/lib/components/screens/login.js

@@ -0,0 +1,91 @@
+import React, { Component } from 'react';
+import { View, Button, TextInput, Text } from 'react-native';
+import { connect } from 'react-redux'
+import { Log } from 'lib/log.js'
+import { Setting } from 'lib/models/setting.js';
+import { ScreenHeader } from 'lib/components/screen-header.js';
+import { _ } from 'lib/locale.js';
+
+class LoginScreenComponent extends React.Component {
+	
+	static navigationOptions(options) {
+		return { header: null };
+	}
+
+	constructor() {
+		super();
+		this.state = {
+			email: '',
+			password: '',
+			errorMessage: null,
+		};
+	}
+
+	componentWillMount() {
+		this.setState({ email: this.props.user.email });
+	}
+
+	email_changeText(text) {
+		this.setState({ email: text });
+	}
+
+	password_changeText(text) {
+		this.setState({ password: text });
+	}
+
+	loginButton_press() {
+		this.setState({ errorMessage: null });
+
+		// return Registry.api().post('sessions', null, {
+		// 	'email': this.state.email,
+		// 	'password': this.state.password,
+		// 	'client_id': Setting.value('clientId'),
+		// }).then((session) => {
+		// 	Log.info('Got session', session);
+
+		// 	let user = {
+		// 		email: this.state.email,
+		// 		session: session.id,
+		// 	};
+		// 	Setting.setObject('user', user);
+
+		// 	this.props.dispatch({
+		// 		type: 'USER_SET',
+		// 		user: user,
+		// 	});
+
+		// 	this.props.dispatch({
+		// 		type: 'Navigation/BACK',
+		// 	});
+
+		// 	Registry.api().setSession(session.id);
+
+		// 	//Registry.synchronizer().start();
+		// }).catch((error) => {
+		// 	this.setState({ errorMessage: _('Could not login: %s)', error.message) });
+		// });
+	}
+
+	render() {
+		return (
+			<View style={{flex: 1}}>
+				<ScreenHeader navState={this.props.navigation.state} />
+				<TextInput value={this.state.email} onChangeText={(text) => this.email_changeText(text)} keyboardType="email-address" />
+				<TextInput value={this.state.password} onChangeText={(text) => this.password_changeText(text)} secureTextEntry={true} />
+				{ this.state.errorMessage && <Text style={{color:'#ff0000'}}>{this.state.errorMessage}</Text> }
+				<Button title="Login" onPress={() => this.loginButton_press()} />
+			</View>
+		);
+	}
+
+}
+
+const LoginScreen = connect(
+	(state) => {
+		return {
+			user: state.user,
+		};
+	}
+)(LoginScreenComponent)
+
+export { LoginScreen };

ReactNativeClient/lib/components/screens/note.js

@@ -0,0 +1,123 @@
+import React, { Component } from 'react';
+import { View, Button, TextInput } from 'react-native';
+import { connect } from 'react-redux'
+import { Log } from 'lib/log.js'
+import { Note } from 'lib/models/note.js'
+import { ScreenHeader } from 'lib/components/screen-header.js';
+import { Checkbox } from 'lib/components/checkbox.js'
+import { NoteFolderService } from 'lib/services/note-folder-service.js';
+import { _ } from 'lib/locale.js';
+
+class NoteScreenComponent extends React.Component {
+	
+	static navigationOptions(options) {
+		return { header: null };
+	}
+
+	constructor() {
+		super();
+		this.state = { note: Note.new() }
+		this.originalNote = null;
+	}
+
+	componentWillMount() {
+		if (!this.props.noteId) {
+			let note = this.props.itemType == 'todo' ? Note.newTodo(this.props.folderId) : Note.new(this.props.folderId);
+			Log.info(note);
+			this.setState({ note: note });
+		} else {
+			Note.load(this.props.noteId).then((note) => {
+				this.originalNote = Object.assign({}, note);
+				this.setState({ note: note });
+			});
+		}
+	}
+
+	noteComponent_change(propName, propValue) {
+		this.setState((prevState, props) => {
+			let note = Object.assign({}, prevState.note);
+			note[propName] = propValue;
+			return { note: note }
+		});
+	}
+
+	title_changeText(text) {
+		this.noteComponent_change('title', text);
+	}
+
+	body_changeText(text) {
+		this.noteComponent_change('body', text);
+	}
+
+	saveNoteButton_press() {
+
+		console.warn('CHANGE NOT TESTED');
+
+		let isNew = !this.state.note.id;
+		let toSave = BaseModel.diffObjects(this.originalNote, this.state.note);
+		toSave.id = this.state.note.id;
+		Note.save(toSave).then((note) => {
+			this.originalNote = Object.assign({}, note);
+			this.setState({ note: note });
+			if (isNew) return Note.updateGeolocation(note.id);
+		});
+		
+		// NoteFolderService.save('note', this.state.note, this.originalNote).then((note) => {
+		// 	this.originalNote = Object.assign({}, note);
+		// 	this.setState({ note: note });
+		// });
+	}
+
+	deleteNote_onPress(noteId) {
+		Log.info('DELETE', noteId);
+	}
+
+	attachFile_onPress(noteId) {
+	}
+
+	menuOptions() {
+		return [
+			{ title: _('Attach file'), onPress: () => { this.attachFile_onPress(this.state.note.id); } },
+			{ title: _('Delete note'), onPress: () => { this.deleteNote_onPress(this.state.note.id); } },
+		];
+	}
+
+	render() {
+		const note = this.state.note;
+		const isTodo = !!Number(note.is_todo);
+		let todoComponents = null;
+
+		if (note.is_todo) {
+			todoComponents = (
+				<View>
+					<Button title="test" onPress={this.saveNoteButton_press} />
+				</View>
+			);
+		}
+
+		return (
+			<View style={{flex: 1}}>
+				<ScreenHeader navState={this.props.navigation.state} menuOptions={this.menuOptions()} />
+				<View style={{ flexDirection: 'row' }}>
+					{ isTodo && <Checkbox checked={!!Number(note.todo_completed)} /> }<TextInput style={{flex:1}} value={note.title} onChangeText={(text) => this.title_changeText(text)} />
+				</View>
+				<TextInput style={{flex: 1, textAlignVertical: 'top'}} multiline={true} value={note.body} onChangeText={(text) => this.body_changeText(text)} />
+				{ todoComponents }
+				<Button title="Save note" onPress={() => this.saveNoteButton_press()} />
+			</View>
+		);
+	}
+
+}
+
+const NoteScreen = connect(
+	(state) => {
+		return {
+			noteId: state.selectedNoteId,
+			folderId: state.selectedFolderId,
+			itemType: state.selectedItemType,
+		};
+	}
+)(NoteScreenComponent)
+
+export { NoteScreen };

ReactNativeClient/lib/components/screens/notes.js

@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+import { View, Button, Picker } from 'react-native';
+import { connect } from 'react-redux'
+import { Log } from 'lib/log.js'
+import { NoteList } from 'lib/components/note-list.js'
+import { Folder } from 'lib/models/folder.js'
+import { ScreenHeader } from 'lib/components/screen-header.js';
+import { MenuOption, Text } from 'react-native-popup-menu';
+import { _ } from 'lib/locale.js';
+import { ActionButton } from 'lib/components/action-button.js';
+
+class NotesScreenComponent extends React.Component {
+	
+	static navigationOptions(options) {
+		return { header: null };
+	}
+
+	deleteFolder_onPress(folderId) {
+		Folder.delete(folderId).then(() => {
+			this.props.dispatch({
+				type: 'Navigation/NAVIGATE',
+				routeName: 'Folders',
+			});
+		}).catch((error) => {
+			alert(error.message);
+		});
+	}
+
+	editFolder_onPress(folderId) {
+		this.props.dispatch({
+			type: 'Navigation/NAVIGATE',
+			routeName: 'Folder',
+			folderId: folderId,
+		});
+	}
+
+	menuOptions() {
+		return [
+			{ title: _('Delete folder'), onPress: () => { this.deleteFolder_onPress(this.props.selectedFolderId); } },
+			{ title: _('Edit folder'), onPress: () => { this.editFolder_onPress(this.props.selectedFolderId); } },
+		];
+	}
+
+	render() {
+		let folder = Folder.byId(this.props.folders, this.props.selectedFolderId);
+		let title = folder ? folder.title : null;
+
+		const { navigate } = this.props.navigation;
+		return (
+			<View style={{flex: 1}}>
+				<ScreenHeader title={title} navState={this.props.navigation.state} menuOptions={this.menuOptions()} />
+				<NoteList style={{flex: 1}}/>
+				<ActionButton parentFolderId={this.props.selectedFolderId}></ActionButton>
+			</View>
+		);
+	}
+}
+
+const NotesScreen = connect(
+	(state) => {
+		return {
+			folders: state.folders,
+			selectedFolderId: state.selectedFolderId,
+		};
+	}
+)(NotesScreenComponent)
+
+export { NotesScreen };