Limit the amount of state passed to SelectLocation view

3 files changed, 31 insertions, 43 deletions

diff --git a/gui/packages/desktop/src/renderer/components/SelectLocation.js b/gui/packages/desktop/src/renderer/components/SelectLocation.js
index e9c9852ec2..f3278a7eeb 100644
--- a/gui/packages/desktop/src/renderer/components/SelectLocation.js
+++ b/gui/packages/desktop/src/renderer/components/SelectLocation.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import { View } from 'reactxp';
+import { View, Component } from 'reactxp';
 import { Accordion } from '@mullvad/components';
 import { Layout, Container } from './Layout';
 import CustomScrollbars from './CustomScrollbars';
@@ -12,15 +12,16 @@ import * as Cell from './Cell';
 import styles from './SelectLocationStyles';
 
 import type {
-  SettingsReduxState,
+  RelaySettingsRedux,
   RelayLocationRedux,
   RelayLocationCityRedux,
   RelayLocationRelayRedux,
 } from '../redux/settings/reducers';
 import type { RelayLocation } from '../lib/daemon-rpc';
 
-export type SelectLocationProps = {
-  settings: SettingsReduxState,
+type Props = {
+  relaySettings: RelaySettingsRedux,
+  relayLocations: Array<RelayLocationRedux>,
   onClose: () => void,
   onSelect: (location: RelayLocation) => void,
 };
@@ -29,19 +30,19 @@ type State = {
   expanded: Array<string>,
 };
 
-export default class SelectLocation extends React.Component<SelectLocationProps, State> {
   _selectedCell: ?Cell.CellButton;
   _scrollView: ?CustomScrollbars;
+export default class SelectLocation extends Component<Props, State> {
 
   state = {
     expanded: [],
   };
 
-  constructor(props: SelectLocationProps, context?: any) {
-    super(props, context);
+  constructor(props: Props) {
+    super(props);
 
     // set initially expanded country based on relaySettings
-    const relaySettings = this.props.settings.relaySettings;
+    const relaySettings = this.props.relaySettings;
     if (relaySettings.normal) {
       const { location } = relaySettings.normal;
       if (location === 'any') {
@@ -99,7 +100,7 @@ export default class SelectLocation extends React.Component<SelectLocationProps,
                     </HeaderSubTitle>
                   </SettingsHeader>
 
-                  {this.props.settings.relayLocations.map((relayCountry) => {
+                  {this.props.relayLocations.map((relayCountry) => {
                     return this._renderCountry(relayCountry);
                   })}
                 </View>
@@ -112,7 +113,7 @@ export default class SelectLocation extends React.Component<SelectLocationProps,
   }
 
   _isSelected(selectedLocation: RelayLocation) {
-    const { relaySettings } = this.props.settings;
+    const relaySettings = this.props.relaySettings;
     if (relaySettings.normal) {
       const otherLocation = relaySettings.normal.location;
 
diff --git a/gui/packages/desktop/src/renderer/containers/SelectLocationPage.js b/gui/packages/desktop/src/renderer/containers/SelectLocationPage.js
index 7962b40040..da23a8d9ab 100644
--- a/gui/packages/desktop/src/renderer/containers/SelectLocationPage.js
+++ b/gui/packages/desktop/src/renderer/containers/SelectLocationPage.js
@@ -11,7 +11,8 @@ import type { ReduxState, ReduxDispatch } from '../redux/store';
 import type { SharedRouteProps } from '../routes';
 
 const mapStateToProps = (state: ReduxState) => ({
-  settings: state.settings,
+  relaySettings: state.settings.relaySettings,
+  relayLocations: state.settings.relayLocations,
 });
 const mapDispatchToProps = (dispatch: ReduxDispatch, props: SharedRouteProps) => {
   const history = bindActionCreators({ goBack }, dispatch);
diff --git a/gui/packages/desktop/test/components/SelectLocation.spec.js b/gui/packages/desktop/test/components/SelectLocation.spec.js
index 3d35da0edd..7ddc378257 100644
--- a/gui/packages/desktop/test/components/SelectLocation.spec.js
+++ b/gui/packages/desktop/test/components/SelectLocation.spec.js
@@ -5,11 +5,8 @@ import { shallow } from 'enzyme';
 import { CloseBarItem } from '../../src/renderer/components/NavigationBar';
 import SelectLocation from '../../src/renderer/components/SelectLocation';
 
-import type { SettingsReduxState } from '../../src/renderer/redux/settings/reducers';
-import type { SelectLocationProps } from '../../src/renderer/components/SelectLocation';
-
 describe('components/SelectLocation', () => {
-  const state: SettingsReduxState = {
+  const defaultProps = {
     relaySettings: {
       normal: {
         location: 'any',
@@ -58,39 +55,24 @@ describe('components/SelectLocation', () => {
         ],
       },
     ],
-    autoConnect: false,
-    allowLan: false,
-    enableIpv6: true,
-  };
-
-  const makeProps = (
-    state: SettingsReduxState,
-    mergeProps: $Shape<SelectLocationProps>,
-  ): SelectLocationProps => {
-    const defaultProps: SelectLocationProps = {
-      settings: state,
-      onClose: () => {},
-      onSelect: (_server) => {},
-    };
-    return Object.assign({}, defaultProps, mergeProps);
-  };
-
-  const render = (props: SelectLocationProps) => {
-    return shallow(<SelectLocation {...props} />);
   };
 
   it('should call close callback', (done) => {
-    const props = makeProps(state, {
+    const props = {
+      ...defaultProps,
       onClose: () => done(),
-    });
-    const component = render(props)
+      onSelect: () => {},
+    };
+    const component = shallow(<SelectLocation {...props} />)
       .find(CloseBarItem)
       .dive();
     component.simulate('press');
   });
 
   it('should call select callback for country', (done) => {
-    const props = makeProps(state, {
+    const props = {
+      ...defaultProps,
+      onClose: () => {},
       onSelect: (location) => {
         try {
           expect(location).to.deep.equal({
@@ -101,14 +83,17 @@ describe('components/SelectLocation', () => {
           done(e);
         }
       },
-    });
-    const elements = getComponent(render(props), 'country');
+    };
+    const component = shallow(<SelectLocation {...props} />);
+    const elements = getComponent(component, 'country');
     expect(elements).to.have.length(1);
     elements.at(0).simulate('press');
   });
 
   it('should call select callback for city', (done) => {
-    const props = makeProps(state, {
+    const props = {
+      ...defaultProps,
+      onClose: () => {},
       onSelect: (location) => {
         try {
           expect(location).to.deep.equal({
@@ -119,8 +104,9 @@ describe('components/SelectLocation', () => {
           done(e);
         }
       },
-    });
-    const elements = getComponent(render(props), 'city');
+    };
+    const component = shallow(<SelectLocation {...props} />);
+    const elements = getComponent(component, 'city');
     expect(elements).to.have.length(2);
     elements.at(0).simulate('press');
   });