Merge branch 'refactor-connection-info'

2 files changed, 66 insertions, 91 deletions

diff --git a/gui/packages/components/src/ConnectionInfo.tsx b/gui/packages/components/src/ConnectionInfo.tsx
index b22c510c23..546d0f9c44 100644
--- a/gui/packages/components/src/ConnectionInfo.tsx
+++ b/gui/packages/components/src/ConnectionInfo.tsx
@@ -31,75 +31,44 @@ interface IOutAddress {
 }
 
 interface IProps {
-  inAddress: IInAddress;
+  inAddress?: IInAddress;
   outAddress: IOutAddress;
-  startExpanded: boolean;
-  onToggle: (expanded: boolean) => void;
+  isExpanded: boolean;
+  onToggle?: () => void;
 }
 
-interface IState {
-  expanded: boolean;
-}
-
-export default class ConnectionInfo extends Component<IProps, IState> {
-  public static defaultProps = {
-    inAddress: {
-      ip: null,
-      port: null,
-      protocol: null,
-    },
-    outAddress: null,
-    startExpanded: false,
-    onToggle: (_: boolean) => {},
-  };
-
-  constructor(props: IProps) {
-    super(props);
-
-    this.state = {
-      expanded: props.startExpanded,
-    };
-  }
-
+export default class ConnectionInfo extends Component<IProps> {
   public render() {
+    const { inAddress, outAddress } = this.props;
+
     return (
       <View>
-        <Accordion height={this.state.expanded ? 'auto' : 0}>
-          <Text style={styles.content}>{this.inAddress()}</Text>
-          <Text style={styles.content}>{this.outAddress()}</Text>
+        <Accordion height={this.props.isExpanded ? 'auto' : 0}>
+          {inAddress && (
+            <Text style={styles.content}>{`IN: ${inAddress.ip}:${inAddress.port} - ${
+              inAddress.protocol
+            }`}</Text>
+          )}
+
+          {(outAddress.ipv4 || outAddress.ipv6) && (
+            <Text style={styles.content}>
+              {'OUT: ' +
+                [outAddress.ipv4, outAddress.ipv6]
+                  .filter((a) => typeof a !== 'undefined')
+                  .join(' / ')}
+            </Text>
+          )}
         </Accordion>
-        <Text style={styles.toggle} onPress={() => this.toggle()}>
-          {this.state.expanded ? 'LESS' : 'MORE'}
+        <Text style={styles.toggle} onPress={this.toggle}>
+          {this.props.isExpanded ? 'LESS' : 'MORE'}
         </Text>
       </View>
     );
   }
 
-  private toggle() {
-    this.setState((state, props) => {
-      const expanded = !state.expanded;
-
-      props.onToggle(expanded);
-
-      return { expanded };
-    });
-  }
-
-  private inAddress() {
-    const { ip, port, protocol } = this.props.inAddress;
-
-    return (
-      'IN: ' + (ip || '<unknown>') + (port ? `:${port}` : '') + (protocol ? ` - ${protocol}` : '')
-    );
-  }
-
-  private outAddress() {
-    const { ipv4, ipv6 } = this.props.outAddress;
-
-    if (ipv4 || ipv6) {
-      return `OUT: ${ipv4}` + (ipv6 ? ` / ${ipv6}` : '');
-    } else {
-      return '';
+  private toggle = () => {
+    if (this.props.onToggle) {
+      this.props.onToggle();
     }
-  }
+  };
 }
diff --git a/gui/packages/desktop/src/renderer/components/Connect.js b/gui/packages/desktop/src/renderer/components/Connect.js
index 3602410c86..b3a60b5082 100644
--- a/gui/packages/desktop/src/renderer/components/Connect.js
+++ b/gui/packages/desktop/src/renderer/components/Connect.js
@@ -12,7 +12,7 @@ import Img from './Img';
 import Map from './Map';
 import styles from './ConnectStyles';
 import { NoCreditError, NoInternetError } from '../errors';
-import type { TunnelState } from '../lib/daemon-rpc';
+import type { TunnelState, RelayProtocol } from '../lib/daemon-rpc';
 
 import type { HeaderBarStyle } from './HeaderBar';
 import type { ConnectionReduxState } from '../redux/connection/reducers';
@@ -139,14 +139,18 @@ export default class Connect extends Component<Props> {
     const tunnelState = this.props.connection.status.state;
     const details = this.props.connection.status.details;
 
-    let relayIp = null;
-    let relayPort = null;
-    let relayProtocol = null;
+    const relayOutAddress: RelayOutAddress = {
+      ipv4: this.props.connection.ip,
+      ipv6: null,
+    };
+    let relayInAddress: ?RelayInAddress = null;
 
     if ((tunnelState === 'connecting' || tunnelState === 'connected') && details) {
-      relayIp = details.address;
-      relayPort = details.tunnel.openvpn.port;
-      relayProtocol = details.tunnel.openvpn.protocol;
+      relayInAddress = {
+        ip: details.address,
+        port: details.tunnel.openvpn.port,
+        protocol: details.tunnel.openvpn.protocol,
+      };
     }
 
     return (
@@ -168,11 +172,8 @@ export default class Connect extends Component<Props> {
             city={this.props.connection.city}
             country={this.props.connection.country}
             hostname={this.props.connection.hostname}
-            relayIp={relayIp}
-            relayPort={relayPort}
-            relayProtocol={relayProtocol}
-            outIpv4={this.props.connection.ip}
-            outIpv6={null}
+            relayInAddress={relayInAddress}
+            relayOutAddress={relayOutAddress}
             onConnect={this.props.onConnect}
             onDisconnect={this.props.onDisconnect}
             onSelectLocation={this.props.onSelectLocation}
@@ -231,17 +232,25 @@ export default class Connect extends Component<Props> {
   }
 }
 
+type RelayInAddress = {
+  ip: string,
+  port: number,
+  protocol: RelayProtocol,
+};
+
+type RelayOutAddress = {
+  ipv4: ?string,
+  ipv6: ?string,
+};
+
 type TunnelControlProps = {
   tunnelState: TunnelState,
   selectedRelayName: string,
   city: ?string,
   country: ?string,
   hostname: ?string,
-  relayIp: ?string,
-  relayPort: ?number,
-  relayProtocol: ?string,
-  outIpv4: ?string,
-  outIpv6: ?string,
+  relayInAddress: ?RelayInAddress,
+  relayOutAddress: ?RelayOutAddress,
   onConnect: () => void,
   onDisconnect: () => void,
   onSelectLocation: () => void,
@@ -304,20 +313,17 @@ class TunnelControl extends Component<TunnelControlProps, TunnelControlState> {
     );
     const Footer = ({ children }) => <View style={styles.footer}>{children}</View>;
 
-    const connectionInfoProps = {
-      inAddress: {
-        ip: this.props.relayIp,
-        port: this.props.relayPort,
-        protocol: this.props.relayProtocol,
-      },
-      outAddress: {
-        ipv4: this.props.outIpv4,
-        ipv6: this.props.outIpv6,
-      },
-      startExpanded: this.state.showConnectionInfo,
-      onToggle: (expanded) => {
-        this.setState({ showConnectionInfo: expanded });
-      },
+    const ConnectionDetails = () => {
+      return (
+        <ConnectionInfo
+          inAddress={this.props.relayInAddress}
+          outAddress={this.props.relayOutAddress}
+          isExpanded={this.state.showConnectionInfo}
+          onToggle={() => {
+            this.setState((state) => ({ ...state, showConnectionInfo: !state.showConnectionInfo }));
+          }}
+        />
+      );
     };
 
     switch (this.props.tunnelState) {
@@ -331,7 +337,7 @@ class TunnelControl extends Component<TunnelControlProps, TunnelControlState> {
                 <Country />
               </Location>
               <Hostname />
-              <ConnectionInfo {...connectionInfoProps} />
+              <ConnectionDetails />
             </Body>
             <Footer>
               <SwitchLocation />
@@ -349,7 +355,7 @@ class TunnelControl extends Component<TunnelControlProps, TunnelControlState> {
                 <Country />
               </Location>
               <Hostname />
-              <ConnectionInfo {...connectionInfoProps} />
+              <ConnectionDetails />
             </Body>
             <Footer>
               <SwitchLocation />