Create Note panel - initial layout & database connection implementation (#6)

* Make the Repository a managed instance instead of Singleton

The Singleton pattern was used for Repository to keep the data
statically in the RAM memory to avoid they destruction once the page is
reload.
It turns out that the Native Modules are implemented as static themselfs
in the RNW engine, so there's no need to use Singleton pattern.

* Provide Repository with Size parameter

* Provide CreateNote panel with initial layout

Author: BartoszKlonowski

src/CreateNotePanel.js

@@ -5,36 +5,152 @@
 
 import React from 'react';
 import {
+  Alert,
   AppRegistry,
+  NativeModules,
   StyleSheet,
   Text,
+  TextInput,
   View,
+  Dimensions,
+  Button,
+  ScrollView,
 } from 'react-native';
 
 
+const window = Dimensions.get("window");
+
+
 class CreateNotePanel extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      id: 0,
+      title: "",
+      message: "",
+      windowWidth: window.width - 100,
+      windowHeight: window.height - 150
+    }
+  };
+
+  getID = () => {
+    this.setState({id: NativeModules.Database.getNoteTitle(
+      function(result)
+      {
+        Alert.alert('test', `${result}`);
+      }
+    )});
+  };
+
+  componentDidMount() {
+    Dimensions.addEventListener("change", this.windowDimensionOnChange);
+  };
+
+  componentWillUnmount() {
+    Dimensions.removeEventListener("change", this.windowDimensionOnChange);
+  };
+
+  windowDimensionOnChange = ({window, screen}) => {
+    this.setState({windowWidth: window.width, windowHeight: window.height});
+  };
+
+  titleOnChange = (text) => {
+    this.setState({title: text});
+  };
+
+  messageOnChange = (text) => {
+    this.setState({message: text});
+  }
+
+  calculateMessagePanelHeight = () => {
+    return this.state.windowHeight - (styles.titlePanel.height + styles.actionsPanel.height);
+  };
+
+  cancelButtonPressed = () => {
+    NativeModules.NoteWidgetClickHandler.goToNotesScreen();
+  };
+
+  createButtonPressed = () => {
+    NativeModules.Database.writeNote(this.state.title, false, this.state.message);
+    NativeModules.NoteWidgetClickHandler.goToNotesScreen();
+  }
+
 
   render() {
-    return(
-      <View style={styles.panel}>
-        <View style={styles.panelContent}>
-          <Text>Create Note panel</Text>
+    return (
+      <ScrollView>
+        <View style={styles.mainPanel}>
+
+          <View style={styles.titlePanel}>
+            <Text>Title:</Text>
+            <TextInput style={[styles.titleBox, {width: this.state.windowWidth - 100}]} onChangeText={this.titleOnChange} value={this.state.title}/>
+          </View>
+
+          <View style={styles.divider}>
+          </View>
+
+          <View style={styles.noteMessagePanel}>
+            <Text>Post your note message here:</Text>
+            <TextInput style={[styles.noteMessageBox, { height: this.calculateMessagePanelHeight(), width: this.state.windowWidth - 200}]}
+              multiline={true}
+              onChangeText={this.messageOnChange}
+              value={this.state.message}
+            />
+          </View>
+
+          <View style={styles.actionsPanel}>
+            <Button title={"Cancel!"} onPress={this.cancelButtonPressed}></Button>
+            <Button title={"Create!"} onPress={this.createButtonPressed}></Button>
+          </View>
+
         </View>
-      </View>
+      </ScrollView>
     );
   }
 };
 
 
 const styles = StyleSheet.create({
-  panel: {
-    height: 75,
+  mainPanel: {
+    flex: 1,
+    flexDirection: "column",
+    alignItems: "center"
+  },
+  titlePanel: {
+    flex: 1,
+    flexDirection: "row",
+    margin: 10,
+    height: 60,
+  },
+  titleBox: {
+    height: 35,
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    borderBottomWidth: 1,
+    borderTopWidth: 0,
+    alignContent: "center",
+    textAlignVertical: "center",
+    borderColor: "#D0D0D0"
+  },
+  divider: {
     borderColor: "black",
-    borderWidth: 1,
+    borderWidth: 0.5,
+    height: 1,
+    alignSelf: "stretch",
   },
-  panelContent: {
+  noteMessagePanel: {
+    margin: 50,
+  },
+  noteMessageBox: {
+    borderWidth: 0.2,
+    borderColor: "#D0D0D0",
+    alignContent: "center",
+    textAlignVertical: "center",
+  },
+  actionsPanel: {
     flex: 1,
-    flexDirection: "column",
+    flexDirection: "row",
+    height: 60,
   }
 });
 

windows/ReactNativeNotes/NativeModules/DatabaseHandler.hpp

@@ -4,38 +4,45 @@
 #include "NativeModules.h"
 #include <string>
 #include "Repository/Repository.hpp"
+#include <memory>
 
 
 namespace winrt::ReactNativeNotes::implementation
 {
     REACT_MODULE( Database );
     struct Database
     {
+        Database()
+        {
+            data = std::make_unique<Repository>();
+        }
+
         REACT_METHOD( WriteNote, L"writeNote" );
         void WriteNote( const std::string noteTitle, const bool isDone, const std::string noteFullMessage = "" ) noexcept
         {
-            Repository::Get()->Create( NoteModel( noteTitle, isDone, noteFullMessage ) );
+            data->Create( NoteModel( noteTitle, isDone, noteFullMessage ) );
         }
 
         REACT_METHOD( GetNoteTitle, L"getNoteTitle" );
         const winrt::hstring GetNoteTitle( const unsigned int ID ) noexcept
         {
-            return winrt::to_hstring(Repository::Get()->Read( ID ).Title());
+            return winrt::to_hstring(data->Read( ID ).Title());
         }
 
         REACT_METHOD( GetNotePost, L"getNotePost" );
         const winrt::hstring GetNotePost( const unsigned int ID ) noexcept
         {
-            return winrt::to_hstring( Repository::Get()->Read( ID ).Post() );
+            return winrt::to_hstring( data->Read( ID ).Post() );
         }
 
         REACT_METHOD( GetNoteShortPost, L"getNoteShortPost" );
         const winrt::hstring GetNoteShortPost( const unsigned int ID ) noexcept
         {
-            return winrt::to_hstring( Repository::Get()->Read( ID ).ShortPost() );
+            return winrt::to_hstring( data->Read( ID ).ShortPost() );
         }
 
     private:
+        std::unique_ptr<Repository> data;
     };
 }
 

windows/ReactNativeNotes/NativeModules/Repository/Repository.cpp

@@ -4,8 +4,6 @@
 
 namespace winrt::ReactNativeNotes::implementation
 {
-    Repository* Repository::instance = nullptr;
-
     void Repository::Create( NoteModel& note ) noexcept
     {
         note.ID( static_cast<unsigned int>(notes.size() + 1) );
@@ -37,4 +35,9 @@ namespace winrt::ReactNativeNotes::implementation
         auto it = std::find( notes.cbegin(), notes.cend(), Read(ID) );
         notes.erase( it );
     }
+
+    unsigned int Repository::Size() const noexcept
+    {
+        return notes.size();
+    }
 }

windows/ReactNativeNotes/NativeModules/Repository/Repository.hpp

@@ -9,18 +9,12 @@ namespace winrt::ReactNativeNotes::implementation
     class Repository
     {
     public:
+        Repository() = default;
+
         Repository( const Repository& ) = delete;
         Repository( Repository&& ) = delete;
         void operator=( const Repository& ) = delete;
 
-        static Repository* Get()
-        {
-            if( instance == nullptr )
-            {
-                instance = new Repository();
-            }
-            return instance;
-        }
 
         void Create( NoteModel& note ) noexcept;
 
@@ -30,11 +24,9 @@ namespace winrt::ReactNativeNotes::implementation
 
         void Delete( const unsigned int ID ) noexcept;
 
-    private:
-        Repository() = default;
+        unsigned int Size() const noexcept;
 
+    private:
         std::vector<NoteModel> notes;
-
-        static Repository* instance;
     };
 }