Handle error when failing to fetch devices

2 files changed, 14 insertions, 7 deletions

diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index d4672066f2..d6911da317 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -299,9 +299,18 @@ export default class AppRenderer {
     } catch (e) {
       const error = e as Error;
       if (error.message === 'Too many devices') {
-        actions.account.loginTooManyDevices(error);
-        this.loginState = 'too many devices';
-        this.history.reset(RoutePath.tooManyDevices, transitions.push);
+        try {
+          await this.fetchDevices(accountToken);
+
+          actions.account.loginTooManyDevices(error);
+          this.loginState = 'too many devices';
+
+          this.history.reset(RoutePath.tooManyDevices, transitions.push);
+        } catch (e) {
+          const error = e as Error;
+          log.error('Failed to fetch device list');
+          actions.account.loginFailed(error);
+        }
       } else {
         actions.account.loginFailed(error);
       }
diff --git a/gui/src/renderer/components/TooManyDevices.tsx b/gui/src/renderer/components/TooManyDevices.tsx
index 7cb67bf040..3823cc6f5d 100644
--- a/gui/src/renderer/components/TooManyDevices.tsx
+++ b/gui/src/renderer/components/TooManyDevices.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
@@ -99,7 +99,7 @@ const StyledRemoveSpinner = styled(ImageView)({
 
 export default function TooManyDevices() {
   const history = useHistory();
-  const { fetchDevices, removeDevice, login, cancelLogin } = useAppContext();
+  const { removeDevice, login, cancelLogin } = useAppContext();
   const accountToken = useSelector((state) => state.account.accountToken)!;
   const devices = useSelector((state) => state.account.devices);
 
@@ -116,8 +116,6 @@ export default function TooManyDevices() {
     history.reset(RoutePath.login, transitions.pop);
   }, [history.reset, cancelLogin]);
 
-  useEffect(() => void fetchDevices(accountToken), []);
-
   const iconSource = getIconSource(devices);
   const title = getTitle(devices);
   const subtitle = getSubtitle(devices);