Improve type safety when using redux actions

2 files changed, 52 insertions, 54 deletions

diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index af584edfdc..079f9be5df 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -28,7 +28,6 @@ import { IpcRendererEventChannel } from '../shared/ipc-event-channel';
 
 import {
   AccountToken,
-  ConnectionConfig,
   IAccountData,
   ILocation,
   IRelayList,
@@ -41,14 +40,26 @@ import {
 export default class AppRenderer {
   private memoryHistory = createMemoryHistory();
   private reduxStore = configureStore(this.memoryHistory);
-  private reduxActions: { [key: string]: any };
+  private reduxActions = {
+    account: bindActionCreators(accountActions, this.reduxStore.dispatch),
+    connection: bindActionCreators(connectionActions, this.reduxStore.dispatch),
+    settings: bindActionCreators(settingsActions, this.reduxStore.dispatch),
+    version: bindActionCreators(versionActions, this.reduxStore.dispatch),
+    userInterface: bindActionCreators(userInterfaceActions, this.reduxStore.dispatch),
+    history: bindActionCreators(
+      {
+        push: pushHistory,
+        replace: replaceHistory,
+      },
+      this.reduxStore.dispatch,
+    ),
+  };
   private accountDataCache = new AccountDataCache(
     (accountToken) => {
       return IpcRendererEventChannel.account.getData(accountToken);
     },
     (accountData) => {
-      const expiry = accountData ? accountData.expiry : null;
-      this.reduxActions.account.updateAccountExpiry(expiry);
+      this.reduxActions.account.updateAccountExpiry(accountData && accountData.expiry);
     },
   );
 
@@ -61,22 +72,6 @@ export default class AppRenderer {
   private loginTimer?: NodeJS.Timeout;
 
   constructor() {
-    const dispatch = this.reduxStore.dispatch;
-    this.reduxActions = {
-      account: bindActionCreators(accountActions, dispatch),
-      connection: bindActionCreators(connectionActions, dispatch),
-      settings: bindActionCreators(settingsActions, dispatch),
-      version: bindActionCreators(versionActions, dispatch),
-      userInterface: bindActionCreators(userInterfaceActions, dispatch),
-      history: bindActionCreators(
-        {
-          push: pushHistory,
-          replace: replaceHistory,
-        },
-        dispatch,
-      ),
-    };
-
     ipcRenderer.on(
       'update-window-shape',
       (_event: Electron.Event, shapeParams: IWindowShapeParameters) => {
@@ -251,7 +246,7 @@ export default class AppRenderer {
     // connect only if tunnel is disconnected or blocked.
     if (state === 'disconnecting' || state === 'disconnected' || state === 'blocked') {
       // switch to the connecting state ahead of time to make the app look more responsive
-      this.reduxActions.connection.connecting(null);
+      this.reduxActions.connection.connecting();
 
       return IpcRendererEventChannel.tunnel.connect();
     }
@@ -321,57 +316,60 @@ export default class AppRenderer {
     const actions = this.reduxActions;
 
     if ('normal' in relaySettings) {
-      const payload: { [key: string]: any } = {};
       const normal = relaySettings.normal;
       const tunnel = normal.tunnel;
       const location = normal.location;
 
-      payload.location = location === 'any' ? 'any' : location.only;
+      const relayLocation = location === 'any' ? 'any' : location.only;
 
       if (tunnel === 'any') {
-        payload.port = 'any';
-        payload.protocol = 'any';
+        actions.settings.updateRelay({
+          normal: {
+            location: relayLocation,
+            port: 'any',
+            protocol: 'any',
+          },
+        });
       } else {
         const constraints = tunnel.only;
+
         if ('openvpn' in constraints) {
           const { port, protocol } = constraints.openvpn;
-          payload.port = port === 'any' ? port : port.only;
-          payload.protocol = protocol === 'any' ? protocol : protocol.only;
-        }
 
-        if ('wireguard' in constraints) {
+          actions.settings.updateRelay({
+            normal: {
+              location: relayLocation,
+              port: port === 'any' ? port : port.only,
+              protocol: protocol === 'any' ? protocol : protocol.only,
+            },
+          });
+        } else if ('wireguard' in constraints) {
           const { port } = constraints.wireguard;
-          payload.port = port === 'any' ? port : port.only;
-          payload.protocol = 'udp';
+
+          actions.settings.updateRelay({
+            normal: {
+              location: relayLocation,
+              port: port === 'any' ? port : port.only,
+              protocol: 'udp',
+            },
+          });
         }
       }
-
-      actions.settings.updateRelay({
-        normal: payload,
-      });
     } else if ('customTunnelEndpoint' in relaySettings) {
       const customTunnelEndpoint = relaySettings.customTunnelEndpoint;
-      const host = customTunnelEndpoint.host;
-      const config: ConnectionConfig = customTunnelEndpoint.config;
+      const config = customTunnelEndpoint.config;
 
-      let port = 0;
-      let protocol = 'udp';
       if ('openvpn' in config) {
-        port = config.openvpn.endpoint.port;
-        protocol = config.openvpn.endpoint.protocol;
-      }
-
-      if ('wireguard' in config) {
+        actions.settings.updateRelay({
+          customTunnelEndpoint: {
+            host: customTunnelEndpoint.host,
+            port: config.openvpn.endpoint.port,
+            protocol: config.openvpn.endpoint.protocol,
+          },
+        });
+      } else if ('wireguard' in config) {
         // TODO: handle wireguard
       }
-
-      actions.settings.updateRelay({
-        customTunnelEndpoint: {
-          host,
-          port,
-          protocol,
-        },
-      });
     }
   }
 
diff --git a/gui/src/renderer/redux/account/actions.ts b/gui/src/renderer/redux/account/actions.ts
index 8dba590737..e7f6ade346 100644
--- a/gui/src/renderer/redux/account/actions.ts
+++ b/gui/src/renderer/redux/account/actions.ts
@@ -34,7 +34,7 @@ interface IUpdateAccountHistoryAction {
 
 interface IUpdateAccountExpiryAction {
   type: 'UPDATE_ACCOUNT_EXPIRY';
-  expiry: string;
+  expiry?: string;
 }
 
 export type AccountAction =
@@ -93,7 +93,7 @@ function updateAccountHistory(accountHistory: AccountToken[]): IUpdateAccountHis
   };
 }
 
-function updateAccountExpiry(expiry: string): IUpdateAccountExpiryAction {
+function updateAccountExpiry(expiry?: string): IUpdateAccountExpiryAction {
   return {
     type: 'UPDATE_ACCOUNT_EXPIRY',
     expiry,