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 226c21f

Browse files
Show created notes on the main page (#7)
* Create notes dependning on the number of created notes This implementation adds several methods to the Database handler class: * GetNumberOfNotes - returns the number of notes already created by the user in the system. It considers only the size of the repository, without checking the correctness of the IDs. * DoesIDExists - checks whether the notes with the given ID exists in the Database * GetAllNotes - alternate version of creating the notes keys' method. It returns the array of already created objects containing the Key and it's value. This is experimental and not yet fully tested/supported. Note that the `GetNumberOfNotes` method uses Promise instead of return callback. This is due to the fact of async nature of native modules. So to avoid losing the information of returned value when going out of the return handler, the promise is used which carries the result. * Go the main page when entering the app * Overload the CRUD operations for index The index can now be used as a parameter for all the CRUD operations done on the Repository. This is to allow the easier manipulations when it comes to all notes no matter if they Id matches the db position. The purpose of this implementation is to make sure that in the future the index and the ID will be separate and the logic behind adding/removing and displaying the content will be more flexible. * Use Promise instead of callback for the Database The Database native module has all the methods returning values used asynchronously, but their results are considered as states on the JS side. To avoid loosing the data the Promise has been used to make the database pull more dynamic. * Pull title and short message when creating note widget * Use Hooks in NoteWidget
1 parent c86c89f commit 226c21f

File tree

6 files changed

+124
-41
lines changed

6 files changed

+124
-41
lines changed

‎src/NotesMainPanel.js‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@
55

66
import React from 'react';
77
import {
8+
Alert,
89
AppRegistry,
910
Dimensions,
1011
FlatList,
12+
NativeModules,
1113
StyleSheet,
1214
View,
1315
} from 'react-native';
@@ -23,36 +25,52 @@ class NotesMainPanel extends React.Component {
2325
constructor(props) {
2426
super(props);
2527
this.state = {
26-
notes: [{key: "1"},{key: "2"},{key: "3"},{key: "4"},{key: "5"},{key: "6"},{key: "7"},{key: "8"},{key: "9"}],
28+
notes: [],
2729
dimensions: {window, screen},
2830
columns: this.calculateColumnWidth(window),
2931
}
3032
};
3133

3234
calculateColumnWidth = (window) => {
33-
return Math.floor(window.width / noteWidgetWidth);
35+
return Math.floor(Dimensions.get("window").width / noteWidgetWidth);
3436
};
3537

3638
onChange = ({ window, screen }) => {
3739
this.setState({ dimensions: { window, screen }, columns: this.calculateColumnWidth(window) });
3840
};
3941

4042
componentDidMount() {
43+
this.getDataFromDatabase();
4144
Dimensions.addEventListener("change", this.onChange);
4245
};
4346

4447
componentWillUnmount() {
4548
Dimensions.removeEventListener("change", this.onChange);
4649
};
4750

51+
createNotesKeys = (numberOfNotes) => {
52+
let allNotesKeys = [];
53+
for(id = 0; id < numberOfNotes; id++) {
54+
const nextObject = {key: id};
55+
allNotesKeys.push(nextObject);
56+
}
57+
this.setState({notes: allNotesKeys});
58+
};
59+
60+
getDataFromDatabase = () => {
61+
NativeModules.Database.getNumberOfNotes()
62+
.then(result => this.createNotesKeys(result))
63+
.catch(error => Alert.alert("ERROR!", `Result: ${error}`));
64+
};
65+
4866
renderNote = notes => {
4967
return <NoteWidget width={noteWidgetWidth} ID={notes.item.key}/>
5068
};
5169

5270
render() {
5371
return(
5472
<View style={styles.mainContainer}>
55-
<FlatList numColumns={this.state.columns} key={this.state.columns} data={this.state.notes} renderItem={this.renderNote}/>
73+
<FlatList key={this.state.columns} numColumns={this.state.columns} data={this.state.notes} renderItem={this.renderNote}/>
5674
</View>
5775
);
5876
}

‎src/Widgets/NoteWidget.js‎

Lines changed: 45 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,59 +3,74 @@
33
* @flow strict-local
44
*/
55

6-
import React from 'react';
6+
import React,{useState,useEffect} from 'react';
77
import {
88
AppRegistry,
99
StyleSheet,
1010
Text,
1111
TouchableHighlight,
1212
View,
1313
NativeModules,
14+
Alert,
1415
} from 'react-native';
1516

1617

17-
class NoteWidget extends React.Component {
18-
constructor(props) {
19-
super(props);
20-
this.state = {
21-
width: props.width,
22-
ID: Number(props.ID),
23-
}
24-
};
18+
export default function NoteWidget(props){
19+
const {width, ID} = props;
20+
21+
const [title, setTitle] = useState("");
22+
const [shortMessage, setShortMessage] = useState("");
23+
24+
useEffect(() => {
25+
getNoteTitle();
26+
getNoteShortMessage();
27+
}, []);
2528

26-
enterNote = () => {
27-
NativeModules.NoteWidgetClickHandler.openWidget(this.state.ID);
29+
constenterNote = () => {
30+
NativeModules.NoteWidgetClickHandler.openWidget(ID);
2831
};
2932

30-
render() {
31-
return(
32-
<TouchableHighlight onPress={this.enterNote} style={styles.noteWidget} underlayColor={'transparent'}>
33-
<View style={{width: this.state.width}}>
3433

35-
<View style={styles.noteHeader}>
36-
<Text>{this.state.ID}</Text>
37-
<View style={styles.noteTitle}>
38-
<Text style={{textAlign: "center"}}>Header</Text>
39-
</View>
40-
</View>
34+
const getNoteTitle = () => {
35+
NativeModules.Database.getNoteTitle(ID)
36+
.then(result => setTitle(result))
37+
.catch(error => Alert.alert("ERROR!", `${error}`));
38+
};
39+
40+
const getNoteShortMessage = () => {
41+
NativeModules.Database.getNoteShortPost(ID)
42+
.then(result => setShortMessage(result))
43+
.catch(error => Alert.alert("ERROR!", `${error}`));
44+
};
4145

42-
<View style={styles.noteSeparator}></View>
46+
return(
47+
<TouchableHighlight onPress={enterNote} style={styles.noteWidget} underlayColor={'transparent'}>
48+
<View style={{width: width}}>
4349

44-
<View style={styles.noteMainContent}>
45-
<Text>
46-
This is the single widget
47-
{'\n'}With the text written here only for the presentation purpose.
50+
<View style={styles.noteHeader}>
51+
<Text>{ID}</Text>
52+
<View style={styles.noteTitle}>
53+
<Text style={{textAlign: "center"}}>
54+
{title}
4855
</Text>
49-
<Text>This note has the ID: {this.state.ID}</Text>
5056
</View>
57+
</View>
58+
59+
<View style={styles.noteSeparator}></View>
5160

61+
<View style={styles.noteMainContent}>
62+
<Text>
63+
{shortMessage}
64+
</Text>
5265
</View>
53-
</TouchableHighlight>
54-
);
55-
}
66+
67+
</View>
68+
</TouchableHighlight>
69+
);
5670
};
5771

5872

73+
5974
const styles = StyleSheet.create({
6075
noteWidget: {
6176
borderColor: "grey",
@@ -95,4 +110,3 @@ const styles = StyleSheet.create({
95110

96111
AppRegistry.registerComponent("NoteWidget", () => NoteWidget);
97112

98-
export default NoteWidget;

‎windows/ReactNativeNotes/App.cpp‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ void App::OnLaunched(activation::LaunchActivatedEventArgs const& e)
5353
super::OnLaunched(e);
5454

5555
Frame rootFrame = Window::Current().Content().as<Frame>();
56-
rootFrame.Navigate(xaml_typename<ReactNativeNotes::NotesPage>(), box_value(e.Arguments()));
56+
rootFrame.Navigate(xaml_typename<ReactNativeNotes::MainPage>(), box_value(e.Arguments()));
5757
}
5858

5959
/// <summary>

‎windows/ReactNativeNotes/NativeModules/DatabaseHandler.hpp‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,21 +24,45 @@ namespace winrt::ReactNativeNotes::implementation
2424
}
2525

2626
REACT_METHOD( GetNoteTitle, L"getNoteTitle" );
27-
const winrt::hstring GetNoteTitle( const unsignedint ID ) noexcept
27+
voidGetNoteTitle( const int index, React::ReactPromise<React::JSValue>&& result ) noexcept
2828
{
29-
returnwinrt::to_hstring(data->Read( ID ).Title());
29+
result.Resolve( React::JSValue( data->Read( index ).Title() ) );
3030
}
3131

3232
REACT_METHOD( GetNotePost, L"getNotePost" );
33-
const winrt::hstring GetNotePost( const unsignedint ID ) noexcept
33+
const winrt::hstring GetNotePost( const int index ) noexcept
3434
{
35-
return winrt::to_hstring( data->Read( ID ).Post() );
35+
return winrt::to_hstring( data->Read( index ).Post() );
3636
}
3737

3838
REACT_METHOD( GetNoteShortPost, L"getNoteShortPost" );
39-
const winrt::hstring GetNoteShortPost( const unsignedint ID ) noexcept
39+
voidGetNoteShortPost( const int index, React::ReactPromise<React::JSValue>&& result ) noexcept
4040
{
41-
return winrt::to_hstring( data->Read( ID ).ShortPost() );
41+
result.Resolve( React::JSValue( data->Read( index ).ShortPost() ) );
42+
}
43+
44+
REACT_METHOD( GetNumberOfNotes, L"getNumberOfNotes" );
45+
void GetNumberOfNotes( React::ReactPromise<React::JSValue>&& result ) noexcept
46+
{
47+
result.Resolve( React::JSValue( std::to_string(data->Size()) ) );
48+
}
49+
50+
REACT_METHOD( DoesIDExists, L"doesIDExists" );
51+
const bool DoesIDExists( const unsigned int ID ) noexcept
52+
{
53+
return data->Exists( ID );
54+
}
55+
56+
REACT_METHOD( GetAllNotesIDs, L"getAllNotesIDs" );
57+
Microsoft::ReactNative::JSValue GetAllNotesIDs() noexcept
58+
{
59+
Microsoft::ReactNative::JSValueArray keyArray;
60+
for( unsigned int i = 0; i < data->Size(); ++i )
61+
{
62+
if( data->Exists( i ) )
63+
keyArray.push_back( Microsoft::ReactNative::JSValueObject{ { "key", i } } );
64+
}
65+
return Microsoft::ReactNative::JSValue( std::move( keyArray ) );
4266
}
4367

4468
private:

‎windows/ReactNativeNotes/NativeModules/Repository/Repository.cpp‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,14 @@ namespace winrt::ReactNativeNotes::implementation
2020
return NoteModel();
2121
}
2222

23+
NoteModel Repository::Read( const int index ) const noexcept
24+
{
25+
if( index >= notes.size() )
26+
return NoteModel();
27+
else
28+
return notes.at(index);
29+
}
30+
2331
void Repository::Update( const NoteModel& note ) noexcept
2432
{
2533
for( unsigned int index = 0; index < notes.size(); ++index )
@@ -36,8 +44,22 @@ namespace winrt::ReactNativeNotes::implementation
3644
notes.erase( it );
3745
}
3846

47+
void Repository::Delete( const int index ) noexcept
48+
{
49+
notes.erase( notes.cbegin() + index );
50+
}
51+
3952
unsigned int Repository::Size() const noexcept
4053
{
4154
return notes.size();
4255
}
56+
57+
const bool Repository::Exists( const unsigned int ID ) const noexcept
58+
{
59+
return std::find_if( notes.cbegin(), notes.cend(), [=]( const NoteModel& n )->bool { return n.ID() == ID; } ) != notes.cend();
60+
}
61+
const bool Repository::Exists( const int index ) const noexcept
62+
{
63+
return index < notes.size();
64+
}
4365
}

‎windows/ReactNativeNotes/NativeModules/Repository/Repository.hpp‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,18 @@ namespace winrt::ReactNativeNotes::implementation
1919
void Create( NoteModel& note ) noexcept;
2020

2121
NoteModel Read( const unsigned int ID ) const noexcept;
22+
NoteModel Read( const int index ) const noexcept;
2223

2324
void Update( const NoteModel& note ) noexcept;
2425

2526
void Delete( const unsigned int ID ) noexcept;
27+
void Delete( const int index ) noexcept;
2628

2729
unsigned int Size() const noexcept;
2830

31+
const bool Exists( const unsigned int ID ) const noexcept;
32+
const bool Exists( const int index ) const noexcept;
33+
2934
private:
3035
std::vector<NoteModel> notes;
3136
};

0 commit comments

Comments
(0)

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