Show created notes on the main page

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;
     };