Switch to using device removal daemon event for device list updates

4 files changed, 38 insertions, 15 deletions

diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index eb6ccb1a11..586e120868 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -129,6 +129,10 @@ export default class AppRenderer {
       this.handleAccountChange(deviceConfig, oldDeviceConfig?.accountToken);
     });
 
+    IpcRendererEventChannel.account.listenDevices((devices) => {
+      this.reduxActions.account.updateDevices(devices);
+    });
+
     IpcRendererEventChannel.accountHistory.listen((newAccountHistory?: AccountToken) => {
       this.setAccountHistory(newAccountHistory);
     });
@@ -325,9 +329,11 @@ export default class AppRenderer {
     IpcRendererEventChannel.account.updateData();
   }
 
-  public listDevices(accountToken: AccountToken): Promise<Array<IDevice>> {
-    return IpcRendererEventChannel.account.listDevices(accountToken);
-  }
+  public fetchDevices = async (accountToken: AccountToken): Promise<Array<IDevice>> => {
+    const devices = await IpcRendererEventChannel.account.listDevices(accountToken);
+    this.reduxActions.account.updateDevices(devices);
+    return devices;
+  };
 
   public removeDevice(deviceRemoval: IDeviceRemoval): Promise<void> {
     return IpcRendererEventChannel.account.removeDevice(deviceRemoval);
diff --git a/gui/src/renderer/components/TooManyDevices.tsx b/gui/src/renderer/components/TooManyDevices.tsx
index 7b434468c7..56ecbd99c1 100644
--- a/gui/src/renderer/components/TooManyDevices.tsx
+++ b/gui/src/renderer/components/TooManyDevices.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 import { colors } from '../../config.json';
@@ -91,18 +91,13 @@ const StyledRemoveDeviceButton = styled.button({
 
 export default function TooManyDevices() {
   const history = useHistory();
-  const { listDevices, removeDevice, login, cancelLogin } = useAppContext();
+  const { fetchDevices, removeDevice, login, cancelLogin } = useAppContext();
   const accountToken = useSelector((state) => state.account.accountToken)!;
-  const [devices, setDevices] = useState<Array<IDevice>>();
-
-  const fetchDevices = useCallback(async () => {
-    setDevices(await listDevices(accountToken));
-  }, [listDevices, accountToken]);
+  const devices = useSelector((state) => state.account.devices);
 
   const onRemoveDevice = useCallback(
     async (deviceId: string) => {
       await removeDevice({ accountToken, deviceId });
-      await fetchDevices();
     },
     [removeDevice, accountToken],
   );
@@ -113,7 +108,7 @@ export default function TooManyDevices() {
     history.reset(RoutePath.login, transitions.pop);
   }, [history.reset, cancelLogin]);
 
-  useEffect(() => void fetchDevices(), []);
+  useEffect(() => void fetchDevices(accountToken), []);
 
   const iconSource = getIconSource(devices);
   const title = getTitle(devices);
diff --git a/gui/src/renderer/redux/account/actions.ts b/gui/src/renderer/redux/account/actions.ts
index 5affa1bb26..e53cb11545 100644
--- a/gui/src/renderer/redux/account/actions.ts
+++ b/gui/src/renderer/redux/account/actions.ts
@@ -1,4 +1,4 @@
-import { AccountToken, DeviceConfig } from '../../../shared/daemon-rpc-types';
+import { AccountToken, DeviceConfig, IDevice } from '../../../shared/daemon-rpc-types';
 
 interface IStartLoginAction {
   type: 'START_LOGIN';
@@ -64,6 +64,11 @@ interface IUpdateAccountExpiryAction {
   expiry?: string;
 }
 
+interface IUpdateDevicesAction {
+  type: 'UPDATE_DEVICES';
+  devices: Array<IDevice>;
+}
+
 export type AccountAction =
   | IStartLoginAction
   | ILoggedInAction
@@ -77,7 +82,8 @@ export type AccountAction =
   | IAccountSetupFinished
   | IUpdateAccountTokenAction
   | IUpdateAccountHistoryAction
-  | IUpdateAccountExpiryAction;
+  | IUpdateAccountExpiryAction
+  | IUpdateDevicesAction;
 
 function startLogin(accountToken: AccountToken): IStartLoginAction {
   return {
@@ -167,6 +173,13 @@ function updateAccountExpiry(expiry?: string): IUpdateAccountExpiryAction {
   };
 }
 
+function updateDevices(devices: Array<IDevice>): IUpdateDevicesAction {
+  return {
+    type: 'UPDATE_DEVICES',
+    devices: devices.sort((a, b) => a.name.localeCompare(b.name)),
+  };
+}
+
 export default {
   startLogin,
   loggedIn,
@@ -181,4 +194,5 @@ export default {
   updateAccountToken,
   updateAccountHistory,
   updateAccountExpiry,
+  updateDevices,
 };
diff --git a/gui/src/renderer/redux/account/reducers.ts b/gui/src/renderer/redux/account/reducers.ts
index 6c5fa1d76b..b336ea665a 100644
--- a/gui/src/renderer/redux/account/reducers.ts
+++ b/gui/src/renderer/redux/account/reducers.ts
@@ -1,4 +1,4 @@
-import { AccountToken } from '../../../shared/daemon-rpc-types';
+import { AccountToken, IDevice } from '../../../shared/daemon-rpc-types';
 import { ReduxAction } from '../store';
 
 type LoginMethod = 'existing_account' | 'new_account';
@@ -9,6 +9,7 @@ export type LoginState =
 export interface IAccountReduxState {
   accountToken?: AccountToken;
   deviceName?: string;
+  devices: Array<IDevice>;
   accountHistory?: AccountToken;
   expiry?: string; // ISO8601
   status: LoginState;
@@ -17,6 +18,7 @@ export interface IAccountReduxState {
 const initialState: IAccountReduxState = {
   accountToken: undefined,
   deviceName: undefined,
+  devices: [],
   accountHistory: undefined,
   expiry: undefined,
   status: { type: 'none' },
@@ -83,6 +85,7 @@ export default function (
       };
     case 'ACCOUNT_SETUP_FINISHED':
       return {
+        ...state,
         status: { type: 'ok', method: 'existing_account' },
       };
     case 'UPDATE_ACCOUNT_TOKEN':
@@ -100,6 +103,11 @@ export default function (
         ...state,
         expiry: action.expiry,
       };
+    case 'UPDATE_DEVICES':
+      return {
+        ...state,
+        devices: action.devices,
+      };
   }
 
   return state;