State management via Backend events

3 files changed, 17 insertions, 7 deletions

diff --git a/app/components/Connect.css b/app/components/Connect.css
index 7e6de03e94..37a49bd98a 100644
--- a/app/components/Connect.css
+++ b/app/components/Connect.css
@@ -59,7 +59,6 @@
   font-weight: 900;
   line-height: 26px;
   color: #FFFFFF;
-  text-transform: uppercase;
   text-align: right;
 }
 
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 9dda61c2ee..ec89dd897d 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { Layout, Container, Header } from './Layout';
+import { servers } from '../constants';
 
 export default class Connect extends Component {
 
@@ -12,6 +13,16 @@ export default class Connect extends Component {
   }
 
   render() {
+    let serverName;
+    const preferredServer = this.props.settings.preferredServer;
+
+    // special types of servers (Fastest, Nearest) 
+    if(preferredServer === 'Fastest' || preferredServer === 'Nearest') {
+      serverName = preferredServer;
+    } else {
+      serverName = (servers[preferredServer] || {}).name;
+    }
+    
     return (
       <Layout>
         <Header showSettings={ true } onSettings={ ::this.onSettings } />
@@ -24,7 +35,7 @@ export default class Connect extends Component {
                 <div className="connect__row">
                   <div className="connect__server" onClick={ ::this.openLocationPicker }>
                     <div className="connect__server-label">Connect to</div>
-                    <div className="connect__server-country">{ this.props.settings.preferredServer }</div>
+                    <div className="connect__server-country">{ serverName }</div>
                   </div>
                 </div>
 
diff --git a/app/components/SelectLocation.js b/app/components/SelectLocation.js
index 702eea074b..41ef55fd33 100644
--- a/app/components/SelectLocation.js
+++ b/app/components/SelectLocation.js
@@ -33,7 +33,7 @@ export default class SelectLocation extends Component {
     return key === this.props.settings.preferredServer;
   }
 
-  drawCell(name, icon, onClick) {
+  drawCell(key, name, icon, onClick) {
     const classes = ['select-location__cell'];
     const selected = this.isSelected(name);
 
@@ -44,7 +44,7 @@ export default class SelectLocation extends Component {
     const cellClass = classes.join(' ');
 
     return (
-      <div key={ name } className={ cellClass } onClick={ onClick }>
+      <div key={ key } className={ cellClass } onClick={ onClick }>
 
         <If condition={ !!icon }>
           <Then>
@@ -81,12 +81,12 @@ export default class SelectLocation extends Component {
               
               <CustomScrollbars autoHide={ true }>
                 <div>
-                  { this.drawCell('Fastest', './assets/images/icon-fastest.svg', ::this.handleFastest) }
-                  { this.drawCell('Nearest', './assets/images/icon-nearest.svg', ::this.handleNearest) }
+                  { this.drawCell('fastest', 'Fastest', './assets/images/icon-fastest.svg', ::this.handleFastest) }
+                  { this.drawCell('nearest', 'Nearest', './assets/images/icon-nearest.svg', ::this.handleNearest) }
 
                   <div className="select-location__separator"></div>
                   
-                  { servers.map((name) => this.drawCell(name, null, this.handleSelection.bind(this, name))) }
+                  { Object.keys(servers).map((key) => this.drawCell(key, servers[key].name, null, this.handleSelection.bind(this, key))) }
 
                 </div>
               </CustomScrollbars>