Replace LoginPage with a functional component

4 files changed, 37 insertions, 46 deletions

diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index 940dcc000f..09c84ea673 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -437,7 +437,7 @@ export default class AppRenderer {
     await this.disconnectTunnel();
   };
 
-  public async createNewAccount() {
+  public createNewAccount = async () => {
     log.info('Creating account');
 
     const actions = this.reduxActions;
@@ -451,7 +451,7 @@ export default class AppRenderer {
       const error = e as Error;
       actions.account.createAccountFailed(error);
     }
-  }
+  };
 
   public fetchDevices = async (accountNumber: AccountNumber): Promise<Array<IDevice>> => {
     const devices = await IpcRendererEventChannel.account.listDevices(accountNumber);
diff --git a/gui/src/renderer/components/AppRouter.tsx b/gui/src/renderer/components/AppRouter.tsx
index e1a3d2ab0f..e83b6f55cd 100644
--- a/gui/src/renderer/components/AppRouter.tsx
+++ b/gui/src/renderer/components/AppRouter.tsx
@@ -1,8 +1,8 @@
 import { createRef, useCallback, useEffect, useState } from 'react';
 import { Route, Switch } from 'react-router';
 
+import LoginPage from '../components/Login';
 import SelectLocation from '../components/select-location/SelectLocationContainer';
-import LoginPage from '../containers/LoginPage';
 import { useAppContext } from '../context';
 import { ITransitionSpecification, transitions, useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
diff --git a/gui/src/renderer/components/Login.tsx b/gui/src/renderer/components/Login.tsx
index 8f17c35651..430772c2c7 100644
--- a/gui/src/renderer/components/Login.tsx
+++ b/gui/src/renderer/components/Login.tsx
@@ -6,7 +6,9 @@ import { AccountDataError, AccountNumber } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { formatAccountNumber } from '../lib/account';
+import useActions from '../lib/actionsHook';
 import { formatHtml } from '../lib/html-formatter';
+import accountActions from '../redux/account/actions';
 import { LoginState } from '../redux/account/reducers';
 import { useSelector } from '../redux/store';
 import Accordion from './Accordion';
@@ -40,6 +42,37 @@ import {
   StyledTopInfo,
 } from './LoginStyles';
 
+export default function LoginContainer() {
+  const { openUrl, login, clearAccountHistory, createNewAccount } = useAppContext();
+  const { resetLoginError, updateAccountNumber } = useActions(accountActions);
+
+  const { accountNumber, accountHistory, status } = useSelector((state) => state.account);
+
+  const tunnelState = useSelector((state) => state.connection.status);
+  const blockWhenDisconnected = useSelector((state) => state.settings.blockWhenDisconnected);
+  const showBlockMessage = tunnelState.state === 'error' || blockWhenDisconnected;
+
+  const isPerformingPostUpgrade = useSelector(
+    (state) => state.userInterface.isPerformingPostUpgrade,
+  );
+
+  return (
+    <Login
+      accountNumber={accountNumber}
+      accountHistory={accountHistory}
+      loginState={status}
+      showBlockMessage={showBlockMessage}
+      openExternalLink={openUrl}
+      login={login}
+      resetLoginError={resetLoginError}
+      updateAccountNumber={updateAccountNumber}
+      clearAccountHistory={clearAccountHistory}
+      createNewAccount={createNewAccount}
+      isPerformingPostUpgrade={isPerformingPostUpgrade}
+    />
+  );
+}
+
 interface IProps {
   accountNumber?: AccountNumber;
   accountHistory?: AccountNumber;
@@ -60,7 +93,7 @@ interface IState {
 
 const MIN_ACCOUNT_NUMBER_LENGTH = 10;
 
-export default class Login extends React.Component<IProps, IState> {
+class Login extends React.Component<IProps, IState> {
   public state: IState = {
     isActive: true,
   };
diff --git a/gui/src/renderer/containers/LoginPage.tsx b/gui/src/renderer/containers/LoginPage.tsx
deleted file mode 100644
index 49fdbba839..0000000000
--- a/gui/src/renderer/containers/LoginPage.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-
-import Login from '../components/Login';
-import withAppContext, { IAppContext } from '../context';
-import accountActions from '../redux/account/actions';
-import { IReduxState, ReduxDispatch } from '../redux/store';
-
-const mapStateToProps = (state: IReduxState) => {
-  const tunnelState = state.connection.status;
-  const blockWhenDisconnected = state.settings.blockWhenDisconnected;
-  const { accountNumber, accountHistory, status } = state.account;
-
-  const showBlockMessage = tunnelState.state === 'error' || blockWhenDisconnected;
-
-  const isPerformingPostUpgrade = state.userInterface.isPerformingPostUpgrade;
-
-  return {
-    accountNumber,
-    accountHistory,
-    loginState: status,
-    showBlockMessage,
-    isPerformingPostUpgrade,
-  };
-};
-const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
-  const { resetLoginError, updateAccountNumber } = bindActionCreators(accountActions, dispatch);
-  return {
-    login: (account: string) => {
-      void props.app.login(account);
-    },
-    resetLoginError: () => {
-      resetLoginError();
-    },
-    openExternalLink: (url: string) => props.app.openUrl(url),
-    updateAccountNumber,
-    clearAccountHistory: () => props.app.clearAccountHistory(),
-    createNewAccount: () => void props.app.createNewAccount(),
-  };
-};
-
-export default withAppContext(connect(mapStateToProps, mapDispatchToProps)(Login));