Translate the displayed country and city

1 files changed, 18 insertions, 5 deletions

diff --git a/gui/src/renderer/components/TunnelControl.tsx b/gui/src/renderer/components/TunnelControl.tsx
index 0a8751e797..ccad62cb51 100644
--- a/gui/src/renderer/components/TunnelControl.tsx
+++ b/gui/src/renderer/components/TunnelControl.tsx
@@ -1,13 +1,12 @@
 import * as React from 'react';
 import { Component, Styles, Text, Types, View } from 'reactxp';
 import { colors } from '../../config.json';
-import { messages } from '../../shared/gettext';
+import { RelayProtocol, TunnelStateTransition } from '../../shared/daemon-rpc-types';
+import { cities, countries, messages, relayLocations } from '../../shared/gettext';
 import * as AppButton from './AppButton';
 import ConnectionInfo from './ConnectionInfo';
 import SecuredLabel, { SecuredDisplayStyle } from './SecuredLabel';
 
-import { RelayProtocol, TunnelStateTransition } from '../../shared/daemon-rpc-types';
-
 export interface IRelayInAddress {
   ip: string;
   port: number;
@@ -82,8 +81,22 @@ 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}</Text>;
-    const Country = () => <Text style={styles.status_location_text}>{this.props.country}</Text>;
+    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 SwitchLocation = () => {
       return (