From 7cdb783108a11965e1b1ceaf95649fd21ef848fd Mon Sep 17 00:00:00 2001
From: Bartosz Klonowski <Bartosz.Klonowski@callstack.com>
Date: Thu, 15 Apr 2021 13:30:41 +0200
Subject: [PATCH 1/7] Create the full layout of User's account page

---
 src/UserAccountPanel.js | 152 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 139 insertions(+), 13 deletions(-)

diff --git a/src/UserAccountPanel.js b/src/UserAccountPanel.js
index 3393f4a..47b7c6a 100644
--- a/src/UserAccountPanel.js
+++ b/src/UserAccountPanel.js
@@ -7,21 +7,116 @@ import React from 'react';
 import {
   AppRegistry,
   StyleSheet,
-  Text,
   View,
+  NativeModules,
+  Alert,
+  Image,
+  TextInput,
+  Button,
+  Dimensions,
+  Text,
 } from 'react-native';
 
 
 class UserAccountPanel extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      avatarPicture: "",
+      userName: "",
+      userEmail: "",
+      isEditing: false,
+    }
+  };
+
+  componentDidMount() {
+    Dimensions.addEventListener("change", this.windowDimensionOnChange);
+  };
+
+  componentWillUnmount() {
+    Dimensions.removeEventListener("change", this.windowDimensionOnChange);
+  };
+
+  windowDimensionOnChange = ({window, screen}) => {
+    this.setState({windowWidth: window.width, windowHeight: window.height});
+  };
+
+  userNameOnChange = (text) => {
+    this.setState({userName: text});
+  };
+
+  userEmailOnChange = (text) => {
+    this.setState({userEmail: text});
+  }
+
+
+  quitButtonPressed = () => {
+    if(this.state.isEditing) {
+      Alert.alert("Are you sure?", "It looks like you still have unsaved changes, which are going to be lost.",
+      [
+        {
+          text: "No!",
+          style: "cancel"
+        },
+        {
+          text: "Yes, quit!",
+          onPress: () => NativeModules.NoteWidgetClickHandler.goToNotesScreen()
+        }
+      ])
+    }
+    else {
+      NativeModules.NoteWidgetClickHandler.goToNotesScreen();
+    }
+  };
+
+  saveButtonPressed = () => {
+    NativeModules.Database.updateNote(this.state.title, this.state.message, this.state.id);
+    this.setState({isEditing: false});
+  }
+
+  editButtonPressed = () => {
+    this.setState({isEditing: true});
+  };
+
+  setAvatar = () => {
+  };
+
 
   render() {
-    return(
-      <View style={styles.panel}>
-        <View style={styles.panelContent}>
-          <Text>UserAccountPanel</Text>
-          <Text>This panel will have all the features of User's account.</Text>
-          <Text>Further implementation will yet be done!</Text>
+    return (
+      <View style={styles.page}>
+
+        <View style={styles.mainPanel}>
+          <View style={styles.avatarLeftPanel}>
+            <Image on source={this.state.avatarPicture} style={styles.avatarImage}/>
+            <View style={styles.avatarButton}>
+              <Button title={"Choose avatar"} onPress={this.setAvatar}/>
+            </View>
+          </View>
+
+          <View style={styles.detailsRightPanel}>
+            <Text>User's name:</Text>
+            <TextInput style={styles.userNameBox}
+              onChangeText={this.userNameOnChange}
+              value={this.state.userName}
+              editable={this.state.isEditing}
+            />
+
+            <Text>User's email:</Text>
+            <TextInput style={styles.userEmailBox}
+              onChangeText={this.userEmailOnChange}
+              value={this.state.userEmail}
+              editable={this.state.isEditing}
+            />
+          </View>
         </View>
+
+        <View style={styles.actionsPanel}>
+          <Button title={"Quit!"} onPress={this.quitButtonPressed}/>
+          <Button title={"Edit"} disabled={this.state.isEditing} onPress={this.editButtonPressed}/>
+          <Button title={"Save"} disabled={!this.state.isEditing} onPress={this.saveButtonPressed}/>
+        </View>
+
       </View>
     );
   }
@@ -29,14 +124,45 @@ class UserAccountPanel extends React.Component {
 
 
 const styles = StyleSheet.create({
-  panel: {
-    height: 75,
-    borderColor: "black",
+  page: {
+    margin: 40,
+  },
+  mainPanel: {
+    flex: 0,
+    flexDirection: "row",
+    height: "85%",
+    margin: 20
+  },
+  avatarLeftPanel: {
+    width: 300,
+  },
+  detailsRightPanel: {
+    width: "80%"
+  },
+  avatarImage: {
+    width: 200,
+    height: 200,
+    borderRadius: 200 / 2,
     borderWidth: 1,
   },
-  panelContent: {
-    flex: 1,
-    flexDirection: "column",
+  userEmailBox: {
+    width: "80%",
+    margin: 30
+  },
+  userNameBox: {
+    width: "80%",
+    margin: 30
+  },
+  actionsPanel: {
+    flex: 0,
+    flexDirection: "row",
+    justifyContent: "space-evenly",
+    height: "10%"
+  },
+  avatarButton: {
+    width: 110,
+    margin: 40,
+    marginHorizontal: 45,
   }
 });
 

From 7900efe66f7622e3e2b2548b1786575dbf0bd0f7 Mon Sep 17 00:00:00 2001
From: Bartosz Klonowski <Bartosz.Klonowski@callstack.com>
Date: Thu, 15 Apr 2021 16:30:56 +0200
Subject: [PATCH 2/7] Implement file picker dialog for acount page

---
 src/UserAccountPanel.js                       |  5 ++-
 .../NativeModules/UserAccount/FilePicker.hpp  | 33 +++++++++++++++++++
 .../ReactNativeNotes/ReactNativeNotes.vcxproj | 17 +++++++---
 .../ReactNativeNotes.vcxproj.filters          |  1 +
 .../ReactNativeNotes/ReactPackageProvider.cpp |  2 ++
 windows/ReactNativeNotes/pch.h                |  4 +++
 6 files changed, 57 insertions(+), 5 deletions(-)
 create mode 100644 windows/ReactNativeNotes/NativeModules/UserAccount/FilePicker.hpp

diff --git a/src/UserAccountPanel.js b/src/UserAccountPanel.js
index 47b7c6a..2e61a25 100644
--- a/src/UserAccountPanel.js
+++ b/src/UserAccountPanel.js
@@ -79,6 +79,9 @@ class UserAccountPanel extends React.Component {
   };
 
   setAvatar = () => {
+    NativeModules.FilePicker.openFile()
+      .then(result => {this.setState({avatarPicture: result})})
+      .catch(error => Alert.alert("ERROR!", `${error}`));
   };
 
 
@@ -88,7 +91,7 @@ class UserAccountPanel extends React.Component {
 
         <View style={styles.mainPanel}>
           <View style={styles.avatarLeftPanel}>
-            <Image on source={this.state.avatarPicture} style={styles.avatarImage}/>
+            <Image source={{uri: `${this.state.avatarPicture}`}} style={styles.avatarImage}/>
             <View style={styles.avatarButton}>
               <Button title={"Choose avatar"} onPress={this.setAvatar}/>
             </View>
diff --git a/windows/ReactNativeNotes/NativeModules/UserAccount/FilePicker.hpp b/windows/ReactNativeNotes/NativeModules/UserAccount/FilePicker.hpp
new file mode 100644
index 0000000..cdcf114
--- /dev/null
+++ b/windows/ReactNativeNotes/NativeModules/UserAccount/FilePicker.hpp
@@ -0,0 +1,33 @@
+#pragma once
+
+#include "pch.h"
+#include "NativeModules.h"
+#include <algorithm>
+#include <string>
+
+
+namespace ReactNativeNotes
+{
+    REACT_MODULE( FilePicker );
+    struct FilePicker
+    {
+        REACT_METHOD( OpenFile, L"openFile" );
+        winrt::fire_and_forget OpenFile( React::ReactPromise<React::JSValue> result ) noexcept
+        {
+            winrt::Windows::Storage::Pickers::FileOpenPicker openPicker;
+            openPicker.ViewMode( winrt::Windows::Storage::Pickers::PickerViewMode::Thumbnail );
+            openPicker.FileTypeFilter().ReplaceAll( { L".jpg", L".jpeg", L".png" } );
+            winrt::Windows::Storage::StorageFile file = co_await openPicker.PickSingleFileAsync();
+
+            if( file != nullptr )
+            {
+                std::string s = winrt::to_string(file.Path());
+                result.Resolve( React::JSValue( s ) );
+            }
+            else
+            {
+                result.Reject( L"Couldn't load the selected file!" );
+            }
+        }
+    };
+}
diff --git a/windows/ReactNativeNotes/ReactNativeNotes.vcxproj b/windows/ReactNativeNotes/ReactNativeNotes.vcxproj
index 1400d98..9156e1f 100644
--- a/windows/ReactNativeNotes/ReactNativeNotes.vcxproj
+++ b/windows/ReactNativeNotes/ReactNativeNotes.vcxproj
@@ -98,11 +98,19 @@
   <ItemDefinitionGroup Condition="'$(Configuration)'=='Debug'">
     <ClCompile>
       <PreprocessorDefinitions>_DEBUG;%(PreprocessorDefinitions)</PreprocessorDefinitions>
+      <EnableModules Condition="'$(Configuration)|$(Platform)'=='Debug|ARM'">true</EnableModules>
+      <EnableModules Condition="'$(Configuration)|$(Platform)'=='Debug|ARM64'">true</EnableModules>
+      <EnableModules Condition="'$(Configuration)|$(Platform)'=='Debug|Win32'">true</EnableModules>
+      <EnableModules Condition="'$(Configuration)|$(Platform)'=='Debug|x64'">true</EnableModules>
     </ClCompile>
   </ItemDefinitionGroup>
   <ItemDefinitionGroup Condition="'$(Configuration)'=='Release'">
     <ClCompile>
       <PreprocessorDefinitions>NDEBUG;%(PreprocessorDefinitions)</PreprocessorDefinitions>
+      <EnableModules Condition="'$(Configuration)|$(Platform)'=='Release|ARM'">true</EnableModules>
+      <EnableModules Condition="'$(Configuration)|$(Platform)'=='Release|ARM64'">true</EnableModules>
+      <EnableModules Condition="'$(Configuration)|$(Platform)'=='Release|Win32'">true</EnableModules>
+      <EnableModules Condition="'$(Configuration)|$(Platform)'=='Release|x64'">true</EnableModules>
     </ClCompile>
   </ItemDefinitionGroup>
   <ItemGroup>
@@ -122,14 +130,15 @@
     <ClInclude Include="NativeModules\NoteWidgetClickHandler.hpp" />
     <ClInclude Include="NativeModules\Repository\NoteModel.hpp" />
     <ClInclude Include="NativeModules\Repository\Repository.hpp" />
-    <ClInclude Include="NotesPage.h">
-      <DependentUpon>NotesPage.xaml</DependentUpon>
-      <SubType>Code</SubType>
-    </ClInclude>
+    <ClInclude Include="NativeModules\UserAccount\FilePicker.hpp" />
     <ClInclude Include="NoteWidgetDetailsPage.h">
       <DependentUpon>NoteWidgetDetailsPage.xaml</DependentUpon>
       <SubType>Code</SubType>
     </ClInclude>
+    <ClInclude Include="NotesPage.h">
+      <DependentUpon>NotesPage.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </ClInclude>
     <ClInclude Include="ReactPackageProvider.h" />
     <ClInclude Include="AutolinkedNativeModules.g.h" />
     <ClInclude Include="pch.h" />
diff --git a/windows/ReactNativeNotes/ReactNativeNotes.vcxproj.filters b/windows/ReactNativeNotes/ReactNativeNotes.vcxproj.filters
index 090adde..cb7d150 100644
--- a/windows/ReactNativeNotes/ReactNativeNotes.vcxproj.filters
+++ b/windows/ReactNativeNotes/ReactNativeNotes.vcxproj.filters
@@ -39,6 +39,7 @@
     <ClInclude Include="NativeModules\Repository\Repository.hpp" />
     <ClInclude Include="NativeModules\DatabaseHandler.hpp" />
     <ClInclude Include="NativeModules\NoteWidgetClickHandler.hpp" />
+    <ClInclude Include="NativeModules\UserAccount\FilePicker.hpp" />
   </ItemGroup>
   <ItemGroup>
     <Image Include="Assets\Wide310x150Logo.scale-200.png">
diff --git a/windows/ReactNativeNotes/ReactPackageProvider.cpp b/windows/ReactNativeNotes/ReactPackageProvider.cpp
index 2f0dc9f..670c928 100644
--- a/windows/ReactNativeNotes/ReactPackageProvider.cpp
+++ b/windows/ReactNativeNotes/ReactPackageProvider.cpp
@@ -5,6 +5,8 @@
 #include "NativeModules/DatabaseHandler.hpp"
 #include "NativeModules/NoteWidgetClickHandler.hpp"
 #include "NativeModules/Repository/Repository.hpp"
+#include "NativeModules/UserAccount/FilePicker.hpp"
+
 
 using namespace winrt::Microsoft::ReactNative;
 
diff --git a/windows/ReactNativeNotes/pch.h b/windows/ReactNativeNotes/pch.h
index 45e5b7f..019cbeb 100644
--- a/windows/ReactNativeNotes/pch.h
+++ b/windows/ReactNativeNotes/pch.h
@@ -19,6 +19,10 @@
 #include <winrt/Windows.UI.Xaml.Media.Animation.h>
 #include <winrt/Windows.ApplicationModel.Core.h>
 #include <winrt/Windows.UI.ViewManagement.h>
+#include "winrt/Windows.Storage.Pickers.h"
+#include "winrt/Windows.Storage.Pickers.Provider.h"
+#include "winrt/Windows.System.h"
+#include "winrt/Windows.UI.Core.h"
 
 #include <winrt/Microsoft.ReactNative.h>
 

From d61ab3f5a5eb4be0ecd15afb2e41afc6256b5397 Mon Sep 17 00:00:00 2001
From: Bartosz Klonowski <Bartosz.Klonowski@callstack.com>
Date: Thu, 15 Apr 2021 17:17:29 +0200
Subject: [PATCH 3/7] Add user's data to the local storage

The user's data are kept in the local User instance which is pulled each
time the User's account page is entered.
The information can be used from the any other component via the Native
module.
---
 src/UserAccountPanel.js                       | 19 ++++-----
 .../NativeModules/UserAccount/User.hpp        | 41 +++++++++++++++++++
 .../ReactNativeNotes/ReactNativeNotes.vcxproj |  1 +
 .../ReactNativeNotes.vcxproj.filters          |  1 +
 .../ReactNativeNotes/ReactPackageProvider.cpp |  1 +
 5 files changed, 52 insertions(+), 11 deletions(-)
 create mode 100644 windows/ReactNativeNotes/NativeModules/UserAccount/User.hpp

diff --git a/src/UserAccountPanel.js b/src/UserAccountPanel.js
index 2e61a25..6bb3669 100644
--- a/src/UserAccountPanel.js
+++ b/src/UserAccountPanel.js
@@ -13,7 +13,6 @@ import {
   Image,
   TextInput,
   Button,
-  Dimensions,
   Text,
 } from 'react-native';
 
@@ -30,15 +29,12 @@ class UserAccountPanel extends React.Component {
   };
 
   componentDidMount() {
-    Dimensions.addEventListener("change", this.windowDimensionOnChange);
-  };
-
-  componentWillUnmount() {
-    Dimensions.removeEventListener("change", this.windowDimensionOnChange);
-  };
-
-  windowDimensionOnChange = ({window, screen}) => {
-    this.setState({windowWidth: window.width, windowHeight: window.height});
+    NativeModules.User.getName()
+      .then(result => this.setState({userName: result}))
+      .catch(error => Alert.alert("ERROR!", `${error}`));
+    NativeModules.User.getEmail()
+      .then(result => this.setState({userEmail: result}))
+      .catch(error => Alert.alert("ERROR!", `${error}`));
   };
 
   userNameOnChange = (text) => {
@@ -70,7 +66,8 @@ class UserAccountPanel extends React.Component {
   };
 
   saveButtonPressed = () => {
-    NativeModules.Database.updateNote(this.state.title, this.state.message, this.state.id);
+    NativeModules.User.setEmail(this.state.userEmail);
+    NativeModules.User.setName(this.state.userName);
     this.setState({isEditing: false});
   }
 
diff --git a/windows/ReactNativeNotes/NativeModules/UserAccount/User.hpp b/windows/ReactNativeNotes/NativeModules/UserAccount/User.hpp
new file mode 100644
index 0000000..cba61b0
--- /dev/null
+++ b/windows/ReactNativeNotes/NativeModules/UserAccount/User.hpp
@@ -0,0 +1,41 @@
+#pragma once
+
+#include "pch.h"
+#include "NativeModules.h"
+
+
+namespace ReactNativeNotes
+{
+    REACT_MODULE( User );
+    struct User
+    {
+    public:
+        REACT_METHOD( GetName, L"getName" );
+        void GetName( React::ReactPromise<React::JSValue> result ) noexcept
+        {
+            result.Resolve( React::JSValue( name ) );
+        }
+
+        REACT_METHOD( SetName, L"setName" );
+        void SetName( const std::string& name ) noexcept
+        {
+            this->name = name;
+        }
+
+        REACT_METHOD( GetEmail, L"getEmail" );
+        void GetEmail( React::ReactPromise<React::JSValue> result ) noexcept
+        {
+            result.Resolve( React::JSValue( email ) );
+        }
+
+        REACT_METHOD( SetEmail, L"setEmail" );
+        void SetEmail( const std::string& email ) noexcept
+        {
+            this->email = email;
+        }
+
+    private:
+        std::string name;
+        std::string email;
+    };
+}
\ No newline at end of file
diff --git a/windows/ReactNativeNotes/ReactNativeNotes.vcxproj b/windows/ReactNativeNotes/ReactNativeNotes.vcxproj
index 9156e1f..1dd1e7c 100644
--- a/windows/ReactNativeNotes/ReactNativeNotes.vcxproj
+++ b/windows/ReactNativeNotes/ReactNativeNotes.vcxproj
@@ -131,6 +131,7 @@
     <ClInclude Include="NativeModules\Repository\NoteModel.hpp" />
     <ClInclude Include="NativeModules\Repository\Repository.hpp" />
     <ClInclude Include="NativeModules\UserAccount\FilePicker.hpp" />
+    <ClInclude Include="NativeModules\UserAccount\User.hpp" />
     <ClInclude Include="NoteWidgetDetailsPage.h">
       <DependentUpon>NoteWidgetDetailsPage.xaml</DependentUpon>
       <SubType>Code</SubType>
diff --git a/windows/ReactNativeNotes/ReactNativeNotes.vcxproj.filters b/windows/ReactNativeNotes/ReactNativeNotes.vcxproj.filters
index cb7d150..229f96f 100644
--- a/windows/ReactNativeNotes/ReactNativeNotes.vcxproj.filters
+++ b/windows/ReactNativeNotes/ReactNativeNotes.vcxproj.filters
@@ -40,6 +40,7 @@
     <ClInclude Include="NativeModules\DatabaseHandler.hpp" />
     <ClInclude Include="NativeModules\NoteWidgetClickHandler.hpp" />
     <ClInclude Include="NativeModules\UserAccount\FilePicker.hpp" />
+    <ClInclude Include="NativeModules\UserAccount\User.hpp" />
   </ItemGroup>
   <ItemGroup>
     <Image Include="Assets\Wide310x150Logo.scale-200.png">
diff --git a/windows/ReactNativeNotes/ReactPackageProvider.cpp b/windows/ReactNativeNotes/ReactPackageProvider.cpp
index 670c928..24d5ed7 100644
--- a/windows/ReactNativeNotes/ReactPackageProvider.cpp
+++ b/windows/ReactNativeNotes/ReactPackageProvider.cpp
@@ -6,6 +6,7 @@
 #include "NativeModules/NoteWidgetClickHandler.hpp"
 #include "NativeModules/Repository/Repository.hpp"
 #include "NativeModules/UserAccount/FilePicker.hpp"
+#include "NativeModules/UserAccount/User.hpp"
 
 
 using namespace winrt::Microsoft::ReactNative;

From 38130c38fe945bb4e8c23dcf20d767c54512e54d Mon Sep 17 00:00:00 2001
From: Bartosz Klonowski <Bartosz.Klonowski@callstack.com>
Date: Fri, 23 Apr 2021 14:42:14 +0200
Subject: [PATCH 4/7] Catch the exception in case of general window failure

When trying to open the window on the separate thread (after launching
the coroutine) it is possible that there'll be the exception thrown by
the base.h implementation.
The reason for specifying the winrt::hresult_error is that it does not
inherits from the std::exception so it would be impossible to catch by
the universal exception.
---
 .../NativeModules/UserAccount/FilePicker.hpp  | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/windows/ReactNativeNotes/NativeModules/UserAccount/FilePicker.hpp b/windows/ReactNativeNotes/NativeModules/UserAccount/FilePicker.hpp
index cdcf114..f055a2c 100644
--- a/windows/ReactNativeNotes/NativeModules/UserAccount/FilePicker.hpp
+++ b/windows/ReactNativeNotes/NativeModules/UserAccount/FilePicker.hpp
@@ -17,16 +17,23 @@ namespace ReactNativeNotes
             winrt::Windows::Storage::Pickers::FileOpenPicker openPicker;
             openPicker.ViewMode( winrt::Windows::Storage::Pickers::PickerViewMode::Thumbnail );
             openPicker.FileTypeFilter().ReplaceAll( { L".jpg", L".jpeg", L".png" } );
-            winrt::Windows::Storage::StorageFile file = co_await openPicker.PickSingleFileAsync();
 
-            if( file != nullptr )
+            try
             {
-                std::string s = winrt::to_string(file.Path());
-                result.Resolve( React::JSValue( s ) );
+                winrt::Windows::Storage::StorageFile file = co_await openPicker.PickSingleFileAsync();
+                if( file != nullptr )
+                {
+                    std::string s = winrt::to_string( file.Path() );
+                    result.Resolve( React::JSValue( s ) );
+                }
+                else
+                {
+                    result.Reject( L"Couldn't load the selected file!" );
+                }
             }
-            else
+            catch( const winrt::hresult_error& e )
             {
-                result.Reject( L"Couldn't load the selected file!" );
+                result.Reject( e.message().c_str() );
             }
         }
     };

From bbe61ee8d004b3cf8e64be678d40a5456276e038 Mon Sep 17 00:00:00 2001
From: Bartosz Klonowski <Bartosz.Klonowski@callstack.com>
Date: Mon, 26 Apr 2021 10:47:00 +0200
Subject: [PATCH 5/7] Fix: Invalid window handle due when opening FilePicker

The FilePicker when opened was throwing the "Invalid window handle" error.
This was caused by the native module thread affinity and the fact that
the FilePicker should be launched in the UI thread explicitly.

The fix for that is to launch the couroutine on the UI context using the
UIDispatcher method of React Native Windows.
for more details and the reasoning please check:
https://github.com/microsoft/react-native-windows/issues/7641
---
 .../NativeModules/UserAccount/FilePicker.hpp      | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/windows/ReactNativeNotes/NativeModules/UserAccount/FilePicker.hpp b/windows/ReactNativeNotes/NativeModules/UserAccount/FilePicker.hpp
index f055a2c..66111bd 100644
--- a/windows/ReactNativeNotes/NativeModules/UserAccount/FilePicker.hpp
+++ b/windows/ReactNativeNotes/NativeModules/UserAccount/FilePicker.hpp
@@ -11,8 +11,19 @@ namespace ReactNativeNotes
     REACT_MODULE( FilePicker );
     struct FilePicker
     {
+        REACT_INIT( Initialize );
+        void Initialize( const winrt::Microsoft::ReactNative::ReactContext& reactContext ) noexcept
+        {
+            context = reactContext;
+        }
+
         REACT_METHOD( OpenFile, L"openFile" );
-        winrt::fire_and_forget OpenFile( React::ReactPromise<React::JSValue> result ) noexcept
+        void OpenFile( React::ReactPromise<React::JSValue> result ) noexcept
+        {
+            context.UIDispatcher().Post( [this, result{ std::move( result ) }]()->void { LaunchPicker( result ); } );
+        }
+
+        winrt::fire_and_forget LaunchPicker( React::ReactPromise<React::JSValue> result ) noexcept
         {
             winrt::Windows::Storage::Pickers::FileOpenPicker openPicker;
             openPicker.ViewMode( winrt::Windows::Storage::Pickers::PickerViewMode::Thumbnail );
@@ -36,5 +47,7 @@ namespace ReactNativeNotes
                 result.Reject( e.message().c_str() );
             }
         }
+
+        winrt::Microsoft::ReactNative::ReactContext context;
     };
 }

From ed86ce303a5e93197298ed8e0c03e47db581dfbf Mon Sep 17 00:00:00 2001
From: Bartosz Klonowski <Bartosz.Klonowski@callstack.com>
Date: Mon, 26 Apr 2021 14:31:31 +0200
Subject: [PATCH 6/7] Navigate between frames using UIDispatcher

---
 .../NativeModules/NoteWidgetClickHandler.hpp         | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/windows/ReactNativeNotes/NativeModules/NoteWidgetClickHandler.hpp b/windows/ReactNativeNotes/NativeModules/NoteWidgetClickHandler.hpp
index 896c4bf..7c980c6 100644
--- a/windows/ReactNativeNotes/NativeModules/NoteWidgetClickHandler.hpp
+++ b/windows/ReactNativeNotes/NativeModules/NoteWidgetClickHandler.hpp
@@ -9,17 +9,23 @@ namespace ReactNativeNotes
     REACT_MODULE( NoteWidgetClickHandler );
     struct NoteWidgetClickHandler
     {
+        REACT_INIT( Initialize );
+        void Initialize( const winrt::Microsoft::ReactNative::ReactContext& reactContext ) noexcept
+        {
+            context = reactContext;
+        }
+
         REACT_METHOD( OpenWidget, L"openWidget" );
         void OpenWidget( const unsigned int ID ) noexcept
         {
-            NavigateViaMainFrame( L"ReactNativeNotes.NoteWidgetDetailsPage" );
+            context.UIDispatcher().Post( [this]()->void { NavigateViaMainFrame( L"ReactNativeNotes.NoteWidgetDetailsPage" ); } );
             openedID = ID;
         }
 
         REACT_METHOD( GoToNotesScreen, L"goToNotesScreen" );
         void GoToNotesScreen() noexcept
         {
-            NavigateViaMainFrame( L"ReactNativeNotes.MainPage" );
+            context.UIDispatcher().Post( [this]()->void { NavigateViaMainFrame( L"ReactNativeNotes.MainPage" ); } );
         }
 
         REACT_METHOD( OpenedNoteID, L"openedNoteID" );
@@ -30,6 +36,8 @@ namespace ReactNativeNotes
 
 
     private:
+        winrt::Microsoft::ReactNative::ReactContext context;
+
         void NavigateViaMainFrame( const winrt::hstring pageName )
         {
             auto pageToNavigateTo = winrt::Windows::UI::Xaml::Interop::TypeName

From 936c976f95fbe0bc3e6e56517ef70090c2446332 Mon Sep 17 00:00:00 2001
From: Bartosz Klonowski <Bartosz.Klonowski@callstack.com>
Date: Mon, 26 Apr 2021 14:31:58 +0200
Subject: [PATCH 7/7] Remove user's avatar from the account page

---
 src/UserAccountPanel.js | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/UserAccountPanel.js b/src/UserAccountPanel.js
index 6bb3669..3587688 100644
--- a/src/UserAccountPanel.js
+++ b/src/UserAccountPanel.js
@@ -21,7 +21,6 @@ class UserAccountPanel extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      avatarPicture: "",
       userName: "",
       userEmail: "",
       isEditing: false,
@@ -75,24 +74,12 @@ class UserAccountPanel extends React.Component {
     this.setState({isEditing: true});
   };
 
-  setAvatar = () => {
-    NativeModules.FilePicker.openFile()
-      .then(result => {this.setState({avatarPicture: result})})
-      .catch(error => Alert.alert("ERROR!", `${error}`));
-  };
-
 
   render() {
     return (
       <View style={styles.page}>
 
         <View style={styles.mainPanel}>
-          <View style={styles.avatarLeftPanel}>
-            <Image source={{uri: `${this.state.avatarPicture}`}} style={styles.avatarImage}/>
-            <View style={styles.avatarButton}>
-              <Button title={"Choose avatar"} onPress={this.setAvatar}/>
-            </View>
-          </View>
 
           <View style={styles.detailsRightPanel}>
             <Text>User's name:</Text>