Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 74c054a

Browse files
Note details page - Creation & Editing improvement (#9)
* Apply common background to the note details page * Improve note creation page layout The improvements are focused on simplifying the layout and UX: * removed labels for both title and note content forms * improved the visibility of both forms * removed separator between title and note content * added default placeholder to ensure the understanding of each form purpose * fixed the bug when default layout (sizes) of forms is different than at window's resize event * Add cancelation confirmation alert To prevent unintentional Cancel button pressed the Alert will be displayed asking the user for a cancel confirmation. * Modify the note regarding the index instead of ID * Provide the database handler with the Update() method * Return the ID of currently open note * Implement the full editing page The editing page (in the code is NoteWidgetDetailsPanel) is the page responsible for viewing and optionaly editing the selected note. The whole code has been reused from the Note creation page, but has been additionaly provided with: * Save & Edit button Each changes the isEditing state which manipulates the forms editable property. * Title and full message pulled from the database on the component mounted event * ID of the component is taken from the NoteWidgetClickHandler This ensures that once each note is clicked, the proper text will be displayed in the forms. * Fix: Cancel alert reacts no matter the editing state When not editing, but pressing the Cancel button, the alert should not pop out. To fix that, the isEditing state is checked when pressing Cancel instead of the title and message forms. * Fix: Short message is displayed in the form To display the full message Databse handler had to be provided with the Promise-based REACT_METHOD which should return the full message. Also the copy-paste error has been fixed, where getNoteShortPost was used just like for the NoteWidget in the main panel. * Provide the details page with the delete function The delete procedure is based on the Database handler which performs the whole deleting operation on the C++ backend side. * Fix: Height is not calculated on entry * Correct minor formatiing issues
1 parent 32c11f1 commit 74c054a

File tree

6 files changed

+260
-90
lines changed

6 files changed

+260
-90
lines changed

‎src/CreateNotePanel.js‎

Lines changed: 56 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,10 @@ import {
99
AppRegistry,
1010
NativeModules,
1111
StyleSheet,
12-
Text,
1312
TextInput,
1413
View,
1514
Dimensions,
1615
Button,
17-
ScrollView,
1816
} from 'react-native';
1917

2018

@@ -25,23 +23,12 @@ class CreateNotePanel extends React.Component {
2523
constructor(props) {
2624
super(props);
2725
this.state = {
28-
id: 0,
2926
title: "",
3027
message: "",
31-
windowWidth: window.width - 100,
32-
windowHeight: window.height - 150
28+
windowHeight: window.height
3329
}
3430
};
3531

36-
getID = () => {
37-
this.setState({id: NativeModules.Database.getNoteTitle(
38-
function(result)
39-
{
40-
Alert.alert('test', `${result}`);
41-
}
42-
)});
43-
};
44-
4532
componentDidMount() {
4633
Dimensions.addEventListener("change", this.windowDimensionOnChange);
4734
};
@@ -54,6 +41,14 @@ class CreateNotePanel extends React.Component {
5441
this.setState({windowWidth: window.width, windowHeight: window.height});
5542
};
5643

44+
calculateTitleFormWidth = () => {
45+
return Dimensions.get("window").width - 100;
46+
};
47+
48+
calculateMessageFormWidth = () => {
49+
return Dimensions.get("window").width - 100;
50+
};
51+
5752
titleOnChange = (text) => {
5853
this.setState({title: text});
5954
};
@@ -63,11 +58,26 @@ class CreateNotePanel extends React.Component {
6358
}
6459

6560
calculateMessagePanelHeight = () => {
66-
return this.state.windowHeight - (styles.titlePanel.height +styles.actionsPanel.height);
61+
return Dimensions.get("window").height - styles.titlePanel.height -100;
6762
};
6863

6964
cancelButtonPressed = () => {
70-
NativeModules.NoteWidgetClickHandler.goToNotesScreen();
65+
if(this.state.title !== "" || this.state.message !== "") {
66+
Alert.alert("Are you sure?", "It looks like you still have unsaved changes, which are going to be lost.",
67+
[
68+
{
69+
text: "No!",
70+
style: "cancel"
71+
},
72+
{
73+
text: "Yes, cancel!",
74+
onPress: () => NativeModules.NoteWidgetClickHandler.goToNotesScreen()
75+
}
76+
])
77+
}
78+
else {
79+
NativeModules.NoteWidgetClickHandler.goToNotesScreen();
80+
}
7181
};
7282

7383
createButtonPressed = () => {
@@ -78,33 +88,29 @@ class CreateNotePanel extends React.Component {
7888

7989
render() {
8090
return (
81-
<ScrollView>
82-
<View style={styles.mainPanel}>
83-
84-
<View style={styles.titlePanel}>
85-
<Text>Title:</Text>
86-
<TextInput style={[styles.titleBox, {width: this.state.windowWidth - 100}]} onChangeText={this.titleOnChange} value={this.state.title}/>
87-
</View>
88-
89-
<View style={styles.divider}>
90-
</View>
91-
92-
<View style={styles.noteMessagePanel}>
93-
<Text>Post your note message here:</Text>
94-
<TextInput style={[styles.noteMessageBox, { height: this.calculateMessagePanelHeight(), width: this.state.windowWidth - 200}]}
95-
multiline={true}
96-
onChangeText={this.messageOnChange}
97-
value={this.state.message}
98-
/>
99-
</View>
100-
101-
<View style={styles.actionsPanel}>
102-
<Button title={"Cancel!"} onPress={this.cancelButtonPressed}></Button>
103-
<Button title={"Create!"} onPress={this.createButtonPressed}></Button>
104-
</View>
105-
91+
<View style={styles.mainPanel}>
92+
93+
<TextInput style={[styles.titleBox, {width: this.calculateTitleFormWidth()}]}
94+
onChangeText={this.titleOnChange}
95+
value={this.state.title}
96+
autoFocus={true}
97+
clearButtonMode={"while-editing"}
98+
placeholder={"Title"}
99+
/>
100+
101+
<TextInput style={[styles.noteMessageBox, { height: this.calculateMessagePanelHeight(), width: this.calculateMessageFormWidth()}]}
102+
multiline={true}
103+
onChangeText={this.messageOnChange}
104+
value={this.state.message}
105+
placeholder={"Note content"}
106+
/>
107+
108+
<View style={styles.actionsPanel}>
109+
<Button title={"Cancel!"} onPress={this.cancelButtonPressed}/>
110+
<Button title={"Create!"} onPress={this.createButtonPressed}/>
106111
</View>
107-
</ScrollView>
112+
113+
</View>
108114
);
109115
}
110116
};
@@ -114,12 +120,10 @@ const styles = StyleSheet.create({
114120
mainPanel: {
115121
flex: 1,
116122
flexDirection: "column",
117-
alignItems: "center"
123+
alignItems: "center",
124+
margin: 30
118125
},
119126
titlePanel: {
120-
flex: 1,
121-
flexDirection: "row",
122-
margin: 10,
123127
height: 60,
124128
},
125129
titleBox: {
@@ -128,29 +132,22 @@ const styles = StyleSheet.create({
128132
borderRightWidth: 0,
129133
borderBottomWidth: 1,
130134
borderTopWidth: 0,
131-
alignContent: "center",
132-
textAlignVertical: "center",
133-
borderColor: "#D0D0D0"
134-
},
135-
divider: {
136-
borderColor: "black",
137-
borderWidth: 0.5,
138-
height: 1,
139-
alignSelf: "stretch",
140-
},
141-
noteMessagePanel: {
142-
margin: 50,
135+
borderColor: "#D0D0D0",
136+
color: "blue"
143137
},
144138
noteMessageBox: {
145139
borderWidth: 0.2,
140+
margin: 10,
146141
borderColor: "#D0D0D0",
147142
alignContent: "center",
148143
textAlignVertical: "center",
149144
},
150145
actionsPanel: {
151146
flex: 1,
152147
flexDirection: "row",
153-
height: 60,
148+
justifyContent: "space-around",
149+
width: 500,
150+
height: 40,
154151
}
155152
});
156153

‎src/NoteWidgetDetailsPanel.js‎

Lines changed: 166 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,43 +5,193 @@
55

66
import React from 'react';
77
import {
8+
Alert,
89
AppRegistry,
9-
Button,
10+
NativeModules,
1011
StyleSheet,
11-
Text,
12+
TextInput,
1213
View,
13-
NativeModules,
14+
Dimensions,
15+
Button,
1416
} from 'react-native';
1517

1618

19+
const window = Dimensions.get("window");
20+
1721
class NoteWidgetDetailsPanel extends React.Component {
22+
constructor(props) {
23+
super(props);
24+
this.state = {
25+
id: 0,
26+
title: "",
27+
message: "",
28+
isEditing: false,
29+
windowHeight: window.height
30+
}
31+
};
32+
33+
componentDidMount() {
34+
NativeModules.NoteWidgetClickHandler.openedNoteID()
35+
.then(result => {
36+
this.setState({id: result});
37+
this.getNoteTitle();
38+
this.getNoteMessage();
39+
})
40+
.catch(error => {Alert.alert("ERROR!", `Could not find the opened note\n${error}`)});
41+
42+
Dimensions.addEventListener("change", this.windowDimensionOnChange);
43+
};
44+
45+
componentWillUnmount() {
46+
Dimensions.removeEventListener("change", this.windowDimensionOnChange);
47+
};
48+
49+
windowDimensionOnChange = ({window, screen}) => {
50+
this.setState({windowWidth: window.width, windowHeight: window.height});
51+
};
52+
53+
calculateTitleFormWidth = () => {
54+
return Dimensions.get("window").width - 100;
55+
};
56+
57+
calculateMessageFormWidth = () => {
58+
return Dimensions.get("window").width - 100;
59+
};
60+
61+
titleOnChange = (text) => {
62+
this.setState({title: text});
63+
};
64+
65+
messageOnChange = (text) => {
66+
this.setState({message: text});
67+
}
68+
69+
calculateMessagePanelHeight = () => {
70+
return Dimensions.get("window").height - styles.titlePanel.height - 100;
71+
};
1872

19-
goBack = () => {
20-
NativeModules.NoteWidgetClickHandler.goToNotesScreen();
73+
getNoteTitle = () => {
74+
NativeModules.Database.getNoteTitle(this.state.id)
75+
.then(result => {this.setState({title: result})})
76+
.catch(error => Alert.alert("ERROR!", `${error}`));
2177
};
2278

79+
getNoteMessage = () => {
80+
NativeModules.Database.getNotePost(this.state.id)
81+
.then(result => {this.setState({message: result})})
82+
.catch(error => Alert.alert("ERROR!", `${error}`));
83+
};
84+
85+
cancelButtonPressed = () => {
86+
if(this.state.isEditing) {
87+
Alert.alert("Are you sure?", "It looks like you still have unsaved changes, which are going to be lost.",
88+
[
89+
{
90+
text: "No!",
91+
style: "cancel"
92+
},
93+
{
94+
text: "Yes, cancel!",
95+
onPress: () => NativeModules.NoteWidgetClickHandler.goToNotesScreen()
96+
}
97+
])
98+
}
99+
else {
100+
NativeModules.NoteWidgetClickHandler.goToNotesScreen();
101+
}
102+
};
103+
104+
saveButtonPressed = () => {
105+
NativeModules.Database.updateNote(this.state.title, this.state.message, this.state.id);
106+
this.setState({isEditing: false});
107+
}
108+
109+
editButtonPressed = () => {
110+
this.setState({isEditing: true});
111+
};
112+
113+
deleteButtonPressed = () => {
114+
Alert.alert("Are you sure?", "Deleting the note cannot be reversed...",
115+
[
116+
{
117+
text: "No!",
118+
style: "cancel"
119+
},
120+
{ text: "Yes, delete!", onPress: () => {
121+
NativeModules.Database.deleteNote(this.state.id);
122+
NativeModules.NoteWidgetClickHandler.goToNotesScreen();
123+
}}
124+
])
125+
};
126+
127+
23128
render() {
24-
return(
25-
<View style={styles.panel}>
26-
<View style={styles.panelContent}>
27-
<Text>Note details panel</Text>
28-
<Button onPress={this.goBack} title={"Go back..."}></Button>
129+
return (
130+
<View style={styles.mainPanel}>
131+
132+
<TextInput style={[styles.titleBox, {width: this.calculateTitleFormWidth()}]}
133+
onChangeText={this.titleOnChange}
134+
value={this.state.title}
135+
autoFocus={true}
136+
clearButtonMode={"while-editing"}
137+
placeholder={"Title"}
138+
editable={this.state.isEditing}
139+
/>
140+
141+
<TextInput style={[styles.noteMessageBox, { height: this.calculateMessagePanelHeight(), width: this.calculateMessageFormWidth()}]}
142+
multiline={true}
143+
onChangeText={this.messageOnChange}
144+
value={this.state.message}
145+
placeholder={"Note content"}
146+
editable={this.state.isEditing}
147+
/>
148+
149+
<View style={styles.actionsPanel}>
150+
<Button title={"Cancel!"} onPress={this.cancelButtonPressed}/>
151+
<Button title={"Edit"} disabled={this.state.isEditing} onPress={this.editButtonPressed}/>
152+
<Button title={"Save"} disabled={!this.state.isEditing} onPress={this.saveButtonPressed}/>
153+
<Button title={"Delete"} onPress={this.deleteButtonPressed}/>
29154
</View>
155+
30156
</View>
31157
);
32158
}
33159
};
34160

35161

162+
36163
const styles = StyleSheet.create({
37-
panel: {
38-
height: 75,
39-
borderColor: "black",
40-
borderWidth: 1,
41-
},
42-
panelContent: {
164+
mainPanel: {
43165
flex: 1,
44166
flexDirection: "column",
167+
alignItems: "center",
168+
margin: 30
169+
},
170+
titlePanel: {
171+
height: 60,
172+
},
173+
titleBox: {
174+
height: 35,
175+
borderLeftWidth: 0,
176+
borderRightWidth: 0,
177+
borderBottomWidth: 1,
178+
borderTopWidth: 0,
179+
borderColor: "#D0D0D0",
180+
color: "blue"
181+
},
182+
noteMessageBox: {
183+
borderWidth: 0.2,
184+
margin: 10,
185+
borderColor: "#D0D0D0",
186+
alignContent: "center",
187+
textAlignVertical: "center",
188+
},
189+
actionsPanel: {
190+
flex: 1,
191+
flexDirection: "row",
192+
justifyContent: "space-around",
193+
width: 500,
194+
height: 40,
45195
}
46196
});
47197

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /