Refactor connection panel into container

2 files changed, 76 insertions, 9 deletions

diff --git a/gui/src/renderer/containers/ConnectPage.tsx b/gui/src/renderer/containers/ConnectPage.tsx
index 2e22ca9fab..3669171f89 100644
--- a/gui/src/renderer/containers/ConnectPage.tsx
+++ b/gui/src/renderer/containers/ConnectPage.tsx
@@ -11,13 +11,10 @@ import {
 } from '../../shared/gettext';
 import Connect from '../components/Connect';
 import AccountExpiry from '../lib/account-expiry';
-import userInterfaceActions from '../redux/userinterface/actions';
-
+import { IRelayLocationRedux, RelaySettingsRedux } from '../redux/settings/reducers';
 import { IReduxState, ReduxDispatch } from '../redux/store';
 import { ISharedRouteProps } from '../routes';
 
-import { IRelayLocationRedux, RelaySettingsRedux } from '../redux/settings/reducers';
-
 function getRelayName(
   relaySettings: RelaySettingsRedux,
   relayLocations: IRelayLocationRedux[],
@@ -79,19 +76,14 @@ const mapStateToProps = (state: IReduxState, props: ISharedRouteProps) => {
     selectedRelayName: getRelayName(state.settings.relaySettings, state.settings.relayLocations),
     connection: state.connection,
     version: state.version,
-    connectionInfoOpen: state.userInterface.connectionInfoOpen,
     blockWhenDisconnected: state.settings.blockWhenDisconnected,
   };
 };
 
 const mapDispatchToProps = (dispatch: ReduxDispatch, props: ISharedRouteProps) => {
-  const userInterface = bindActionCreators(userInterfaceActions, dispatch);
   const history = bindActionCreators({ push }, dispatch);
 
   return {
-    onToggleConnectionInfo: (isOpen: boolean) => {
-      userInterface.updateConnectionInfoOpen(isOpen);
-    },
     onSettings: () => {
       history.push('/settings');
     },
diff --git a/gui/src/renderer/containers/ConnectionPanelContainer.tsx b/gui/src/renderer/containers/ConnectionPanelContainer.tsx
new file mode 100644
index 0000000000..77b164c65b
--- /dev/null
+++ b/gui/src/renderer/containers/ConnectionPanelContainer.tsx
@@ -0,0 +1,75 @@
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { ITunnelEndpoint, parseSocketAddress } from '../../shared/daemon-rpc-types';
+import ConnectionPanel, {
+  IBridgeData,
+  IInAddress,
+  IOutAddress,
+} from '../components/ConnectionPanel';
+import { IReduxState, ReduxDispatch } from '../redux/store';
+import userInterfaceActions from '../redux/userinterface/actions';
+
+function tunnelEndpointToRelayInAddress(tunnelEndpoint: ITunnelEndpoint): IInAddress {
+  const socketAddr = parseSocketAddress(tunnelEndpoint.address);
+  return {
+    ip: socketAddr.host,
+    port: socketAddr.port,
+    protocol: tunnelEndpoint.protocol,
+    tunnelType: tunnelEndpoint.tunnelType,
+  };
+}
+
+function tunnelEndpointToBridgeData(endpoint: ITunnelEndpoint): IBridgeData | undefined {
+  if (!endpoint.proxy) {
+    return undefined;
+  }
+
+  const socketAddr = parseSocketAddress(endpoint.proxy.address);
+  return {
+    ip: socketAddr.host,
+    port: socketAddr.port,
+    protocol: endpoint.proxy.protocol,
+    bridgeType: endpoint.proxy.proxyType,
+  };
+}
+
+const mapStateToProps = (state: IReduxState) => {
+  const status = state.connection.status;
+
+  const outAddress: IOutAddress = {
+    ipv4: state.connection.ipv4,
+    ipv6: state.connection.ipv6,
+  };
+
+  const inAddress: IInAddress | undefined =
+    (status.state === 'connecting' || status.state === 'connected') && status.details
+      ? tunnelEndpointToRelayInAddress(status.details)
+      : undefined;
+
+  const bridgeInfo: IBridgeData | undefined =
+    (status.state === 'connecting' || status.state === 'connected') && status.details
+      ? tunnelEndpointToBridgeData(status.details)
+      : undefined;
+
+  return {
+    isOpen: state.userInterface.connectionPanelVisible,
+    hostname: state.connection.hostname,
+    bridgeHostname: state.connection.bridgeHostname,
+    inAddress,
+    bridgeInfo,
+    outAddress,
+  };
+};
+
+const mapDispatchToProps = (dispatch: ReduxDispatch) => {
+  const userInterface = bindActionCreators(userInterfaceActions, dispatch);
+
+  return {
+    onToggle: userInterface.toggleConnectionPanel,
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(ConnectionPanel);