App improvements: backend & modern layout (#8)

* Remove unused files

* Ignore removed unused files

The reason for having each .binlog file ignored separately is to prevent
the Git from ignoring other binlogs files in the future by mistake if
there are any new added which are necessary.

* Fix: Component Exception when reaching <br/>

* Fix: memory leak when resizing the app window

The resizing of the window app has a memory leak caused by the
asynchronous calls still running on the unmounted components (which
applies to both Note main panel and note widget).
To fix that, the simple mounted status has been added which is checked
each time the component is about to be updated, so once the component is
unmounted the rerender will not happen.

* Display the navigation pane on the left

* Improve navigation panel layout

This improvements adds the icons of each page displayed on both
navigation panel modes (hidden and expanded).
It also changes the color of the panel.

* Make all the pages transparent on UWP layer

* Fix notes main panel

* Make the TitleBar transparent

The Title bar of the application is the most default app element that is
shown to the user, that is why, to make it more custom and to make the
application look more modern, the title bar was made transparent.
The transparency means that:
* the content of the app is extended to the full size of the whole
  window,
* the color of the title bar is set to transparent,
* the background color of the window manipulation buttons (maximize,
  minimize, close) is set to transparent
  It makes them still being visible and fully operative, but are blended
  into the app window

NOTE: The title bar has still it's default size, so to drag the window,
or double click, it's still possible to manipulate the title bar as it
would still be there.

* Add gradient to the application's page

Each page of the application has been provided with the gradient set as
a background.
This feature is implemented on the UWP side due to no decent support for
the gradient on the React Native side (especially no support for Windows).

The gradient is set as the direct child of the Background property of
the ReactRootView component of the XAML RNW element.

* Simplify the layout of the note widget

The note widget had more elements in it than it should have.
To simplify the design and to make it more user-friendly, the layout has
been reduced only to the tile of the note and it's short message.

More details will be done as the other pages responsibility.

Author: BartoszKlonowski

.buckconfig

@@ -57,3 +57,7 @@ buck-out/
 
 # CocoaPods
 /ios/Pods/
+
+# Windows build items
+Deploy.binlog
+msbuild.binlog

.gitignore

@@ -3,13 +3,10 @@
  */
 
 import {AppRegistry} from 'react-native';
-import App from './App';
-import {name as appName} from './app.json';
 
 import NotesMainPanel from './src/NotesMainPanel';
 import UserAccountPanel from './src/UserAccountPanel';
 import ApplicationSettingsPanel from './src/ApplicationSettingsPanel';
 import NoteWidgetDetailsPanel from './src/NoteWidgetDetailsPanel';
 import CreateNotePanel from './src/CreateNotePanel';
 
-AppRegistry.registerComponent(appName, () => App);

.watchmanconfig

@@ -11,6 +11,7 @@ import {
   FlatList,
   NativeModules,
   StyleSheet,
+  Text,
   View,
 } from 'react-native';
 import NoteWidget from './Widgets/NoteWidget';
@@ -28,6 +29,7 @@ class NotesMainPanel extends React.Component {
       notes: [],
       dimensions: {window, screen},
       columns: this.calculateColumnWidth(window),
+      isMounted: false,
     }
   };
 
@@ -80,10 +82,15 @@ class NotesMainPanel extends React.Component {
 const styles = StyleSheet.create({
   mainContainer: {
     flex: 1,
+    margin: 25,
     flexDirection: "column",
-    margin: 20,
     backgroundColor: "transparent",
+    justifyContent: "space-around",
   },
+  welcomeText: {
+    fontSize: 25,
+    fontFamily: "Papyrus",
+  }
 });
 
 

App.js

@@ -20,7 +20,7 @@ class UserAccountPanel extends React.Component {
         <View style={styles.panelContent}>
           <Text>UserAccountPanel</Text>
           <Text>This panel will have all the features of User's account.</Text>
-          <Text><br/>Further implementation will yet be done!</Text>
+          <Text>Further implementation will yet be done!</Text>
         </View>
       </View>
     );

Deploy.binlog

@@ -3,7 +3,7 @@
  * @flow strict-local
  */
 
-import React, {useState, useEffect} from 'react';
+import React, {useState, useEffect, useRef} from 'react';
 import {
   AppRegistry,
   StyleSheet,
@@ -20,46 +20,45 @@ export default function NoteWidget(props){
 
   const [title, setTitle] = useState("");
   const [shortMessage, setShortMessage] = useState("");
+  const isMounted = useRef(null);
 
   useEffect(() => {
+    isMounted.current = true;
     getNoteTitle();
     getNoteShortMessage();
+    return () => {
+      isMounted.current = false;
+    }
   }, []);
 
   const enterNote = () => {
     NativeModules.NoteWidgetClickHandler.openWidget(ID);
   };
 
-
   const getNoteTitle = () => {
     NativeModules.Database.getNoteTitle(ID)
-      .then(result => setTitle(result))
+      .then(result => {isMounted && setTitle(result)})
       .catch(error => Alert.alert("ERROR!", `${error}`));
   };
 
   const getNoteShortMessage = () => {
     NativeModules.Database.getNoteShortPost(ID)
-      .then(result => setShortMessage(result))
+      .then(result => {isMounted && setShortMessage(result)})
       .catch(error => Alert.alert("ERROR!", `${error}`));
   };
 
   return(
-    <TouchableHighlight onPress={enterNote} style={styles.noteWidget} underlayColor={'transparent'}>
-      <View style={{width: width}}>
-
-        <View style={styles.noteHeader}>
-          <Text>{ID}</Text>
-          <View style={styles.noteTitle}>
-            <Text style={{textAlign: "center"}}>
-              {title}
-            </Text>
-          </View>
-        </View>
+    <TouchableHighlight onPress={enterNote} style={[styles.noteWidget, {width: width}]} underlayColor={'transparent'}>
+      <View style={styles.noteContent}>
 
-        <View style={styles.noteSeparator}></View>
+        <View style={styles.noteTitle}>
+          <Text style={styles.noteTitleText}>
+            {title}
+          </Text>
+        </View>
 
-        <View style={styles.noteMainContent}>
-          <Text>
+        <View style={styles.message}>
+          <Text style={styles.messageText}>
             {shortMessage}
           </Text>
         </View>
@@ -73,37 +72,34 @@ export default function NoteWidget(props){
 
 const styles = StyleSheet.create({
   noteWidget: {
-    borderColor: "grey",
-    borderWidth: 1,
+    borderColor: "rgba(170,170,170,0.1)",
+    borderWidth: 5,
     margin: 20,
-    backgroundColor: "whitesmoke",
-    borderRadius: 10,
-    shadowOffset: {x: 5, y: 50},
-    shadowColor: "black",
-    elevation: 10,
-    opacity: 0.8
+    backgroundColor: "white",
+    borderRadius: 5,
+    opacity: 1,
+    height: 160,
   },
-  noteHeader: {
+  noteContent: {
     flex: 1,
-    flexDirection: "row",
-    margin: 5,
+    flexDirection: "column",
+    justifyContent: "space-evenly",
+    margin: 10
   },
   noteTitle: {
-    alignSelf: "center",
-    alignContent: "center",
-    alignItems: "center",
-    textAlign: "center",
-    marginHorizontal: 10,
+    margin: 10
   },
-  noteSeparator: {
-    borderColor: "black",
-    borderWidth: 0.5,
-    marginTop: 5,
-    marginBottom: 10,
-    alignSelf: "stretch"
+  noteTitleText: {
+    color: "#6c47ff",
+    fontFamily: "Georgia",
+    fontSize: 12,
+    fontWeight: "100",
   },
-  noteMainContent: {
-    margin: 10
+  message: {
+    margin: 10,
+  },
+  messageText: {
+    fontSize: 12
   }
 });