diff options
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(), }; |