Store locations in english and translate for rendering

2 files changed, 9 insertions, 5 deletions

diff --git a/gui/src/renderer/components/LocationList.tsx b/gui/src/renderer/components/LocationList.tsx
index c47312f158..6389784ecd 100644
--- a/gui/src/renderer/components/LocationList.tsx
+++ b/gui/src/renderer/components/LocationList.tsx
@@ -7,6 +7,7 @@ import {
   RelayLocation,
   relayLocationComponents,
 } from '../../shared/daemon-rpc-types';
+import { relayLocations } from '../../shared/gettext';
 import { IRelayLocationRedux } from '../redux/settings/reducers';
 import * as Cell from './cell';
 import LocationRow from './LocationRow';
@@ -283,7 +284,7 @@ export class RelayLocations extends React.PureComponent<IRelayLocationsProps> {
           return (
             <LocationRow
               key={getLocationKey(countryLocation)}
-              name={relayCountry.name}
+              name={relayLocations.gettext(relayCountry.name)}
               active={relayCountry.hasActiveRelays}
               expanded={this.isExpanded(countryLocation)}
               onSelect={this.handleSelection}
@@ -299,7 +300,7 @@ export class RelayLocations extends React.PureComponent<IRelayLocationsProps> {
                 return (
                   <LocationRow
                     key={getLocationKey(cityLocation)}
-                    name={relayCity.name}
+                    name={relayLocations.gettext(relayCity.name)}
                     active={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 de3906c012..d0f36f8ec7 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 { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 import { TunnelState } from '../../shared/daemon-rpc-types';
-import { messages } from '../../shared/gettext';
+import { messages, relayLocations } from '../../shared/gettext';
 import ConnectionPanelContainer from '../containers/ConnectionPanelContainer';
 import * as AppButton from './AppButton';
 import { bigText } from './common-styles';
@@ -197,11 +197,14 @@ export default class TunnelControl extends React.Component<ITunnelControlProps>
   }
 
   private renderCity() {
-    return <StyledMarquee>{this.props.city}</StyledMarquee>;
+    const city = this.props.city === undefined ? '' : relayLocations.gettext(this.props.city);
+    return <StyledMarquee>{city}</StyledMarquee>;
   }
 
   private renderCountry() {
-    return <StyledMarquee>{this.props.country}</StyledMarquee>;
+    const country =
+      this.props.country === undefined ? '' : relayLocations.gettext(this.props.country);
+    return <StyledMarquee>{country}</StyledMarquee>;
   }
 
   private switchLocationButton() {