Move account number row and expiry row to functional components

2 files changed, 21 insertions, 18 deletions

diff --git a/gui/src/renderer/components/Account.tsx b/gui/src/renderer/components/Account.tsx
index 2ab21f7d30..046650da42 100644
--- a/gui/src/renderer/components/Account.tsx
+++ b/gui/src/renderer/components/Account.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 
 import { formatDate, hasExpired } from '../../shared/account-expiry';
-import { AccountToken, DeviceState } from '../../shared/daemon-rpc-types';
+import { DeviceState } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
+import { useSelector } from '../redux/store';
 import {
   AccountContainer,
   AccountFooter,
@@ -27,10 +28,6 @@ import { NavigationBar, NavigationItems, TitleBarItem } from './NavigationBar';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
 interface IProps {
-  deviceName?: string;
-  accountToken?: AccountToken;
-  accountExpiry?: string;
-  expiryLocale: string;
   isOffline: boolean;
   prepareLogout: () => void;
   cancelLogout: () => void;
@@ -81,27 +78,21 @@ export default class Account extends React.Component<IProps, IState> {
                   <AccountRowLabel>
                     {messages.pgettext('device-management', 'Device name')}
                   </AccountRowLabel>
-                  <DeviceRowValue>{this.props.deviceName}</DeviceRowValue>
+                  <DeviceNameRow />
                 </AccountRow>
 
                 <AccountRow>
                   <AccountRowLabel>
                     {messages.pgettext('account-view', 'Account number')}
                   </AccountRowLabel>
-                  <AccountRowValue
-                    as={AccountTokenLabel}
-                    accountToken={this.props.accountToken || ''}
-                  />
+                  <AccountNumberRow />
                 </AccountRow>
 
                 <AccountRow>
                   <AccountRowLabel>
                     {messages.pgettext('account-view', 'Paid until')}
                   </AccountRowLabel>
-                  <FormattedAccountExpiry
-                    expiry={this.props.accountExpiry}
-                    locale={this.props.expiryLocale}
-                  />
+                  <AccountExpiryRow />
                 </AccountRow>
               </AccountRows>
 
@@ -211,6 +202,22 @@ export default class Account extends React.Component<IProps, IState> {
   };
 }
 
+function AccountNumberRow() {
+  const accountToken = useSelector((state) => state.account.accountToken);
+  return <AccountRowValue as={AccountTokenLabel} accountToken={accountToken || ''} />;
+}
+
+function AccountExpiryRow() {
+  const accountExpiry = useSelector((state) => state.account.expiry);
+  const expiryLocale = useSelector((state) => state.userInterface.locale);
+  return <FormattedAccountExpiry expiry={accountExpiry} locale={expiryLocale} />;
+}
+
+function DeviceNameRow() {
+  const deviceName = useSelector((state) => state.account.deviceName);
+  return <DeviceRowValue>{deviceName}</DeviceRowValue>;
+}
+
 function FormattedAccountExpiry(props: { expiry?: string; locale: string }) {
   if (props.expiry) {
     if (hasExpired(props.expiry)) {
diff --git a/gui/src/renderer/containers/AccountPage.tsx b/gui/src/renderer/containers/AccountPage.tsx
index a81676c48b..359d33b5c0 100644
--- a/gui/src/renderer/containers/AccountPage.tsx
+++ b/gui/src/renderer/containers/AccountPage.tsx
@@ -9,10 +9,6 @@ import accountActions from '../redux/account/actions';
 import { IReduxState, ReduxDispatch } from '../redux/store';
 
 const mapStateToProps = (state: IReduxState) => ({
-  deviceName: state.account.deviceName,
-  accountToken: state.account.accountToken,
-  accountExpiry: state.account.expiry,
-  expiryLocale: state.userInterface.locale,
   isOffline: state.connection.isBlocked,
 });
 const mapDispatchToProps = (dispatch: ReduxDispatch, props: IHistoryProps & IAppContext) => {