diff options
| -rw-r--r-- | app/components/Connect.js | 37 |
1 files changed, 19 insertions, 18 deletions
diff --git a/app/components/Connect.js b/app/components/Connect.js index c33f17425b..6031ffdb2e 100644 --- a/app/components/Connect.js +++ b/app/components/Connect.js @@ -110,19 +110,13 @@ export default class Connect extends Component { renderMap(): React.Element<*> { const serverInfo = this._getServerInfo(); - let isConnecting = false; - let isConnected = false; - let isDisconnected = false; + let [ isConnecting, isConnected, isDisconnected ] = [false, false, false]; switch(this.props.connection.status) { case 'connecting': isConnecting = true; break; case 'connected': isConnected = true; break; case 'disconnected': isDisconnected = true; break; } - const { city, country } = (isConnecting || isConnected) - ? { city: 'Unknown', country: 'Unknown' } - : { city: this.props.connection.city, country: this.props.connection.country }; - const serverName = serverInfo ? serverInfo.name : 'Unknown'; @@ -145,9 +139,14 @@ export default class Connect extends Component { let ipComponent = undefined; if (isConnected || isDisconnected) { if (this.state.showCopyIPMessage) { - ipComponent = <span>{ 'IP copied to clipboard!' }</span>; + ipComponent = (<span>{ 'IP copied to clipboard!' }</span>); } else { - ipComponent = <span>{ this.props.connection.clientIp }</span>; + // TODO: remove empty IP placeholder when implemented in backend. + if(isDisconnected) { + ipComponent = (<span>{ '\u2003' }</span>); + } else { + ipComponent = (<span>{ this.props.connection.clientIp }</span>); + } } } return ( @@ -171,29 +170,31 @@ export default class Connect extends Component { ********************************** */ } - { /* location when connecting */ } - <If condition={ isConnecting }> + { /* location when disconnected. + TODO: merge with the isConnecting block below when implemented in backend. + */ } + <If condition={ isDisconnected }> <Then> <div className="connect__status-location"> - <span>{ country }</span> + <span>{ '\u2002' }</span> </div> </Then> </If> - { /* location when connected */ } - <If condition={ isConnected }> + { /* location when connecting */ } + <If condition={ isConnecting }> <Then> <div className="connect__status-location"> - { city }<br/>{ country } + <span>{ this.props.connection.country }</span> </div> </Then> </If> - { /* location when disconnected */ } - <If condition={ isDisconnected }> + { /* location when connected */ } + <If condition={ isConnected }> <Then> <div className="connect__status-location"> - { country } + { this.props.connection.city }<br/>{ this.props.connection.country } </div> </Then> </If> |