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

Author: BartoszKlonowski

src/NotesMainPanel.js

@@ -5,9 +5,11 @@
 
 import React from 'react';
 import {
+  Alert,
   AppRegistry,
   Dimensions,
   FlatList,
+  NativeModules,
   StyleSheet,
   View,
 } from 'react-native';
@@ -23,36 +25,52 @@ class NotesMainPanel extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      notes: [{key: "1"}, {key: "2"}, {key: "3"}, {key: "4"}, {key: "5"}, {key: "6"}, {key: "7"}, {key: "8"}, {key: "9"}],
+      notes: [],
       dimensions: {window, screen},
       columns: this.calculateColumnWidth(window),
     }
   };
 
   calculateColumnWidth = (window) => {
-    return Math.floor(window.width / noteWidgetWidth);
+    return Math.floor(Dimensions.get("window").width / noteWidgetWidth);
   };
 
   onChange = ({ window, screen }) => {
     this.setState({ dimensions: { window, screen }, columns: this.calculateColumnWidth(window) });
   };
 
   componentDidMount() {
+    this.getDataFromDatabase();
     Dimensions.addEventListener("change", this.onChange);
   };
 
   componentWillUnmount() {
     Dimensions.removeEventListener("change", this.onChange);
   };
 
+  createNotesKeys = (numberOfNotes) => {
+    let allNotesKeys = [];
+    for(id = 0; id < numberOfNotes; id++) {
+      const nextObject = {key: id};
+      allNotesKeys.push(nextObject);
+    }
+    this.setState({notes: allNotesKeys});
+  };
+
+  getDataFromDatabase = () => {
+    NativeModules.Database.getNumberOfNotes()
+      .then(result => this.createNotesKeys(result))
+      .catch(error => Alert.alert("ERROR!", `Result: ${error}`));
+  };
+
   renderNote = notes => {
     return <NoteWidget width={noteWidgetWidth} ID={notes.item.key}/>
   };
 
   render() {
     return(
       <View style={styles.mainContainer}>
-        <FlatList numColumns={this.state.columns} key={this.state.columns} data={this.state.notes} renderItem={this.renderNote}/>
+        <FlatList key={this.state.columns} numColumns={this.state.columns} data={this.state.notes} renderItem={this.renderNote}/>
       </View>
     );
   }

src/Widgets/NoteWidget.js

@@ -3,59 +3,74 @@
  * @flow strict-local
  */
 
-import React from 'react';
+import React, {useState, useEffect} from 'react';
 import {
   AppRegistry,
   StyleSheet,
   Text,
   TouchableHighlight,
   View,
   NativeModules,
+  Alert,
 } from 'react-native';
 
 
-class NoteWidget extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      width: props.width,
-      ID: Number(props.ID),
-    }
-  };
+export default function NoteWidget(props){
+  const {width, ID} = props;
+
+  const [title, setTitle] = useState("");
+  const [shortMessage, setShortMessage] = useState("");
+
+  useEffect(() => {
+    getNoteTitle();
+    getNoteShortMessage();
+  }, []);
 
-  enterNote = () => {
-    NativeModules.NoteWidgetClickHandler.openWidget(this.state.ID);
+  const enterNote = () => {
+    NativeModules.NoteWidgetClickHandler.openWidget(ID);
   };
 
-  render() {
-    return(
-      <TouchableHighlight onPress={this.enterNote} style={styles.noteWidget} underlayColor={'transparent'}>
-        <View style={{width: this.state.width}}>
 
-          <View style={styles.noteHeader}>
-            <Text>{this.state.ID}</Text>
-            <View style={styles.noteTitle}>
-              <Text style={{textAlign: "center"}}>Header</Text>
-            </View>
-          </View>
+  const getNoteTitle = () => {
+    NativeModules.Database.getNoteTitle(ID)
+      .then(result => setTitle(result))
+      .catch(error => Alert.alert("ERROR!", `${error}`));
+  };
+
+  const getNoteShortMessage = () => {
+    NativeModules.Database.getNoteShortPost(ID)
+      .then(result => setShortMessage(result))
+      .catch(error => Alert.alert("ERROR!", `${error}`));
+  };
 
-          <View style={styles.noteSeparator}></View>
+  return(
+    <TouchableHighlight onPress={enterNote} style={styles.noteWidget} underlayColor={'transparent'}>
+      <View style={{width: width}}>
 
-          <View style={styles.noteMainContent}>
-            <Text>
-              This is the single widget
-              {'\n'}With the text written here only for the presentation purpose.
+        <View style={styles.noteHeader}>
+          <Text>{ID}</Text>
+          <View style={styles.noteTitle}>
+            <Text style={{textAlign: "center"}}>
+              {title}
             </Text>
-            <Text>This note has the ID: {this.state.ID}</Text>
           </View>
+        </View>
+
+        <View style={styles.noteSeparator}></View>
 
+        <View style={styles.noteMainContent}>
+          <Text>
+            {shortMessage}
+          </Text>
         </View>
-      </TouchableHighlight>
-    );
-  }
+
+      </View>
+    </TouchableHighlight>
+  );
 };
 
 
+
 const styles = StyleSheet.create({
   noteWidget: {
     borderColor: "grey",
@@ -95,4 +110,3 @@ const styles = StyleSheet.create({
 
 AppRegistry.registerComponent("NoteWidget", () => NoteWidget);
 
-export default NoteWidget;

windows/ReactNativeNotes/App.cpp

@@ -53,7 +53,7 @@ void App::OnLaunched(activation::LaunchActivatedEventArgs const& e)
     super::OnLaunched(e);
 
     Frame rootFrame = Window::Current().Content().as<Frame>();
-    rootFrame.Navigate(xaml_typename<ReactNativeNotes::NotesPage>(), box_value(e.Arguments()));
+    rootFrame.Navigate(xaml_typename<ReactNativeNotes::MainPage>(), box_value(e.Arguments()));
 }
 
 /// <summary>

windows/ReactNativeNotes/NativeModules/DatabaseHandler.hpp

@@ -24,21 +24,45 @@ namespace winrt::ReactNativeNotes::implementation
         }
 
         REACT_METHOD( GetNoteTitle, L"getNoteTitle" );
-        const winrt::hstring GetNoteTitle( const unsigned int ID ) noexcept
+        void GetNoteTitle( const int index, React::ReactPromise<React::JSValue>&& result ) noexcept
         {
-            return winrt::to_hstring(data->Read( ID ).Title());
+            result.Resolve( React::JSValue( data->Read( index ).Title() ) );
         }
 
         REACT_METHOD( GetNotePost, L"getNotePost" );
-        const winrt::hstring GetNotePost( const unsigned int ID ) noexcept
+        const winrt::hstring GetNotePost( const int index ) noexcept
         {
-            return winrt::to_hstring( data->Read( ID ).Post() );
+            return winrt::to_hstring( data->Read( index ).Post() );
         }
 
         REACT_METHOD( GetNoteShortPost, L"getNoteShortPost" );
-        const winrt::hstring GetNoteShortPost( const unsigned int ID ) noexcept
+        void GetNoteShortPost( const int index, React::ReactPromise<React::JSValue>&& result ) noexcept
         {
-            return winrt::to_hstring( data->Read( ID ).ShortPost() );
+            result.Resolve( React::JSValue( data->Read( index ).ShortPost() ) );
+        }
+
+        REACT_METHOD( GetNumberOfNotes, L"getNumberOfNotes" );
+        void GetNumberOfNotes( React::ReactPromise<React::JSValue>&& result ) noexcept
+        {
+            result.Resolve( React::JSValue( std::to_string(data->Size()) ) );
+        }
+
+        REACT_METHOD( DoesIDExists, L"doesIDExists" );
+        const bool DoesIDExists( const unsigned int ID ) noexcept
+        {
+            return data->Exists( ID );
+        }
+
+        REACT_METHOD( GetAllNotesIDs, L"getAllNotesIDs" );
+        Microsoft::ReactNative::JSValue GetAllNotesIDs() noexcept
+        {
+            Microsoft::ReactNative::JSValueArray keyArray;
+            for( unsigned int i = 0; i < data->Size(); ++i )
+            {
+                if( data->Exists( i ) )
+                    keyArray.push_back( Microsoft::ReactNative::JSValueObject{ { "key", i } } );
+            }
+            return Microsoft::ReactNative::JSValue( std::move( keyArray ) );
         }
 
     private:

windows/ReactNativeNotes/NativeModules/Repository/Repository.cpp

@@ -20,6 +20,14 @@ namespace winrt::ReactNativeNotes::implementation
         return NoteModel();
     }
 
+    NoteModel Repository::Read( const int index ) const noexcept
+    {
+        if( index >= notes.size() )
+            return NoteModel();
+        else
+            return notes.at(index);
+    }
+
     void Repository::Update( const NoteModel& note ) noexcept
     {
         for( unsigned int index = 0; index < notes.size(); ++index )
@@ -36,8 +44,22 @@ namespace winrt::ReactNativeNotes::implementation
         notes.erase( it );
     }
 
+    void Repository::Delete( const int index ) noexcept
+    {
+        notes.erase( notes.cbegin() + index );
+    }
+
     unsigned int Repository::Size() const noexcept
     {
         return notes.size();
     }
+
+    const bool Repository::Exists( const unsigned int ID ) const noexcept
+    {
+        return std::find_if( notes.cbegin(), notes.cend(), [=]( const NoteModel& n )->bool { return n.ID() == ID; } ) != notes.cend();
+    }
+    const bool Repository::Exists( const int index ) const noexcept
+    {
+        return index < notes.size();
+    }
 }

windows/ReactNativeNotes/NativeModules/Repository/Repository.hpp

@@ -19,13 +19,18 @@ namespace winrt::ReactNativeNotes::implementation
         void Create( NoteModel& note ) noexcept;
 
         NoteModel Read( const unsigned int ID ) const noexcept;
+        NoteModel Read( const int index ) const noexcept;
 
         void Update( const NoteModel& note ) noexcept;
 
         void Delete( const unsigned int ID ) noexcept;
+        void Delete( const int index ) noexcept;
 
         unsigned int Size() const noexcept;
 
+        const bool Exists( const unsigned int ID ) const noexcept;
+        const bool Exists( const int index ) const noexcept;
+
     private:
         std::vector<NoteModel> notes;
     };