callstack · BartoszKlonowski · Apr 26, 2021 · Apr 15, 2021 · Apr 15, 2021 · Apr 15, 2021
diff --git a/src/UserAccountPanel.js b/src/UserAccountPanel.js
@@ -7,36 +7,149 @@ import React from 'react';
 import {
   AppRegistry,
   StyleSheet,
-  Text,
   View,
+  NativeModules,
+  Alert,
+  Image,
+  TextInput,
+  Button,
+  Text,
 } from 'react-native';
 
 
 class UserAccountPanel extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      userName: "",
+      userEmail: "",
+      isEditing: false,
+    }
+  };
+
+  componentDidMount() {
+    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) => {
+    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.User.setEmail(this.state.userEmail);
+    NativeModules.User.setName(this.state.userName);
+    this.setState({isEditing: false});
+  }
+
+  editButtonPressed = () => {
+    this.setState({isEditing: true});
+  };
+
 
   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.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>
     );
   }
 };
 
 
 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,
   }
 });
 

diff --git 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

diff --git a/windows/ReactNativeNotes/NativeModules/UserAccount/FilePicker.hpp b/windows/ReactNativeNotes/NativeModules/UserAccount/FilePicker.hpp
@@ -0,0 +1,53 @@
+#pragma once
+
+#include "pch.h"
+#include "NativeModules.h"
+#include <algorithm>
+#include <string>
+
+
+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" );
+        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 );
+            openPicker.FileTypeFilter().ReplaceAll( { L".jpg", L".jpeg", L".png" } );
+
+            try
+            {
+                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!" );
+                }
+            }
+            catch( const winrt::hresult_error& e )
+            {
+                result.Reject( e.message().c_str() );
+            }
+        }
+
+        winrt::Microsoft::ReactNative::ReactContext context;
+    };
+}
diff --git a/windows/ReactNativeNotes/NativeModules/UserAccount/User.hpp 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;
+    };
+}
diff --git 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,16 @@
     <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="NativeModules\UserAccount\User.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
@@ -39,6 +39,8 @@
     <ClInclude Include="NativeModules\Repository\Repository.hpp" />
     <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
@@ -5,6 +5,9 @@
 #include "NativeModules/DatabaseHandler.hpp"
 #include "NativeModules/NoteWidgetClickHandler.hpp"
 #include "NativeModules/Repository/Repository.hpp"
+#include "NativeModules/UserAccount/FilePicker.hpp"
+#include "NativeModules/UserAccount/User.hpp"
+
 
 using namespace winrt::Microsoft::ReactNative;
 

diff --git 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>