mirror of
https://github.com/laurent22/joplin.git
synced 2024-11-24 08:12:24 +02:00
Moved screens to own files
This commit is contained in:
Laurent Cozic
parent
1c9f358f96
commit
af5d23af68
69
ReactNativeClient/src/components/screens/note.js
Normal file
69
ReactNativeClient/src/components/screens/note.js
Normal file
@ -0,0 +1,69 @@
|
||||
import React, { Component } from 'react';
|
||||
import { View, Button, TextInput } from 'react-native';
|
||||
import { connect } from 'react-redux'
|
||||
import { Log } from 'src/log.js'
|
||||
import { Note } from 'src/models/note.js'
|
||||
|
||||
class NoteScreenComponent extends React.Component {
|
||||
|
||||
static navigationOptions = {
|
||||
title: 'Note',
|
||||
};
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.state = { note: Note.newNote() }
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.setState({ note: this.props.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 = () => {
|
||||
Note.save(this.state.note).then((note) => {
|
||||
this.props.dispatch({
|
||||
type: 'NOTES_UPDATE_ONE',
|
||||
note: note,
|
||||
});
|
||||
}).catch((error) => {
|
||||
Log.warn('Cannot save note', error);
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={{flex: 1}}>
|
||||
<TextInput value={this.state.note.title} onChangeText={this.title_changeText} />
|
||||
<TextInput style={{flex: 1, textAlignVertical: 'top'}} multiline={true} value={this.state.note.body} onChangeText={this.body_changeText} />
|
||||
<Button title="Save note" onPress={this.saveNoteButton_press} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const NoteScreen = connect(
|
||||
(state) => {
|
||||
return {
|
||||
note: state.selectedNoteId ? Note.noteById(state.notes, state.selectedNoteId) : Note.newNote(),
|
||||
};
|
||||
}
|
||||
)(NoteScreenComponent)
|
||||
|
||||
export { NoteScreen };
|
||||
49
ReactNativeClient/src/components/screens/notes.js
Normal file
49
ReactNativeClient/src/components/screens/notes.js
Normal file
@ -0,0 +1,49 @@
|
||||
import React, { Component } from 'react';
|
||||
import { View, Button } from 'react-native';
|
||||
import { connect } from 'react-redux'
|
||||
import { Log } from 'src/log.js'
|
||||
import { ItemList } from 'src/components/item-list.js'
|
||||
|
||||
class NotesScreenComponent extends React.Component {
|
||||
|
||||
static navigationOptions = {
|
||||
title: 'Notes',
|
||||
};
|
||||
|
||||
createNoteButton_press = () => {
|
||||
this.props.dispatch({
|
||||
type: 'Navigation/NAVIGATE',
|
||||
routeName: 'Note',
|
||||
});
|
||||
}
|
||||
|
||||
loginButton_press = () => {
|
||||
|
||||
}
|
||||
|
||||
syncButton_press = () => {
|
||||
Log.info('SYNC');
|
||||
}
|
||||
|
||||
render() {
|
||||
const { navigate } = this.props.navigation;
|
||||
return (
|
||||
<View style={{flex: 1}}>
|
||||
<ItemList style={{flex: 1}}/>
|
||||
<View style={{flexDirection: 'row'}}>
|
||||
<Button title="Create note" onPress={this.createNoteButton_press} />
|
||||
<Button title="Login" onPress={this.loginButton_press} />
|
||||
<Button title="Sync" onPress={this.syncButton_press} />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const NotesScreen = connect(
|
||||
(state) => {
|
||||
return {};
|
||||
}
|
||||
)(NotesScreenComponent)
|
||||
|
||||
export { NotesScreen };
|
||||
@ -1,8 +1,15 @@
|
||||
// Note about the application structure:
|
||||
// - The user interface and its state is managed by React/Redux.
|
||||
// - Persistent storage to SQLite and Web API is handled outside of React/Redux using regular JavaScript (no middleware, no thunk, etc.).
|
||||
// - Communication from React to SQLite is done by calling model methods (note.save, etc.)
|
||||
// - Communication from SQLite to Redux is done via dispatcher.
|
||||
|
||||
// So there's basically still a one way flux: React => SQLite => Redux => React
|
||||
|
||||
import { AppRegistry } from 'react-native';
|
||||
import { Log } from 'src/log.js'
|
||||
import { Root } from 'src/root.js';
|
||||
import { Registry } from 'src/registry.js';
|
||||
import { Database } from 'src/database.js';
|
||||
|
||||
function main() {
|
||||
Registry.setDebugMode(true);
|
||||
|
||||
@ -11,6 +11,8 @@ import { Note } from 'src/models/note.js'
|
||||
import { Database } from 'src/database.js'
|
||||
import { Registry } from 'src/registry.js'
|
||||
import { ItemList } from 'src/components/item-list.js'
|
||||
import { NotesScreen } from 'src/components/screens/notes.js'
|
||||
import { NoteScreen } from 'src/components/screens/note.js'
|
||||
import { Setting } from 'src/models/setting.js'
|
||||
|
||||
let defaultState = {
|
||||
@ -83,110 +85,6 @@ const reducer = (state = defaultState, action) => {
|
||||
|
||||
let store = createStore(reducer);
|
||||
|
||||
class NotesScreenComponent extends React.Component {
|
||||
|
||||
static navigationOptions = {
|
||||
title: 'Notes',
|
||||
};
|
||||
|
||||
createNoteButton_press = () => {
|
||||
this.props.dispatch({
|
||||
type: 'Navigation/NAVIGATE',
|
||||
routeName: 'Note',
|
||||
});
|
||||
}
|
||||
|
||||
loginButton_press = () => {
|
||||
|
||||
}
|
||||
|
||||
syncButton_press = () => {
|
||||
Log.info('SYNC');
|
||||
}
|
||||
|
||||
render() {
|
||||
const { navigate } = this.props.navigation;
|
||||
return (
|
||||
<View style={{flex: 1}}>
|
||||
<ItemList style={{flex: 1}}/>
|
||||
<View style={{flexDirection: 'row'}}>
|
||||
<Button title="Create note" onPress={this.createNoteButton_press} />
|
||||
<Button title="Login" onPress={this.loginButton_press} />
|
||||
<Button title="Sync" onPress={this.syncButton_press} />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const NotesScreen = connect(
|
||||
(state) => {
|
||||
return {};
|
||||
}
|
||||
)(NotesScreenComponent)
|
||||
|
||||
class NoteScreenComponent extends React.Component {
|
||||
|
||||
static navigationOptions = {
|
||||
title: 'Note',
|
||||
};
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.state = { note: Note.newNote() }
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.setState({ note: this.props.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 = () => {
|
||||
Note.save(this.state.note).then((note) => {
|
||||
this.props.dispatch({
|
||||
type: 'NOTES_UPDATE_ONE',
|
||||
note: note,
|
||||
});
|
||||
}).catch((error) => {
|
||||
Log.warn('Cannot save note', error);
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={{flex: 1}}>
|
||||
<TextInput value={this.state.note.title} onChangeText={this.title_changeText} />
|
||||
<TextInput style={{flex: 1, textAlignVertical: 'top'}} multiline={true} value={this.state.note.body} onChangeText={this.body_changeText} />
|
||||
<Button title="Save note" onPress={this.saveNoteButton_press} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const NoteScreen = connect(
|
||||
(state) => {
|
||||
return {
|
||||
note: state.selectedNoteId ? Note.noteById(state.notes, state.selectedNoteId) : Note.newNote(),
|
||||
};
|
||||
}
|
||||
)(NoteScreenComponent)
|
||||
|
||||
const AppNavigator = StackNavigator({
|
||||
Notes: {screen: NotesScreen},
|
||||
Note: {screen: NoteScreen},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user