Use `TunnelStateTransition` in redux state

3 files changed, 41 insertions, 48 deletions

diff --git a/gui/packages/desktop/src/renderer/components/Connect.js b/gui/packages/desktop/src/renderer/components/Connect.js
index 832e805bb8..ff0722e3c8 100644
--- a/gui/packages/desktop/src/renderer/components/Connect.js
+++ b/gui/packages/desktop/src/renderer/components/Connect.js
@@ -13,7 +13,7 @@ import Map from './Map';
 import styles from './ConnectStyles';
 import { NoCreditError, NoInternetError } from '../errors';
 import WindowStateObserver from '../lib/window-state-observer';
-import type { BlockReason, TunnelState } from '../lib/daemon-rpc';
+import type { BlockReason, TunnelStateTransition } from '../lib/daemon-rpc';
 
 import type { HeaderBarStyle } from './HeaderBar';
 import type { ConnectionReduxState } from '../redux/connection/reducers';
@@ -77,7 +77,7 @@ export default class Connect extends Component<Props, State> {
     const connection = props.connection;
     this.state = {
       ...this.state,
-      banner: this.getBannerState(connection.status, connection.blockReason),
+      banner: this.getBannerState(connection.status),
     };
   }
 
@@ -102,11 +102,11 @@ export default class Connect extends Component<Props, State> {
     const newConnection = this.props.connection;
 
     if (
-      oldConnection.status !== newConnection.status ||
-      oldConnection.blockReason !== newConnection.blockReason
+      oldConnection.status.state !== newConnection.status.state ||
+      oldConnection.status.details !== newConnection.status.details
     ) {
       this.setState({
-        banner: this.getBannerState(newConnection.status, newConnection.blockReason),
+        banner: this.getBannerState(newConnection.status),
       });
     }
   }
@@ -126,11 +126,8 @@ export default class Connect extends Component<Props, State> {
     );
   }
 
-  getBannerState(
-    tunnelState: TunnelState,
-    blockReason: ?BlockReason,
-  ): $PropertyType<State, 'banner'> {
-    switch (tunnelState) {
+  getBannerState(tunnelState: TunnelStateTransition): $PropertyType<State, 'banner'> {
+    switch (tunnelState.state) {
       case 'connecting':
         return {
           visible: true,
@@ -142,7 +139,7 @@ export default class Connect extends Component<Props, State> {
         return {
           visible: true,
           title: 'BLOCKING INTERNET',
-          subtitle: blockReason ? getBlockReasonMessage(blockReason) : '',
+          subtitle: getBlockReasonMessage(tunnelState.details),
         };
 
       default:
@@ -190,16 +187,17 @@ export default class Connect extends Component<Props, State> {
 
   _getMapProps() {
     const { longitude, latitude, status } = this.props.connection;
+    const state = status.state;
 
     // when the user location is known
     if (typeof longitude === 'number' && typeof latitude === 'number') {
       return {
         center: [longitude, latitude],
         // do not show the marker when connecting
-        showMarker: status !== 'connecting',
-        markerStyle: status === 'connected' || status === 'blocked' ? 'secure' : 'unsecure',
+        showMarker: state !== 'connecting',
+        markerStyle: state === 'connected' || state === 'blocked' ? 'secure' : 'unsecure',
         // zoom in when connected
-        zoomLevel: status === 'connected' ? 'low' : 'medium',
+        zoomLevel: state === 'connected' ? 'low' : 'medium',
         // a magic offset to align marker with spinner
         offset: [0, 123],
       };
@@ -224,7 +222,7 @@ export default class Connect extends Component<Props, State> {
       false,
       false,
     ];
-    switch (this.props.connection.status) {
+    switch (this.props.connection.status.state) {
       case 'connecting':
         isConnecting = true;
         break;
@@ -392,8 +390,8 @@ export default class Connect extends Component<Props, State> {
   // Private
 
   headerBarStyle(): HeaderBarStyle {
-    const { status } = this.props.connection;
-    switch (status) {
+    const { state } = this.props.connection.status;
+    switch (state) {
       case 'disconnecting':
       case 'disconnected':
         return 'error';
@@ -402,23 +400,23 @@ export default class Connect extends Component<Props, State> {
       case 'blocked':
         return 'success';
       default:
-        throw new Error(`Invalid TunnelState: ${(status: empty)}`);
+        throw new Error(`Invalid TunnelState: ${(state: empty)}`);
     }
   }
 
   networkSecurityStyle(): Types.Style {
     const classes = [styles.status_security];
-    const { status } = this.props.connection;
-    if (status === 'connected' || status === 'blocked') {
+    const { state } = this.props.connection.status;
+    if (state === 'connected' || state === 'blocked') {
       classes.push(styles.status_security__secure);
-    } else if (status === 'disconnected' || status === 'disconnecting') {
+    } else if (state === 'disconnected' || state === 'disconnecting') {
       classes.push(styles.status_security__unsecured);
     }
     return classes;
   }
 
   networkSecurityMessage(): string {
-    switch (this.props.connection.status) {
+    switch (this.props.connection.status.state) {
       case 'connected':
         return 'SECURE CONNECTION';
       case 'blocked':
@@ -432,7 +430,7 @@ export default class Connect extends Component<Props, State> {
 
   ipAddressStyle(): Types.Style {
     var classes = [styles.status_ipaddress];
-    if (this.props.connection.status === 'connecting') {
+    if (this.props.connection.status.state === 'connecting') {
       classes.push(styles.status_ipaddress__invisible);
     }
     return classes;
diff --git a/gui/packages/desktop/src/renderer/redux/connection/reducers.js b/gui/packages/desktop/src/renderer/redux/connection/reducers.js
index 82374dbb2c..bb49eb1bb6 100644
--- a/gui/packages/desktop/src/renderer/redux/connection/reducers.js
+++ b/gui/packages/desktop/src/renderer/redux/connection/reducers.js
@@ -1,28 +1,26 @@
 // @flow
 
 import type { ReduxAction } from '../store';
-import type { BlockReason, TunnelState, Ip } from '../../lib/daemon-rpc';
+import type { TunnelStateTransition, Ip } from '../../lib/daemon-rpc';
 
 export type ConnectionReduxState = {
-  status: TunnelState,
+  status: TunnelStateTransition,
   isOnline: boolean,
   ip: ?Ip,
   latitude: ?number,
   longitude: ?number,
   country: ?string,
   city: ?string,
-  blockReason: ?BlockReason,
 };
 
 const initialState: ConnectionReduxState = {
-  status: 'disconnected',
+  status: { state: 'disconnected' },
   isOnline: true,
   ip: null,
   latitude: null,
   longitude: null,
   country: null,
   city: null,
-  blockReason: null,
 };
 
 export default function(
@@ -34,19 +32,19 @@ export default function(
       return { ...state, ...action.newLocation };
 
     case 'CONNECTING':
-      return { ...state, ...{ status: 'connecting', blockReason: null } };
+      return { ...state, status: { state: 'connecting' } };
 
     case 'CONNECTED':
-      return { ...state, ...{ status: 'connected', blockReason: null } };
+      return { ...state, status: { state: 'connected' } };
 
     case 'DISCONNECTED':
-      return { ...state, ...{ status: 'disconnected', blockReason: null } };
+      return { ...state, status: { state: 'disconnected' } };
 
     case 'DISCONNECTING':
-      return { ...state, ...{ status: 'disconnecting', blockReason: null } };
+      return { ...state, status: { state: 'disconnecting', details: 'nothing' } };
 
     case 'BLOCKED':
-      return { ...state, ...{ status: 'blocked', blockReason: action.reason } };
+      return { ...state, status: { state: 'blocked', details: action.reason } };
 
     case 'ONLINE':
       return { ...state, ...{ isOnline: true } };
diff --git a/gui/packages/desktop/test/components/Connect.spec.js b/gui/packages/desktop/test/components/Connect.spec.js
index 567518b0ce..7a700982ae 100644
--- a/gui/packages/desktop/test/components/Connect.spec.js
+++ b/gui/packages/desktop/test/components/Connect.spec.js
@@ -12,7 +12,7 @@ describe('components/Connect', () => {
     const component = renderWithProps({
       connection: {
         ...defaultProps.connection,
-        status: 'disconnected',
+        status: { state: 'disconnected' },
       },
     });
 
@@ -28,7 +28,7 @@ describe('components/Connect', () => {
     const component = renderWithProps({
       connection: {
         ...defaultProps.connection,
-        status: 'connected',
+        status: { state: 'connected' },
       },
     });
 
@@ -44,8 +44,7 @@ describe('components/Connect', () => {
     const component = renderWithProps({
       connection: {
         ...defaultProps.connection,
-        status: 'blocked',
-        blockReason: { reason: 'no_matching_relay' },
+        status: { state: 'blocked', details: { reason: 'no_matching_relay' } },
       },
     });
 
@@ -61,7 +60,7 @@ describe('components/Connect', () => {
     const component = renderWithProps({
       connection: {
         ...defaultProps.connection,
-        status: 'connecting',
+        status: { state: 'connecting' },
         country: 'Norway',
         city: 'Oslo',
         ip: '4.3.2.1',
@@ -79,7 +78,7 @@ describe('components/Connect', () => {
     const component = renderWithProps({
       connection: {
         ...defaultProps.connection,
-        status: 'connected',
+        status: { state: 'connected' },
         country: 'Norway',
         city: 'Oslo',
         ip: '4.3.2.1',
@@ -97,7 +96,7 @@ describe('components/Connect', () => {
     const component = renderWithProps({
       connection: {
         ...defaultProps.connection,
-        status: 'disconnected',
+        status: { state: 'disconnected' },
         country: 'Norway',
         city: 'Oslo',
         ip: '4.3.2.1',
@@ -116,7 +115,7 @@ describe('components/Connect', () => {
       onConnect: () => done(),
       connection: {
         ...defaultProps.connection,
-        status: 'disconnected',
+        status: { state: 'disconnected' },
       },
     });
     const connectButton = getComponent(component, 'secureConnection');
@@ -125,11 +124,11 @@ describe('components/Connect', () => {
   });
 
   it('hides the blocking internet message when connected, disconnecting or disconnected', () => {
-    for (const status of ['connected', 'disconnecting', 'disconnected']) {
+    for (const state of ['connected', 'disconnecting', 'disconnected']) {
       const component = renderWithProps({
         connection: {
           ...defaultProps.connection,
-          status,
+          status: { state },
         },
       });
       const blockingAccordion = getComponent(component, 'blockingAccordion');
@@ -142,7 +141,7 @@ describe('components/Connect', () => {
     const component = renderWithProps({
       connection: {
         ...defaultProps.connection,
-        status: 'connecting',
+        status: { state: 'connecting' },
         country: 'Norway',
         city: 'Oslo',
       },
@@ -156,8 +155,7 @@ describe('components/Connect', () => {
     const component = renderWithProps({
       connection: {
         ...defaultProps.connection,
-        status: 'blocked',
-        blockReason: { reason: 'no_matching_relay' },
+        status: { state: 'blocked', details: { reason: 'no_matching_relay' } },
       },
     });
     const blockingAccordion = getComponent(component, 'blockingAccordion');
@@ -175,14 +173,13 @@ const defaultProps: ConnectProps = {
   accountExpiry: '',
   selectedRelayName: '',
   connection: {
-    status: 'disconnected',
+    status: { state: 'disconnected' },
     isOnline: true,
     ip: null,
     latitude: null,
     longitude: null,
     country: null,
     city: null,
-    blockReason: null,
   },
   updateAccountExpiry: () => Promise.resolve(),
 };