Propagate the display name for the preferred locale and show it in the Settings view

5 files changed, 37 insertions, 1 deletions

diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index c816701731..71a3b9f05a 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -377,6 +377,12 @@ export default class AppRenderer {
     IpcRendererEventChannel.guiSettings.setPreferredLocale(preferredLocale);
   }
 
+  private getPreferredLocaleDisplayName(localeCode: string): string {
+    const preferredLocale = this.getPreferredLocaleList().find((item) => item.code === localeCode);
+
+    return preferredLocale ? preferredLocale.name : '';
+  }
+
   private loadTranslations(locale: string) {
     for (const catalogue of [messages, countries, cities, relayLocations]) {
       loadTranslations(locale, catalogue);
@@ -670,6 +676,9 @@ export default class AppRenderer {
   private setGuiSettings(guiSettings: IGuiSettingsState) {
     this.guiSettings = guiSettings;
     this.reduxActions.settings.updateGuiSettings(guiSettings);
+    this.reduxActions.userInterface.updatePreferredLocaleName(
+      this.getPreferredLocaleDisplayName(guiSettings.preferredLocale),
+    );
   }
 
   private setAccountExpiry(expiry?: string) {
diff --git a/gui/src/renderer/components/Settings.tsx b/gui/src/renderer/components/Settings.tsx
index c48d57641a..ddcc8ed3e6 100644
--- a/gui/src/renderer/components/Settings.tsx
+++ b/gui/src/renderer/components/Settings.tsx
@@ -21,6 +21,7 @@ import styles from './SettingsStyles';
 import { LoginState } from '../redux/account/reducers';
 
 export interface IProps {
+  preferredLocaleDisplayName: string;
   loginState: LoginState;
   accountExpiry?: string;
   expiryLocale: string;
@@ -64,6 +65,7 @@ export default class Settings extends Component<IProps> {
                     <View>
                       <Cell.CellButton onPress={this.props.onViewSelectLanguage}>
                         <Cell.Label>{messages.pgettext('settings-view', 'Language')}</Cell.Label>
+                        <Cell.SubText>{this.props.preferredLocaleDisplayName}</Cell.SubText>
                         <Cell.Icon height={12} width={7} source="icon-chevron" />
                       </Cell.CellButton>
 
diff --git a/gui/src/renderer/containers/SettingsPage.tsx b/gui/src/renderer/containers/SettingsPage.tsx
index ca83b996c1..927a2cd40f 100644
--- a/gui/src/renderer/containers/SettingsPage.tsx
+++ b/gui/src/renderer/containers/SettingsPage.tsx
@@ -8,6 +8,7 @@ import { IReduxState, ReduxDispatch } from '../redux/store';
 import { ISharedRouteProps } from '../routes';
 
 const mapStateToProps = (state: IReduxState, _props: ISharedRouteProps) => ({
+  preferredLocaleDisplayName: state.userInterface.preferredLocaleName,
   loginState: state.account.status,
   accountExpiry: state.account.expiry,
   expiryLocale: state.userInterface.locale,
diff --git a/gui/src/renderer/redux/userinterface/actions.ts b/gui/src/renderer/redux/userinterface/actions.ts
index c83ef47bff..d9895625a3 100644
--- a/gui/src/renderer/redux/userinterface/actions.ts
+++ b/gui/src/renderer/redux/userinterface/actions.ts
@@ -5,6 +5,11 @@ export interface IUpdateLocaleAction {
   locale: string;
 }
 
+export interface IUpdatePreferredLocaleNameAction {
+  type: 'UPDATE_PREFERRED_LOCALE_NAME';
+  name: string;
+}
+
 export interface IUpdateWindowArrowPositionAction {
   type: 'UPDATE_WINDOW_ARROW_POSITION';
   arrowPosition: number;
@@ -21,6 +26,7 @@ export interface ISetLocationScopeAction {
 
 export type UserInterfaceAction =
   | IUpdateLocaleAction
+  | IUpdatePreferredLocaleNameAction
   | IUpdateWindowArrowPositionAction
   | IUpdateConnectionInfoOpenAction
   | ISetLocationScopeAction;
@@ -32,6 +38,13 @@ function updateLocale(locale: string): IUpdateLocaleAction {
   };
 }
 
+function updatePreferredLocaleName(name: string): IUpdatePreferredLocaleNameAction {
+  return {
+    type: 'UPDATE_PREFERRED_LOCALE_NAME',
+    name,
+  };
+}
+
 function updateWindowArrowPosition(arrowPosition: number): IUpdateWindowArrowPositionAction {
   return {
     type: 'UPDATE_WINDOW_ARROW_POSITION',
@@ -52,4 +65,10 @@ function setLocationScope(scope: LocationScope): ISetLocationScopeAction {
   };
 }
 
-export default { updateLocale, updateWindowArrowPosition, toggleConnectionPanel, setLocationScope };
+export default {
+  updateLocale,
+  updatePreferredLocaleName,
+  updateWindowArrowPosition,
+  toggleConnectionPanel,
+  setLocationScope,
+};
diff --git a/gui/src/renderer/redux/userinterface/reducers.ts b/gui/src/renderer/redux/userinterface/reducers.ts
index 7941d6001b..6afaadde86 100644
--- a/gui/src/renderer/redux/userinterface/reducers.ts
+++ b/gui/src/renderer/redux/userinterface/reducers.ts
@@ -7,6 +7,7 @@ export enum LocationScope {
 
 export interface IUserInterfaceReduxState {
   locale: string;
+  preferredLocaleName: string;
   arrowPosition?: number;
   connectionPanelVisible: boolean;
   locationScope: LocationScope;
@@ -14,6 +15,7 @@ export interface IUserInterfaceReduxState {
 
 const initialState: IUserInterfaceReduxState = {
   locale: 'en',
+  preferredLocaleName: 'English',
   connectionPanelVisible: false,
   locationScope: LocationScope.relay,
 };
@@ -26,6 +28,9 @@ export default function(
     case 'UPDATE_LOCALE':
       return { ...state, locale: action.locale };
 
+    case 'UPDATE_PREFERRED_LOCALE_NAME':
+      return { ...state, preferredLocaleName: action.name };
+
     case 'UPDATE_WINDOW_ARROW_POSITION':
       return { ...state, arrowPosition: action.arrowPosition };