Windows accessibility - code architecture & layout adjustments (#31)

* Use Settings to listen for theme and language

* Use x:Name for navigation items tag

The `Name` property is used to control the item of a XAML layout in the
code-behind of a Page.
Thsi way it is possible to set its style and properties when they are
changed in the Settings.

* Adjust layout of screens for font in Settings

When text size changes and the font is replaced, the text needs to have
enough space to fit in the layout after Settings.
To do that some `styles` have been modified to let the text adjust
easily to Settings.

* Apply ESLint fixes

Author: BartoszKlonowski

src/CreateNotePanel.tsx

@@ -11,6 +11,7 @@ import {
   TextInput,
   View,
   Button,
+  NativeEventEmitter,
 } from 'react-native';
 import Colors from './Resources/Colors';
 import * as dict from './Resources/Dictionary';
@@ -21,14 +22,22 @@ interface Props {}
 interface State {
   title: string;
   message: string;
+  language: number;
+  theme: number;
 }
 
+const SettingsNotificationModuleEventEmitter = new NativeEventEmitter(
+  NativeModules.Database,
+);
+
 class CreateNotePanel extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
       title: '',
       message: '',
+      language: 0,
+      theme: 0,
     };
   }
 
@@ -62,6 +71,21 @@ class CreateNotePanel extends React.Component<Props, State> {
     }
   };
 
+  componentDidMount() {
+    SettingsNotificationModuleEventEmitter.addListener(
+      'LanguageChanged',
+      (result) => {
+        this.setState({language: result});
+      },
+    );
+    SettingsNotificationModuleEventEmitter.addListener(
+      'ThemeChanged',
+      (result) => {
+        this.setState({theme: result});
+      },
+    );
+  }
+
   createButtonPressed = () => {
     NativeModules.Database.writeNote(
       this.state.title,
@@ -120,6 +144,7 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderTopWidth: 0,
     width: '90%',
+    height: 'auto',
     borderColor: Colors.noteTextPanelBorder,
     fontWeight: 'bold',
     marginTop: 30,
@@ -128,7 +153,7 @@ const styles = StyleSheet.create({
     borderWidth: 0.2,
     margin: 10,
     width: '90%',
-    height: '85%',
+    flexGrow: 1,
     borderColor: Colors.noteTextPanelBorder,
     alignContent: 'center',
     textAlignVertical: 'center',
@@ -139,6 +164,7 @@ const styles = StyleSheet.create({
     justifyContent: 'space-around',
     width: '60%',
     maxHeight: 35,
+    margin: 10,
   },
 });
 

src/NoteWidgetDetailsPanel.tsx

@@ -11,18 +11,25 @@ import {
   TextInput,
   View,
   Button,
+  NativeEventEmitter,
 } from 'react-native';
 import Colors from './Resources/Colors';
 import * as dictionary from './Resources/Dictionary';
 import * as theming from './Resources/Theming/ThemeHOC';
 
+const SettingsNotificationModuleEventEmitter = new NativeEventEmitter(
+  NativeModules.Database,
+);
+
 interface Props {}
 
 interface State {
   id: number;
   title: string;
   message: string;
   isEditing: boolean;
+  language: number;
+  theme: number;
 }
 
 class NoteWidgetDetailsPanel extends React.Component<Props, State> {
@@ -33,6 +40,8 @@ class NoteWidgetDetailsPanel extends React.Component<Props, State> {
       title: '',
       message: '',
       isEditing: false,
+      language: 0,
+      theme: 0,
     };
   }
 
@@ -50,6 +59,18 @@ class NoteWidgetDetailsPanel extends React.Component<Props, State> {
           `Could not find the opened note\n${error.message}`,
         );
       });
+    SettingsNotificationModuleEventEmitter.addListener(
+      'LanguageChanged',
+      (result) => {
+        this.setState({language: result});
+      },
+    );
+    SettingsNotificationModuleEventEmitter.addListener(
+      'ThemeChanged',
+      (result) => {
+        this.setState({theme: result});
+      },
+    );
   }
 
   titleOnChange = (text: string) => {

src/NotesMainPanel.tsx

@@ -8,6 +8,7 @@ import {
   AppRegistry,
   Dimensions,
   FlatList,
+  NativeEventEmitter,
   NativeModules,
   StyleSheet,
   Text,
@@ -18,6 +19,9 @@ import Dictionary from './Resources/Dictionary';
 import * as theming from './Resources/Theming/ThemeHOC';
 
 const noteWidgetWidth = 300;
+const SettingsNotificationModuleEventEmitter = new NativeEventEmitter(
+  NativeModules.Database,
+);
 
 function calculateColumnWidth() {
   return Math.floor(Dimensions.get('window').width / noteWidgetWidth);
@@ -34,6 +38,8 @@ interface INote {
 interface State {
   notes: Array<INote>;
   columns: number;
+  language: number;
+  theme: number;
 }
 
 class NotesMainPanel extends React.Component<Props, State> {
@@ -42,6 +48,8 @@ class NotesMainPanel extends React.Component<Props, State> {
     this.state = {
       notes: [],
       columns: calculateColumnWidth(),
+      language: 0,
+      theme: 0,
     };
   }
 
@@ -54,6 +62,18 @@ class NotesMainPanel extends React.Component<Props, State> {
   componentDidMount() {
     this.getDataFromDatabase();
     Dimensions.addEventListener('change', this.onChange);
+    SettingsNotificationModuleEventEmitter.addListener(
+      'LanguageChanged',
+      (result) => {
+        this.setState({language: result});
+      },
+    );
+    SettingsNotificationModuleEventEmitter.addListener(
+      'ThemeChanged',
+      (result) => {
+        this.setState({theme: result});
+      },
+    );
   }
 
   componentWillUnmount() {
@@ -130,6 +150,9 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
+    textAlign: 'center',
+    alignContent: 'center',
+    height: '100%',
   },
   logoText: {
     fontSize: 35,

src/Resources/Dictionary.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Alert, NativeModules, Text} from 'react-native';
+import {NativeModules, Text, NativeEventEmitter} from 'react-native';
 import en from './Localization/en.json';
 import pl from './Localization/pl.json';
 
@@ -11,6 +11,10 @@ export interface Props {
 export const languages = [en, pl];
 export var languageNum: number;
 
+const LanguageNotificationModuleEventEmitter = new NativeEventEmitter(
+  NativeModules.Database,
+);
+
 export function getTextByKey(textLabel: string): string {
   let index = 0;
   if (languageNum < languages.length) index = languageNum;
@@ -33,17 +37,17 @@ export class Dictionary extends React.Component<Props, State> {
     };
   }
 
-  getText = () => {
-    NativeModules.Database.getLanguageValue()
-      .then((result: number) => {
+  componentDidMount() {
+    LanguageNotificationModuleEventEmitter.addListener(
+      'LanguageChanged',
+      (result) => {
         this.setState({languageValue: result});
         languageNum = result;
-        return result;
-      })
-      .catch((error: Error) => {
-        Alert.alert(`ERROR: ${error.message}`);
-      });
+      },
+    );
+  }
 
+  getText = () => {
     switch (this.state.languageValue) {
       case 0: {
         let enDictionary = new Map(Object.entries(en));

src/Resources/Theming/ThemeHOC.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {NativeModules, View} from 'react-native';
+import {NativeModules, NativeEventEmitter, View} from 'react-native';
 
 interface Props {
   style: any;
@@ -10,6 +10,10 @@ interface State {
   style: any;
 }
 
+const ThemeNotificationModuleEventEmitter = new NativeEventEmitter(
+  NativeModules.Database,
+);
+
 export function applyTheming(style: any) {
   let theme = 0;
   const getTheme = async () => {
@@ -42,19 +46,16 @@ export class ThemedView extends React.Component<Props, State> {
     };
   }
 
-  requireTheming = (style: any) => {
-    const getTheme = async () => {
-      await NativeModules.Database.getThemeValue()
-        .then((result: number) => {
-          this.setState({themeValue: result});
-          return result;
-        })
-        .catch((error: Error) => {
-          console.log(`ERROR: ${error.message}`);
-        });
-    };
+  componentDidMount() {
+    ThemeNotificationModuleEventEmitter.addListener(
+      'ThemeChanged',
+      (result) => {
+        this.setState({themeValue: result});
+      },
+    );
+  }
 
-    getTheme();
+  requireTheming = (style: any) => {
     switch (this.state.themeValue) {
       case 0:
         return {...style, backgroundColor: 'transparent'};

src/ToDoListPanel.tsx

@@ -10,6 +10,8 @@ import {
   TextInput,
   Button,
   View,
+  NativeEventEmitter,
+  NativeModules,
 } from 'react-native';
 import DateTimePicker from '@react-native-community/datetimepicker';
 import TaskWidget from './Widgets/TaskWidget';
@@ -30,8 +32,14 @@ interface State {
   number: number;
   message: string;
   selectedDate: Date | undefined;
+  language: number;
+  theme: number;
 }
 
+const SettingsNotificationModuleEventEmitter = new NativeEventEmitter(
+  NativeModules.Database,
+);
+
 class ToDoListPanel extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -40,9 +48,26 @@ class ToDoListPanel extends React.Component<Props, State> {
       number: 0,
       message: '',
       selectedDate: new Date(),
+      language: 0,
+      theme: 0,
     };
   }
 
+  componentDidMount() {
+    SettingsNotificationModuleEventEmitter.addListener(
+      'LanguageChanged',
+      (result) => {
+        this.setState({language: result});
+      },
+    );
+    SettingsNotificationModuleEventEmitter.addListener(
+      'ThemeChanged',
+      (result) => {
+        this.setState({theme: result});
+      },
+    );
+  }
+
   onChange = (event: Event, selectedDate?: Date) => {
     const currentDate = selectedDate;
     this.setState({selectedDate: currentDate});

windows/ReactNativeNotes/MainPage.xaml

@@ -30,19 +30,19 @@
 
         <muxc:NavigationView.MenuItems>
 
-            <muxc:NavigationViewItem Content="Create" Tag="CreateNotePage" Foreground="White" Margin="0,5,0,5">
+            <muxc:NavigationViewItem x:Name="CreateNotePageNavItem" Content="Create" Tag="CreateNotePage" Foreground="White" Margin="0,5,0,5">
                 <muxc:NavigationViewItem.Icon>
                     <FontIcon Glyph="&#xe109;"/>
                 </muxc:NavigationViewItem.Icon>
             </muxc:NavigationViewItem>
 
-            <muxc:NavigationViewItem Content="Notes" Tag="NotesPage" Foreground="White" Margin="0,5,0,5">
+            <muxc:NavigationViewItem x:Name="NotesPageNavItem" Content="Notes" Tag="NotesPage" Foreground="White" Margin="0,5,0,5">
                 <muxc:NavigationViewItem.Icon>
                     <FontIcon Glyph="&#xe8a9;"/>
                 </muxc:NavigationViewItem.Icon>
             </muxc:NavigationViewItem>
 
-            <muxc:NavigationViewItem Content="ToDo List" Tag="ToDoListPage" Foreground="White" Margin="0,5,0,5">
+            <muxc:NavigationViewItem x:Name="ToDoListPageNavItem" Content="ToDo List" Tag="ToDoListPage" Foreground="White" Margin="0,5,0,5">
                 <muxc:NavigationViewItem.Icon>
                     <FontIcon Glyph="&#xe9d5;"/>
                 </muxc:NavigationViewItem.Icon>

windows/ReactNativeNotes/NativeModules/DatabaseHandler.hpp

@@ -89,6 +89,7 @@ namespace winrt::ReactNativeNotes::implementation
         void SetLanguageValue( const int&& value ) noexcept
         {
             settings->Language( (LanguageValue)value );
+            LanguageChanged( value );
         }
 
         REACT_METHOD( GetThemeValue, L"getThemeValue" );
@@ -101,8 +102,15 @@ namespace winrt::ReactNativeNotes::implementation
         void SetThemeValue( const int&& value ) noexcept
         {
             settings->Theme( (ThemeValue)value );
+            ThemeChanged( value );
         }
 
+        REACT_EVENT( ThemeChanged );
+        std::function<void( unsigned int )> ThemeChanged;
+
+        REACT_EVENT( LanguageChanged );
+        std::function<void( unsigned int )> LanguageChanged;
+
     private:
         std::unique_ptr<Repository> data;