Merge branch 'fix-relay-list-sorting'

5 files changed, 36 insertions, 36 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5d02cd2409..0e669dd769 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,6 +43,7 @@ Line wrap the file at 100 chars.                                              Th
 - Fix issue where daemon would try and connect with UDP when the tunnel protocol is set to OpenVPN
   and the bridge mode is set to "On".
 - Don't start ping monitor loop if first ping fails when checking WireGuard connection.
+- Respect localization when sorting the relay locations list.
 
 #### macOS
 - Unregister the app properly from the OS when running the bundled `uninstall.sh` script.
diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index 4a6910d4e8..39e6f56fda 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -149,6 +149,11 @@ export default class AppRenderer {
     this.settings = initialState.settings;
     this.guiSettings = initialState.guiSettings;
 
+    // Load translations
+    for (const catalogue of [messages, countries, cities, relayLocations]) {
+      loadTranslations(this.locale, catalogue);
+    }
+
     this.setAccountExpiry(initialState.accountData && initialState.accountData.expiry);
     this.setAccountHistory(initialState.accountHistory);
     this.setSettings(initialState.settings);
@@ -173,11 +178,6 @@ export default class AppRenderer {
 
     // disable pinch to zoom
     webFrame.setVisualZoomLevelLimits(1, 1);
-
-    // Load translations
-    for (const catalogue of [messages, countries, cities, relayLocations]) {
-      loadTranslations(this.locale, catalogue);
-    }
   }
 
   public renderView() {
@@ -546,18 +546,36 @@ export default class AppRenderer {
   }
 
   private setLocation(location: ILocation) {
-    this.reduxActions.connection.newLocation(location);
+    this.reduxActions.connection.newLocation(this.translateLocation(location));
+  }
+
+  private translateLocation(inputLocation: ILocation): ILocation {
+    const location = { ...inputLocation };
+
+    if (location.city) {
+      const city = location.city;
+
+      location.city = relayLocations.gettext(city) || cities.gettext(city) || city;
+    }
+
+    if (location.country) {
+      const country = location.country;
+
+      location.country = countries.gettext(country) || country;
+    }
+
+    return location;
   }
 
   private convertRelayListToLocationList(relayList: IRelayList): IRelayLocationRedux[] {
     return relayList.countries
       .map((country) => ({
-        name: country.name,
+        name: countries.gettext(country.name) || country.name,
         code: country.code,
         hasActiveRelays: country.cities.some((city) => city.relays.some((relay) => relay.active)),
         cities: country.cities
           .map((city) => ({
-            name: city.name,
+            name: relayLocations.gettext(city.name) || cities.gettext(city.name) || city.name,
             code: city.code,
             latitude: city.latitude,
             longitude: city.longitude,
diff --git a/gui/src/renderer/components/LocationList.tsx b/gui/src/renderer/components/LocationList.tsx
index 99adcd65b4..fb1e7ae8f9 100644
--- a/gui/src/renderer/components/LocationList.tsx
+++ b/gui/src/renderer/components/LocationList.tsx
@@ -7,7 +7,6 @@ import {
   RelayLocation,
   relayLocationComponents,
 } from '../../shared/daemon-rpc-types';
-import { countries, relayLocations } from '../../shared/gettext';
 import { IRelayLocationRedux } from '../redux/settings/reducers';
 import * as Cell from './Cell';
 import CityRow from './CityRow';
@@ -274,7 +273,7 @@ export class RelayLocations extends Component<IRelayLocationsProps> {
           return (
             <CountryRow
               key={getLocationKey(countryLocation)}
-              name={countries.gettext(relayCountry.name)}
+              name={relayCountry.name}
               hasActiveRelays={relayCountry.hasActiveRelays}
               expanded={this.isExpanded(countryLocation)}
               onSelect={this.handleSelection}
@@ -288,7 +287,7 @@ export class RelayLocations extends Component<IRelayLocationsProps> {
                 return (
                   <CityRow
                     key={getLocationKey(cityLocation)}
-                    name={relayLocations.gettext(relayCity.name)}
+                    name={relayCity.name}
                     hasActiveRelays={relayCity.hasActiveRelays}
                     expanded={this.isExpanded(cityLocation)}
                     onSelect={this.handleSelection}
diff --git a/gui/src/renderer/components/TunnelControl.tsx b/gui/src/renderer/components/TunnelControl.tsx
index a03332194e..4acc2bd1ef 100644
--- a/gui/src/renderer/components/TunnelControl.tsx
+++ b/gui/src/renderer/components/TunnelControl.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Component, Styles, Text, Types, View } from 'reactxp';
 import { colors } from '../../config.json';
 import { TunnelState } from '../../shared/daemon-rpc-types';
-import { cities, countries, messages, relayLocations } from '../../shared/gettext';
+import { messages } from '../../shared/gettext';
 import ConnectionPanelContainer from '../containers/ConnectionPanelContainer';
 import * as AppButton from './AppButton';
 import SecuredLabel, { SecuredDisplayStyle } from './SecuredLabel';
@@ -65,22 +65,8 @@ export default class TunnelControl extends Component<ITunnelControlProps> {
     const Location = ({ children }: { children?: React.ReactNode }) => (
       <View style={styles.status_location}>{children}</View>
     );
-    const City = () => (
-      <Text style={styles.status_location_text}>
-        {this.props.city
-          ? relayLocations.gettext(this.props.city) ||
-            cities.gettext(this.props.city) ||
-            this.props.city
-          : undefined}
-      </Text>
-    );
-    const Country = () => (
-      <Text style={styles.status_location_text}>
-        {this.props.country
-          ? countries.gettext(this.props.country) || this.props.country
-          : undefined}
-      </Text>
-    );
+    const City = () => <Text style={styles.status_location_text}>{this.props.city}</Text>;
+    const Country = () => <Text style={styles.status_location_text}>{this.props.country}</Text>;
 
     const SwitchLocation = () => {
       return (
diff --git a/gui/src/renderer/containers/ConnectPage.tsx b/gui/src/renderer/containers/ConnectPage.tsx
index e9e0c3843e..66974ffed8 100644
--- a/gui/src/renderer/containers/ConnectPage.tsx
+++ b/gui/src/renderer/containers/ConnectPage.tsx
@@ -4,11 +4,7 @@ import log from 'electron-log';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { sprintf } from 'sprintf-js';
-import {
-  countries,
-  messages,
-  relayLocations as relayLocationsLocalization,
-} from '../../shared/gettext';
+import { messages } from '../../shared/gettext';
 import Connect from '../components/Connect';
 import AccountExpiry from '../lib/account-expiry';
 import { IRelayLocationRedux, RelaySettingsRedux } from '../redux/settings/reducers';
@@ -27,7 +23,7 @@ function getRelayName(
     } else if ('country' in location) {
       const country = relayLocations.find(({ code }) => code === location.country);
       if (country) {
-        return countries.gettext(country.name);
+        return country.name;
       }
     } else if ('city' in location) {
       const [countryCode, cityCode] = location.city;
@@ -35,7 +31,7 @@ function getRelayName(
       if (country) {
         const city = country.cities.find(({ code }) => code === cityCode);
         if (city) {
-          return relayLocationsLocalization.gettext(city.name);
+          return city.name;
         }
       }
     } else if ('hostname' in location) {
@@ -52,7 +48,7 @@ function getRelayName(
             // TRANSLATORS: %(hostname)s - a hostname
             messages.pgettext('connect-container', '%(city)s (%(hostname)s)'),
             {
-              city: relayLocationsLocalization.gettext(city.name),
+              city: city.name,
               hostname,
             },
           );