Add correct transitions for too many devices view

2 files changed, 21 insertions, 19 deletions

diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index 33fd540a20..eb6ccb1a11 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -279,7 +279,7 @@ export default class AppRenderer {
       if (error.message === 'Too many devices') {
         actions.account.loginTooManyDevices(error);
         this.loginState = 'too many devices';
-        this.history.push(RoutePath.tooManyDevices);
+        this.history.reset(RoutePath.tooManyDevices, transitions.push);
       } else {
         actions.account.loginFailed(error);
       }
@@ -638,36 +638,37 @@ export default class AppRenderer {
 
   private resetNavigation() {
     if (this.history) {
-      const pathname = this.history.location.pathname;
+      const pathname = this.history.location.pathname as RoutePath;
       const nextPath = this.getNavigationBase(
         this.connectedToDaemon,
         this.deviceConfig?.accountToken,
-      );
+      ) as RoutePath;
 
       // First level contains the possible next locations and the second level contains the possible
       // current locations.
-      const navigationTransitions: {
-        [from: string]: { [to: string]: ITransitionSpecification };
-      } = {
-        '/': {
-          '/login': transitions.pop,
-          '/main': transitions.pop,
+      const navigationTransitions: Partial<
+        Record<RoutePath, Partial<Record<RoutePath | '*', ITransitionSpecification>>>
+      > = {
+        [RoutePath.launch]: {
+          [RoutePath.login]: transitions.pop,
+          [RoutePath.main]: transitions.pop,
           '*': transitions.dismiss,
         },
-        '/login': {
-          '/': transitions.push,
-          '/main': transitions.pop,
+        [RoutePath.login]: {
+          [RoutePath.launch]: transitions.push,
+          [RoutePath.main]: transitions.pop,
           '*': transitions.none,
         },
-        '/main': {
-          '/': transitions.push,
-          '/login': transitions.push,
+        [RoutePath.main]: {
+          [RoutePath.launch]: transitions.push,
+          [RoutePath.login]: transitions.push,
+          [RoutePath.tooManyDevices]: transitions.push,
           '*': transitions.dismiss,
         },
       };
 
       const transition =
-        navigationTransitions[nextPath][pathname] ?? navigationTransitions[nextPath]['*'];
+        navigationTransitions[nextPath]?.[pathname] ?? navigationTransitions[nextPath]?.['*'];
       this.history.reset(nextPath, transition);
     }
   }
diff --git a/gui/src/renderer/components/TooManyDevices.tsx b/gui/src/renderer/components/TooManyDevices.tsx
index 1075071cdd..7b434468c7 100644
--- a/gui/src/renderer/components/TooManyDevices.tsx
+++ b/gui/src/renderer/components/TooManyDevices.tsx
@@ -5,7 +5,8 @@ import { colors } from '../../config.json';
 import { IDevice } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
-import { useHistory } from '../lib/history';
+import { transitions, useHistory } from '../lib/history';
+import { RoutePath } from '../lib/routes';
 import { useBoolean } from '../lib/utilityHooks';
 import { useSelector } from '../redux/store';
 import * as AppButton from './AppButton';
@@ -109,8 +110,8 @@ export default function TooManyDevices() {
   const continueLogin = useCallback(() => login(accountToken), [login, accountToken]);
   const cancel = useCallback(() => {
     cancelLogin();
-    history.pop();
-  }, [history.pop, cancelLogin]);
+    history.reset(RoutePath.login, transitions.pop);
+  }, [history.reset, cancelLogin]);
 
   useEffect(() => void fetchDevices(), []);