Adjust all uses of history to use the new methods

6 files changed, 13 insertions, 15 deletions

diff --git a/gui/src/renderer/components/ExpiredAccountAddTime.tsx b/gui/src/renderer/components/ExpiredAccountAddTime.tsx
index a9b83af6a6..24c335a551 100644
--- a/gui/src/renderer/components/ExpiredAccountAddTime.tsx
+++ b/gui/src/renderer/components/ExpiredAccountAddTime.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback } from 'react';
 import { useSelector } from 'react-redux';
-import { useHistory } from 'react-router';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 import { links, colors } from '../../config.json';
@@ -8,7 +7,7 @@ import { formatRelativeDate } from '../../shared/date-helper';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import useActions from '../lib/actionsHook';
-import History from '../lib/history';
+import { transitions, useHistory } from '../lib/history';
 import account from '../redux/account/actions';
 import { IReduxState } from '../redux/store';
 import * as AppButton from './AppButton';
@@ -87,7 +86,7 @@ export function VoucherInput() {
   }, [history]);
 
   const navigateBack = useCallback(() => {
-    history.goBack();
+    history.pop();
   }, [history]);
 
   return (
@@ -252,7 +251,7 @@ function HeaderBar() {
 function useFinishedCallback() {
   const { loggedIn } = useActions(account);
 
-  const history = useHistory() as History;
+  const history = useHistory();
   const isNewAccount = useSelector(
     (state: IReduxState) =>
       state.account.status.type === 'ok' && state.account.status.method === 'new_account',
@@ -264,7 +263,7 @@ function useFinishedCallback() {
       loggedIn();
     }
 
-    history.resetWith('/main');
+    history.reset('/main', undefined, transitions.push);
   }, [isNewAccount, loggedIn, history]);
 
   return callback;
diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index b89811913e..9f6d4b82a3 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react';
 import { useSelector } from 'react-redux';
-import { useHistory } from 'react-router';
 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 { IReduxState } from '../redux/store';
 import { FocusFallback } from './Focus';
 import ImageView from './ImageView';
@@ -103,7 +103,7 @@ export function HeaderBarSettingsButton() {
   const history = useHistory();
 
   const openSettings = useCallback(() => {
-    history.push('/settings');
+    history.show('/settings');
   }, [history]);
 
   return (
diff --git a/gui/src/renderer/components/KeyboardNavigation.tsx b/gui/src/renderer/components/KeyboardNavigation.tsx
index 3aefd7c684..94b5097389 100644
--- a/gui/src/renderer/components/KeyboardNavigation.tsx
+++ b/gui/src/renderer/components/KeyboardNavigation.tsx
@@ -1,18 +1,17 @@
 import React, { useCallback, useEffect } from 'react';
-import { useHistory } from 'react-router';
-import History from '../lib/history';
+import { useHistory } from '../lib/history';
 
 interface IKeyboardNavigationProps {
   children: React.ReactElement;
 }
 
 export default function KeyboardNavigation(props: IKeyboardNavigationProps) {
-  const history = useHistory() as History;
+  const history = useHistory();
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
-        history.reset();
+        history.dismiss(true);
       }
     },
     [history.reset],
diff --git a/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx b/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx
index cb7c497011..fea2fe23db 100644
--- a/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx
+++ b/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx
@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { useHistory } from 'react-router';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 import { colors } from '../../config.json';
@@ -21,6 +20,7 @@ import {
   TitleBarItem,
 } from './NavigationBar';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
+import { useHistory } from '../lib/history';
 
 const StyledPageCover = styled.div({}, (props: { show: boolean }) => ({
   position: 'absolute',
@@ -154,7 +154,7 @@ export default function LinuxSplitTunnelingSettings() {
             <NavigationContainer>
               <NavigationBar>
                 <NavigationItems>
-                  <BackBarItem action={history.goBack}>
+                  <BackBarItem action={history.pop}>
                     {
                       // TRANSLATORS: Back button in navigation bar
                       messages.pgettext('navigation-bar', 'Advanced')
diff --git a/gui/src/renderer/components/MainView.tsx b/gui/src/renderer/components/MainView.tsx
index 9698321940..3891a6e48b 100644
--- a/gui/src/renderer/components/MainView.tsx
+++ b/gui/src/renderer/components/MainView.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useHistory } from 'react-router';
 import { hasExpired } from '../../shared/account-expiry';
 import { IReduxState } from '../redux/store';
 import ConnectPage from '../containers/ConnectPage';
 import ExpiredAccountErrorViewContainer from '../containers/ExpiredAccountErrorViewContainer';
+import { useHistory } from '../lib/history';
 
 export default function MainView() {
   const history = useHistory();
diff --git a/gui/src/renderer/components/NavigationBar.tsx b/gui/src/renderer/components/NavigationBar.tsx
index 746fc6faa4..f9674e1131 100644
--- a/gui/src/renderer/components/NavigationBar.tsx
+++ b/gui/src/renderer/components/NavigationBar.tsx
@@ -1,9 +1,9 @@
 import React, { useCallback, useContext, useLayoutEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useHistory } from 'react-router';
 import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import useActions from '../lib/actionsHook';
+import { useHistory } from '../lib/history';
 import { useCombinedRefs } from '../lib/utilityHooks';
 import { IReduxState } from '../redux/store';
 import userInterface from '../redux/userinterface/actions';