Notes screen and note details page implementation (#4)

* Create main panel for notes

The application's main panel contains all the notes added by the user.
They are displayed in the grid, with number of columns adapted to the
width of the window.
Note, that the Window size needs to be considered instead of Screen's.
That is due to having the Page in RNW rendered as a root with certain
and fixed dimensions.

Currently only the testing data are given to the FlatList, so there's a
possibility to test it by displaying any content.
In further development that data should be taken from the database.

* Create basic widget for single note on the main screen

This commit introduces the initial widget containing single note
presented on the main panel.
This widget has the reponsibility to:
* contain the summary of the note: ID, Title and shortened post message
* act as the button to enter the full post screen

* Fix: Widget size reset on main panel's reentry

* Implement note full screen

* Define explicit application entry page

* Implement navigation native module

This native module is responsible for handling the navigation between
screens which are not connected through the NavigationView and it's
Frame.
This situation happens, when there's a need to navigate to separate
screen, but at the same time get rid of navigation panel.

This native module is called  NoteWidgetClickHandler  because it is
designed explicitly for the  NotesPage <-> NoteWidgetDetailsPage
navigation both-ways.

* Implement going back function for NoteWidgetClickHandler

The native module should also provide the system with the ability to go
back.
This is now done by the GoToNotesScreen function, which navigates to the
MainPage.

NOTE: MainPage needs to be selected, as only this page contains the
NavigationFrame and is able to display the navigation top pane.
This is why there's a starting point implemented when MainPage is
navigated to.

* Add new page for Note details screen

* Navigate back on 'Go back...' button press

* Add the basic implementation to the NoteWidgetDetailsPanel

* Suppress the navigation animation when going back to NotesPage

Author: BartoszKlonowski

index.js

@@ -9,5 +9,6 @@ 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';
 
 AppRegistry.registerComponent(appName, () => App);

src/NoteWidgetDetailsPanel.js

@@ -0,0 +1,51 @@
+/**
+ * @format
+ * @flow strict-local
+ */
+
+import React from 'react';
+import {
+  AppRegistry,
+  Button,
+  StyleSheet,
+  Text,
+  View,
+  NativeModules,
+} from 'react-native';
+
+
+class NoteWidgetDetailsPanel extends React.Component {
+
+  goBack = () => {
+    NativeModules.NoteWidgetClickHandler.goToNotesScreen();
+  };
+
+  render() {
+    return(
+      <View style={styles.panel}>
+        <View style={styles.panelContent}>
+          <Text>Note details panel</Text>
+          <Button onPress={this.goBack} title={"Go back..."}></Button>
+        </View>
+      </View>
+    );
+  }
+};
+
+
+const styles = StyleSheet.create({
+  panel: {
+    height: 75,
+    borderColor: "black",
+    borderWidth: 1,
+  },
+  panelContent: {
+    flex: 1,
+    flexDirection: "column",
+  }
+});
+
+
+AppRegistry.registerComponent("NoteWidgetDetailsPanel", () => NoteWidgetDetailsPanel);
+
+export default NoteWidgetDetailsPanel;

src/NotesMainPanel.js

@@ -6,25 +6,66 @@
 import React from 'react';
 import {
   AppRegistry,
+  Dimensions,
+  FlatList,
   StyleSheet,
-  Text,
   View,
 } from 'react-native';
+import NoteWidget from './Widgets/NoteWidget';
+
+const window = Dimensions.get("window");
+const screen = Dimensions.get("screen");
+
+const noteWidgetWidth = 300;
 
 
 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"}],
+      dimensions: {window, screen},
+      columns: this.calculateColumnWidth(window),
+    }
+  };
+
+  calculateColumnWidth = (window) => {
+    return Math.floor(window.width / noteWidgetWidth);
+  };
+
+  onChange = ({ window, screen }) => {
+    this.setState({ dimensions: { window, screen }, columns: this.calculateColumnWidth(window) });
+  };
+
+  componentDidMount() {
+    Dimensions.addEventListener("change", this.onChange);
+  };
+
+  componentWillUnmount() {
+    Dimensions.removeEventListener("change", this.onChange);
+  };
+
+  renderNote = notes => {
+    return <NoteWidget width={noteWidgetWidth} ID={notes.item.key}/>
+  };
 
   render() {
     return(
-      <View>
-        <Text>NotesMainPanel</Text>
+      <View style={styles.mainContainer}>
+        <FlatList numColumns={this.state.columns} key={this.state.columns} data={this.state.notes} renderItem={this.renderNote}/>
       </View>
     );
   }
 };
 
 
 const styles = StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+    flexDirection: "column",
+    margin: 20,
+    backgroundColor: "transparent",
+  },
 });
 
 

src/Widgets/NoteWidget.js

@@ -0,0 +1,98 @@
+/**
+ * @format
+ * @flow strict-local
+ */
+
+import React from 'react';
+import {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+  NativeModules,
+} from 'react-native';
+
+
+class NoteWidget extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      width: props.width,
+      ID: Number(props.ID),
+    }
+  };
+
+  enterNote = () => {
+    NativeModules.NoteWidgetClickHandler.openWidget(this.state.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>
+
+          <View style={styles.noteSeparator}></View>
+
+          <View style={styles.noteMainContent}>
+            <Text>
+              This is the single widget
+              {'\n'}With the text written here only for the presentation purpose.
+            </Text>
+            <Text>This note has the ID: {this.state.ID}</Text>
+          </View>
+
+        </View>
+      </TouchableHighlight>
+    );
+  }
+};
+
+
+const styles = StyleSheet.create({
+  noteWidget: {
+    borderColor: "grey",
+    borderWidth: 1,
+    margin: 20,
+    backgroundColor: "whitesmoke",
+    borderRadius: 10,
+    shadowOffset: {x: 5, y: 50},
+    shadowColor: "black",
+    elevation: 10,
+    opacity: 0.8
+  },
+  noteHeader: {
+    flex: 1,
+    flexDirection: "row",
+    margin: 5,
+  },
+  noteTitle: {
+    alignSelf: "center",
+    alignContent: "center",
+    alignItems: "center",
+    textAlign: "center",
+    marginHorizontal: 10,
+  },
+  noteSeparator: {
+    borderColor: "black",
+    borderWidth: 0.5,
+    marginTop: 5,
+    marginBottom: 10,
+    alignSelf: "stretch"
+  },
+  noteMainContent: {
+    margin: 10
+  }
+});
+
+
+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::MainPage>(), box_value(e.Arguments()));
+    rootFrame.Navigate(xaml_typename<ReactNativeNotes::NotesPage>(), box_value(e.Arguments()));
 }
 
 /// <summary>

windows/ReactNativeNotes/MainPage.cpp

@@ -15,6 +15,7 @@ namespace winrt::ReactNativeNotes::implementation
     {
         InitializeComponent();
         auto app = Application::Current().as<App>();
+        Navigate( L"NotesPage", false );
     }
 
     void MainPage::TopNavigationPanel_ItemInvoked( Windows::UI::Xaml::Controls::NavigationView const& sender, Windows::UI::Xaml::Controls::NavigationViewItemInvokedEventArgs const& args )
@@ -34,16 +35,25 @@ namespace winrt::ReactNativeNotes::implementation
     {
     }
 
-    void MainPage::Navigate( winrt::hstring pageName ) noexcept
+    void MainPage::Navigate( winrt::hstring pageName, const bool hasAnimation ) noexcept
     {
         auto pageToNavigateTo = Windows::UI::Xaml::Interop::TypeName
         {
             to_hstring( L"ReactNativeNotes." + pageName ),
             Windows::UI::Xaml::Interop::TypeKind::Custom
         };
-        auto navigationAnimation = Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionInfo();
-        navigationAnimation.Effect( Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionEffect::FromLeft );
-        ApplicationContentFrame().Navigate( pageToNavigateTo, nullptr, navigationAnimation );
+        if( hasAnimation )
+        {
+            auto navigationAnimation = Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionInfo();
+            navigationAnimation.Effect( Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionEffect::FromLeft );
+            ApplicationContentFrame().Navigate( pageToNavigateTo, nullptr, navigationAnimation );
+        }
+        else
+        {
+            auto navigationAnimation = Windows::UI::Xaml::Media::Animation::SuppressNavigationTransitionInfo();
+            ApplicationContentFrame().Navigate( pageToNavigateTo, nullptr, navigationAnimation );
+        }
+
     }
 } 
 

windows/ReactNativeNotes/MainPage.h

@@ -14,7 +14,7 @@ namespace winrt::ReactNativeNotes::implementation
         void TopNavigationPanel_BackRequested( Windows::UI::Xaml::Controls::NavigationView const& sender, Windows::UI::Xaml::Controls::NavigationViewBackRequestedEventArgs const& args );
 
     private:
-        void Navigate( winrt::hstring pageName ) noexcept;
+        void Navigate( winrt::hstring pageName, const bool hasAnimation = true ) noexcept;
     };
 }
 

windows/ReactNativeNotes/NativeModules/NoteWidgetClickHandler.hpp

@@ -0,0 +1,41 @@
+#pragma once
+
+#include "pch.h"
+#include "NativeModules.h"
+
+
+namespace ReactNativeNotes
+{
+    REACT_MODULE( NoteWidgetClickHandler );
+    struct NoteWidgetClickHandler
+    {
+        REACT_CONSTANT( ID, L"ID" );
+        const unsigned int ID;
+
+        REACT_METHOD( OpenWidget, L"openWidget" );
+        void OpenWidget( const unsigned int ID ) noexcept
+        {
+            NavigateViaMainFrame( L"ReactNativeNotes.NoteWidgetDetailsPage" );
+        }
+
+        REACT_METHOD( GoToNotesScreen, L"goToNotesScreen" );
+        void GoToNotesScreen() noexcept
+        {
+            NavigateViaMainFrame( L"ReactNativeNotes.MainPage" );
+        }
+
+
+    private:
+        void NavigateViaMainFrame( const winrt::hstring pageName )
+        {
+            auto pageToNavigateTo = winrt::Windows::UI::Xaml::Interop::TypeName
+            {
+                pageName,
+                winrt::Windows::UI::Xaml::Interop::TypeKind::Custom
+            };
+            auto navigationAnimation = winrt::Windows::UI::Xaml::Media::Animation::DrillInNavigationTransitionInfo();
+            auto& rootFrame = winrt::Windows::UI::Xaml::Window::Current().Content().as<winrt::Windows::UI::Xaml::Controls::Frame>();
+            rootFrame.Navigate( pageToNavigateTo, nullptr, navigationAnimation );
+        }
+    };
+}

windows/ReactNativeNotes/NoteWidgetDetailsPage.cpp

@@ -0,0 +1,16 @@
+#include "pch.h"
+#include "NoteWidgetDetailsPage.h"
+#include "NoteWidgetDetailsPage.g.cpp"
+
+#include "App.h"
+
+
+namespace winrt::ReactNativeNotes::implementation
+{
+    NoteWidgetDetailsPage::NoteWidgetDetailsPage()
+    {
+        InitializeComponent();
+        auto app = Windows::UI::Xaml::Application::Current().as<App>();
+        ReactRootView().ReactNativeHost( app->Host() );
+    }
+}

windows/ReactNativeNotes/NoteWidgetDetailsPage.h

@@ -0,0 +1,19 @@
+#pragma once
+
+#include "NoteWidgetDetailsPage.g.h"
+
+namespace winrt::ReactNativeNotes::implementation
+{
+    class NoteWidgetDetailsPage : public NoteWidgetDetailsPageT<NoteWidgetDetailsPage>
+    {
+    public:
+        NoteWidgetDetailsPage();
+    };
+}
+
+namespace winrt::ReactNativeNotes::factory_implementation
+{
+    class NoteWidgetDetailsPage : public NoteWidgetDetailsPageT<NoteWidgetDetailsPage, implementation::NoteWidgetDetailsPage>
+    {
+    };
+}