Update history calls to accomodate transition in state

10 files changed, 20 insertions, 19 deletions

diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index fc6a32aa87..ae7cdec881 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -182,9 +182,7 @@ export default class AppRenderer {
       this.reduxActions.userInterface.setMacOsScrollbarVisibility(visibility);
     });
 
-    IpcRendererEventChannel.navigation.listenReset(() =>
-      this.history.dismiss(true, transitions.none),
-    );
+    IpcRendererEventChannel.navigation.listenReset(() => this.history.pop(true));
 
     // Request the initial state from the main process
     const initialState = IpcRendererEventChannel.state.get();
@@ -342,7 +340,7 @@ export default class AppRenderer {
           actions.account.loginTooManyDevices(error);
           this.loginState = 'too many devices';
 
-          this.history.reset(RoutePath.tooManyDevices, transitions.push);
+          this.history.reset(RoutePath.tooManyDevices, { transition: transitions.push });
         } catch (e) {
           const error = e as Error;
           log.error('Failed to fetch device list');
@@ -362,7 +360,7 @@ export default class AppRenderer {
 
   public logout = async (transition = transitions.dismiss) => {
     try {
-      this.history.reset(RoutePath.login, transition);
+      this.history.reset(RoutePath.login, { transition });
       await IpcRendererEventChannel.account.logout();
     } catch (e) {
       const error = e as Error;
@@ -651,7 +649,7 @@ export default class AppRenderer {
 
         const transition =
           navigationTransitions[nextPath]?.[pathname] ?? navigationTransitions[nextPath]?.['*'];
-        this.history.reset(nextPath, transition);
+        this.history.reset(nextPath, { transition });
       }
     }
   }
diff --git a/gui/src/renderer/components/Connect.tsx b/gui/src/renderer/components/Connect.tsx
index 10ee3f209d..492fcc3fc9 100644
--- a/gui/src/renderer/components/Connect.tsx
+++ b/gui/src/renderer/components/Connect.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { messages, relayLocations } from '../../shared/gettext';
 import log from '../../shared/logging';
 import { useAppContext } from '../context';
-import { useHistory } from '../lib/history';
+import { transitions, useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
 import { IRelayLocationRedux, RelaySettingsRedux } from '../redux/settings/reducers';
 import { useSelector } from '../redux/store';
@@ -133,8 +133,8 @@ export default function Connect() {
   }, [mapCenter, showMarkerOrSpinner, markerStyle, zoomLevel]);
 
   const onSelectLocation = useCallback(() => {
-    history.show(RoutePath.selectLocation);
-  }, [history.show]);
+    history.push(RoutePath.selectLocation, { transition: transitions.show });
+  }, [history.push]);
 
   const selectedRelayName = useMemo(() => getRelayName(relaySettings, relayLocations), [
     relaySettings,
diff --git a/gui/src/renderer/components/ExpiredAccountAddTime.tsx b/gui/src/renderer/components/ExpiredAccountAddTime.tsx
index 54d27f75d8..57a3856dce 100644
--- a/gui/src/renderer/components/ExpiredAccountAddTime.tsx
+++ b/gui/src/renderer/components/ExpiredAccountAddTime.tsx
@@ -280,7 +280,7 @@ function useFinishedCallback() {
       accountSetupFinished();
     }
 
-    history.reset(RoutePath.main, transitions.push);
+    history.reset(RoutePath.main, { transition: transitions.push });
   }, [isNewAccount, accountSetupFinished, history]);
 
   return callback;
diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index 8a9ea40a9d..3cf96df6fc 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { colors } from '../../config.json';
 import { TunnelState } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
-import { useHistory } from '../lib/history';
+import { transitions, useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
 import { IReduxState } from '../redux/store';
 import { FocusFallback } from './Focus';
@@ -101,7 +101,7 @@ export function HeaderBarSettingsButton(props: IHeaderBarSettingsButtonProps) {
 
   const openSettings = useCallback(() => {
     if (!props.disabled) {
-      history.show(RoutePath.settings);
+      history.push(RoutePath.settings, { transition: transitions.show });
     }
   }, [history, props.disabled]);
 
diff --git a/gui/src/renderer/components/KeyboardNavigation.tsx b/gui/src/renderer/components/KeyboardNavigation.tsx
index 9f657fb54b..8e8bae5faf 100644
--- a/gui/src/renderer/components/KeyboardNavigation.tsx
+++ b/gui/src/renderer/components/KeyboardNavigation.tsx
@@ -20,14 +20,14 @@ export default function KeyboardNavigation(props: IKeyboardNavigationProps) {
         const path = location.pathname as RoutePath;
         if (!disableDismissForRoutes.includes(path)) {
           if (event.shiftKey) {
-            history.dismiss(true);
+            history.pop(true);
           } else {
             backAction?.action();
           }
         }
       }
     },
-    [history.dismiss, backAction, location.pathname],
+    [history.pop, backAction, location.pathname],
   );
 
   useEffect(() => {
diff --git a/gui/src/renderer/components/Settings.tsx b/gui/src/renderer/components/Settings.tsx
index 14b0fb44d5..76b4d6b4fd 100644
--- a/gui/src/renderer/components/Settings.tsx
+++ b/gui/src/renderer/components/Settings.tsx
@@ -38,7 +38,7 @@ export default function Support() {
   const showSubSettings = loginState.type === 'ok' && connectedToDaemon;
 
   return (
-    <BackAction icon="close" action={history.dismiss}>
+    <BackAction icon="close" action={history.pop}>
       <Layout>
         <SettingsContainer>
           <NavigationContainer>
diff --git a/gui/src/renderer/components/TooManyDevices.tsx b/gui/src/renderer/components/TooManyDevices.tsx
index b23fe3f2df..23ff399edb 100644
--- a/gui/src/renderer/components/TooManyDevices.tsx
+++ b/gui/src/renderer/components/TooManyDevices.tsx
@@ -93,11 +93,11 @@ export default function TooManyDevices() {
 
   const continueLogin = useCallback(() => {
     void login(accountToken);
-    history.reset(RoutePath.login, transitions.pop);
+    history.reset(RoutePath.login, { transition: transitions.pop });
   }, [login, accountToken]);
   const cancel = useCallback(() => {
     cancelLogin();
-    history.reset(RoutePath.login, transitions.pop);
+    history.reset(RoutePath.login, { transition: transitions.pop });
   }, [history.reset, cancelLogin]);
 
   const iconSource = getIconSource(devices);
diff --git a/gui/src/renderer/components/select-location/SelectLocation.tsx b/gui/src/renderer/components/select-location/SelectLocation.tsx
index c26dacdd33..9e9c60b7a5 100644
--- a/gui/src/renderer/components/select-location/SelectLocation.tsx
+++ b/gui/src/renderer/components/select-location/SelectLocation.tsx
@@ -71,7 +71,7 @@ export default function SelectLocation() {
 
   const [searchValue, setSearchValue] = useState('');
 
-  const onClose = useCallback(() => history.dismiss(), [history]);
+  const onClose = useCallback(() => history.pop(), [history]);
   const onViewFilter = useCallback(() => history.push(RoutePath.filter), [history]);
 
   const tunnelProtocol = relaySettings?.tunnelProtocol ?? 'any';
diff --git a/gui/src/renderer/components/select-location/select-location-hooks.ts b/gui/src/renderer/components/select-location/select-location-hooks.ts
index a1d54b435d..0cefdecb4f 100644
--- a/gui/src/renderer/components/select-location/select-location-hooks.ts
+++ b/gui/src/renderer/components/select-location/select-location-hooks.ts
@@ -27,7 +27,7 @@ export function useOnSelectExitLocation() {
         throw new Error('relayLocation should never be undefiend');
       }
 
-      history.dismiss();
+      history.pop();
       const relayUpdate = RelaySettingsBuilder.normal()
         .location.fromRaw(relayLocation.value)
         .build();
diff --git a/gui/src/shared/ipc-types.ts b/gui/src/shared/ipc-types.ts
index 81ca28b1ac..c186c9ac83 100644
--- a/gui/src/shared/ipc-types.ts
+++ b/gui/src/shared/ipc-types.ts
@@ -1,5 +1,7 @@
 import { Action, Location } from 'history';
 
+import { ITransitionSpecification } from '../renderer/lib/history';
+
 export interface ICurrentAppVersionInfo {
   gui: string;
   daemon?: string;
@@ -16,6 +18,7 @@ export type IChangelog = Array<string>;
 export interface LocationState {
   scrollPosition: [number, number];
   expandedSections: Record<string, boolean>;
+  transition: ITransitionSpecification;
 }
 
 export interface IHistoryObject {