diff options
16 files changed, 56 insertions, 58 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'; diff --git a/gui/src/renderer/containers/AccountPage.tsx b/gui/src/renderer/containers/AccountPage.tsx index accd4287b2..985161c838 100644 --- a/gui/src/renderer/containers/AccountPage.tsx +++ b/gui/src/renderer/containers/AccountPage.tsx @@ -1,10 +1,10 @@ import { connect } from 'react-redux'; -import { RouteComponentProps, withRouter } from 'react-router'; import { links } from '../../config.json'; import consumePromise from '../../shared/promise'; import Account from '../components/Account'; import withAppContext, { IAppContext } from '../context'; +import { IHistoryProps, withHistory } from '../lib/history'; import { IReduxState, ReduxDispatch } from '../redux/store'; const mapStateToProps = (state: IReduxState) => ({ @@ -13,16 +13,16 @@ const mapStateToProps = (state: IReduxState) => ({ expiryLocale: state.userInterface.locale, isOffline: state.connection.isBlocked, }); -const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => { +const mapDispatchToProps = (_dispatch: ReduxDispatch, props: IHistoryProps & IAppContext) => { return { onLogout: () => { consumePromise(props.app.logout()); }, onClose: () => { - props.history.goBack(); + props.history.pop(); }, onBuyMore: () => props.app.openLinkWithAuth(links.purchase), }; }; -export default withAppContext(withRouter(connect(mapStateToProps, mapDispatchToProps)(Account))); +export default withAppContext(withHistory(connect(mapStateToProps, mapDispatchToProps)(Account))); diff --git a/gui/src/renderer/containers/AdvancedSettingsPage.tsx b/gui/src/renderer/containers/AdvancedSettingsPage.tsx index 0aaa4ee3f4..a9e603718b 100644 --- a/gui/src/renderer/containers/AdvancedSettingsPage.tsx +++ b/gui/src/renderer/containers/AdvancedSettingsPage.tsx @@ -1,5 +1,4 @@ import { connect } from 'react-redux'; -import { RouteComponentProps, withRouter } from 'react-router'; import { BridgeState, IDnsOptions, @@ -11,6 +10,7 @@ import RelaySettingsBuilder from '../../shared/relay-settings-builder'; import AdvancedSettings from '../components/AdvancedSettings'; import withAppContext, { IAppContext } from '../context'; +import { IHistoryProps, withHistory } from '../lib/history'; import { RelaySettingsRedux } from '../redux/settings/reducers'; import { IReduxState, ReduxDispatch } from '../redux/store'; @@ -56,10 +56,10 @@ const mapRelaySettingsToProtocolAndPort = (relaySettings: RelaySettingsRedux) => } }; -const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => { +const mapDispatchToProps = (_dispatch: ReduxDispatch, props: IHistoryProps & IAppContext) => { return { onClose: () => { - props.history.goBack(); + props.history.pop(); }, setOpenVpnRelayProtocolAndPort: async (protocol?: RelayProtocol, port?: number) => { const relayUpdate = RelaySettingsBuilder.normal() @@ -169,5 +169,5 @@ const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps }; export default withAppContext( - withRouter(connect(mapStateToProps, mapDispatchToProps)(AdvancedSettings)), + withHistory(connect(mapStateToProps, mapDispatchToProps)(AdvancedSettings)), ); diff --git a/gui/src/renderer/containers/ConnectPage.tsx b/gui/src/renderer/containers/ConnectPage.tsx index 99882bf8b1..d7197095f1 100644 --- a/gui/src/renderer/containers/ConnectPage.tsx +++ b/gui/src/renderer/containers/ConnectPage.tsx @@ -1,10 +1,10 @@ import { connect } from 'react-redux'; -import { RouteComponentProps, withRouter } from 'react-router'; import { sprintf } from 'sprintf-js'; import { messages } from '../../shared/gettext'; import log from '../../shared/logging'; import Connect from '../components/Connect'; import withAppContext, { IAppContext } from '../context'; +import { IHistoryProps, withHistory } from '../lib/history'; import { IRelayLocationRedux, RelaySettingsRedux } from '../redux/settings/reducers'; import { IReduxState, ReduxDispatch } from '../redux/store'; @@ -71,10 +71,10 @@ const mapStateToProps = (state: IReduxState) => { }; }; -const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => { +const mapDispatchToProps = (_dispatch: ReduxDispatch, props: IHistoryProps & IAppContext) => { return { onSelectLocation: () => { - props.history.push('/select-location'); + props.history.show('/select-location'); }, onConnect: async () => { try { @@ -100,4 +100,4 @@ const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps }; }; -export default withAppContext(withRouter(connect(mapStateToProps, mapDispatchToProps)(Connect))); +export default withAppContext(withHistory(connect(mapStateToProps, mapDispatchToProps)(Connect))); diff --git a/gui/src/renderer/containers/ExpiredAccountErrorViewContainer.tsx b/gui/src/renderer/containers/ExpiredAccountErrorViewContainer.tsx index 6297a17f42..372f9607c9 100644 --- a/gui/src/renderer/containers/ExpiredAccountErrorViewContainer.tsx +++ b/gui/src/renderer/containers/ExpiredAccountErrorViewContainer.tsx @@ -1,7 +1,7 @@ import { connect } from 'react-redux'; -import { RouteComponentProps, withRouter } from 'react-router'; import log from '../../shared/logging'; import ExpiredAccountErrorView from '../components/ExpiredAccountErrorView'; +import { IHistoryProps, withHistory } from '../lib/history'; import withAppContext, { IAppContext } from '../context'; import { IReduxState, ReduxDispatch } from '../redux/store'; @@ -13,7 +13,7 @@ const mapStateToProps = (state: IReduxState) => ({ isBlocked: state.connection.isBlocked, blockWhenDisconnected: state.settings.blockWhenDisconnected, }); -const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => { +const mapDispatchToProps = (_dispatch: ReduxDispatch, props: IHistoryProps & IAppContext) => { return { onExternalLinkWithAuth: (url: string) => props.app.openLinkWithAuth(url), onDisconnect: async () => { @@ -37,5 +37,5 @@ const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps }; export default withAppContext( - withRouter(connect(mapStateToProps, mapDispatchToProps)(ExpiredAccountErrorView)), + withHistory(connect(mapStateToProps, mapDispatchToProps)(ExpiredAccountErrorView)), ); diff --git a/gui/src/renderer/containers/PreferencesPage.tsx b/gui/src/renderer/containers/PreferencesPage.tsx index 3bd4a20e44..671ba33c26 100644 --- a/gui/src/renderer/containers/PreferencesPage.tsx +++ b/gui/src/renderer/containers/PreferencesPage.tsx @@ -1,10 +1,10 @@ import { connect } from 'react-redux'; -import { RouteComponentProps, withRouter } from 'react-router'; import { IDnsOptions } from '../../shared/daemon-rpc-types'; import log from '../../shared/logging'; import consumePromise from '../../shared/promise'; import Preferences from '../components/Preferences'; import withAppContext, { IAppContext } from '../context'; +import { IHistoryProps, withHistory } from '../lib/history'; import { IReduxState, ReduxDispatch } from '../redux/store'; const mapStateToProps = (state: IReduxState) => ({ @@ -20,10 +20,10 @@ const mapStateToProps = (state: IReduxState) => ({ dns: state.settings.dns, }); -const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => { +const mapDispatchToProps = (_dispatch: ReduxDispatch, props: IHistoryProps & IAppContext) => { return { onClose: () => { - props.history.goBack(); + props.history.pop(); }, setEnableSystemNotifications: (flag: boolean) => { props.app.setEnableSystemNotifications(flag); @@ -60,5 +60,5 @@ const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps }; export default withAppContext( - withRouter(connect(mapStateToProps, mapDispatchToProps)(Preferences)), + withHistory(connect(mapStateToProps, mapDispatchToProps)(Preferences)), ); diff --git a/gui/src/renderer/containers/SelectLanguagePage.tsx b/gui/src/renderer/containers/SelectLanguagePage.tsx index 5c073c22e1..1bd21c84dd 100644 --- a/gui/src/renderer/containers/SelectLanguagePage.tsx +++ b/gui/src/renderer/containers/SelectLanguagePage.tsx @@ -1,26 +1,26 @@ import { connect } from 'react-redux'; -import { RouteComponentProps, withRouter } from 'react-router'; import SelectLanguage from '../components/SelectLanguage'; import withAppContext, { IAppContext } from '../context'; +import { IHistoryProps, withHistory } from '../lib/history'; import { IReduxState, ReduxDispatch } from '../redux/store'; const mapStateToProps = (state: IReduxState) => ({ preferredLocale: state.settings.guiSettings.preferredLocale, }); -const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => { +const mapDispatchToProps = (_dispatch: ReduxDispatch, props: IHistoryProps & IAppContext) => { return { preferredLocalesList: props.app.getPreferredLocaleList(), async setPreferredLocale(locale: string) { await props.app.setPreferredLocale(locale); - props.history.goBack(); + props.history.pop(); }, onClose() { - props.history.goBack(); + props.history.pop(); }, }; }; export default withAppContext( - withRouter(connect(mapStateToProps, mapDispatchToProps)(SelectLanguage)), + withHistory(connect(mapStateToProps, mapDispatchToProps)(SelectLanguage)), ); diff --git a/gui/src/renderer/containers/SelectLocationPage.tsx b/gui/src/renderer/containers/SelectLocationPage.tsx index fbad19285b..b3aab7eb69 100644 --- a/gui/src/renderer/containers/SelectLocationPage.tsx +++ b/gui/src/renderer/containers/SelectLocationPage.tsx @@ -1,5 +1,4 @@ import { connect } from 'react-redux'; -import { RouteComponentProps, withRouter } from 'react-router'; import { bindActionCreators } from 'redux'; import BridgeSettingsBuilder from '../../shared/bridge-settings-builder'; import { LiftedConstraint, RelayLocation } from '../../shared/daemon-rpc-types'; @@ -7,6 +6,7 @@ import log from '../../shared/logging'; import RelaySettingsBuilder from '../../shared/relay-settings-builder'; import SelectLocation from '../components/SelectLocation'; import withAppContext, { IAppContext } from '../context'; +import { IHistoryProps, withHistory } from '../lib/history'; import { IReduxState, ReduxDispatch } from '../redux/store'; import userInterfaceActions from '../redux/userinterface/actions'; import { LocationScope } from '../redux/userinterface/reducers'; @@ -40,17 +40,17 @@ const mapStateToProps = (state: IReduxState) => { allowBridgeSelection, }; }; -const mapDispatchToProps = (dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => { +const mapDispatchToProps = (dispatch: ReduxDispatch, props: IHistoryProps & IAppContext) => { const userInterface = bindActionCreators(userInterfaceActions, dispatch); return { - onClose: () => props.history.goBack(), + onClose: () => props.history.dismiss(), onChangeLocationScope: (scope: LocationScope) => { userInterface.setLocationScope(scope); }, onSelectExitLocation: async (relayLocation: RelayLocation) => { // dismiss the view first - props.history.goBack(); + props.history.dismiss(); try { const relayUpdate = RelaySettingsBuilder.normal().location.fromRaw(relayLocation).build(); @@ -63,7 +63,7 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: RouteComponentProps }, onSelectBridgeLocation: async (bridgeLocation: RelayLocation) => { // dismiss the view first - props.history.goBack(); + props.history.dismiss(); try { await props.app.updateBridgeSettings( @@ -75,7 +75,7 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: RouteComponentProps }, onSelectClosestToExit: async () => { // dismiss the view first - props.history.goBack(); + props.history.dismiss(); try { await props.app.updateBridgeSettings(new BridgeSettingsBuilder().location.any().build()); @@ -87,5 +87,5 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: RouteComponentProps }; export default withAppContext( - withRouter(connect(mapStateToProps, mapDispatchToProps)(SelectLocation)), + withHistory(connect(mapStateToProps, mapDispatchToProps)(SelectLocation)), ); diff --git a/gui/src/renderer/containers/SettingsPage.tsx b/gui/src/renderer/containers/SettingsPage.tsx index 6985fd927c..97ff917e7e 100644 --- a/gui/src/renderer/containers/SettingsPage.tsx +++ b/gui/src/renderer/containers/SettingsPage.tsx @@ -1,7 +1,7 @@ import { connect } from 'react-redux'; -import { RouteComponentProps, withRouter } from 'react-router'; import Settings from '../components/Settings'; import withAppContext, { IAppContext } from '../context'; +import { IHistoryProps, withHistory } from '../lib/history'; import { IReduxState, ReduxDispatch } from '../redux/store'; const mapStateToProps = (state: IReduxState, props: IAppContext) => ({ @@ -16,10 +16,10 @@ const mapStateToProps = (state: IReduxState, props: IAppContext) => ({ suggestedIsBeta: state.version.suggestedIsBeta ?? false, isOffline: state.connection.isBlocked, }); -const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => { +const mapDispatchToProps = (_dispatch: ReduxDispatch, props: IHistoryProps & IAppContext) => { return { onQuit: () => props.app.quit(), - onClose: () => props.history.goBack(), + onClose: () => props.history.dismiss(), onViewSelectLanguage: () => props.history.push('/settings/language'), onViewAccount: () => props.history.push('/settings/account'), onViewSupport: () => props.history.push('/settings/support'), @@ -29,4 +29,4 @@ const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps }; }; -export default withAppContext(withRouter(connect(mapStateToProps, mapDispatchToProps)(Settings))); +export default withAppContext(withHistory(connect(mapStateToProps, mapDispatchToProps)(Settings))); diff --git a/gui/src/renderer/containers/SupportPage.tsx b/gui/src/renderer/containers/SupportPage.tsx index 1df4827223..a4bdbd4ac3 100644 --- a/gui/src/renderer/containers/SupportPage.tsx +++ b/gui/src/renderer/containers/SupportPage.tsx @@ -1,9 +1,9 @@ import { connect } from 'react-redux'; -import { RouteComponentProps, withRouter } from 'react-router'; import { bindActionCreators } from 'redux'; import consumePromise from '../../shared/promise'; import Support from '../components/Support'; import withAppContext, { IAppContext } from '../context'; +import { IHistoryProps, withHistory } from '../lib/history'; import { IReduxState, ReduxDispatch } from '../redux/store'; import supportActions from '../redux/support/actions'; @@ -16,12 +16,12 @@ const mapStateToProps = (state: IReduxState) => ({ suggestedIsBeta: state.version.suggestedIsBeta ?? false, }); -const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext & RouteComponentProps) => { +const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext & IHistoryProps) => { const { saveReportForm, clearReportForm } = bindActionCreators(supportActions, dispatch); return { onClose() { - props.history.goBack(); + props.history.pop(); }, viewLog(id: string) { consumePromise(props.app.viewLog(id)); @@ -34,4 +34,4 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext & RouteC }; }; -export default withAppContext(withRouter(connect(mapStateToProps, mapDispatchToProps)(Support))); +export default withAppContext(withHistory(connect(mapStateToProps, mapDispatchToProps)(Support))); diff --git a/gui/src/renderer/containers/WireguardKeysPage.tsx b/gui/src/renderer/containers/WireguardKeysPage.tsx index e07e4718f2..b0c25e06a9 100644 --- a/gui/src/renderer/containers/WireguardKeysPage.tsx +++ b/gui/src/renderer/containers/WireguardKeysPage.tsx @@ -1,8 +1,8 @@ import { connect } from 'react-redux'; -import { RouteComponentProps, withRouter } from 'react-router'; import { links } from '../../config.json'; import WireguardKeys from '../components/WireguardKeys'; import withAppContext, { IAppContext } from '../context'; +import { IHistoryProps, withHistory } from '../lib/history'; import { IWgKey } from '../redux/settings/reducers'; import { IReduxState, ReduxDispatch } from '../redux/store'; @@ -12,9 +12,9 @@ const mapStateToProps = (state: IReduxState) => ({ tunnelState: state.connection.status, windowFocused: state.userInterface.windowFocused, }); -const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => { +const mapDispatchToProps = (_dispatch: ReduxDispatch, props: IHistoryProps & IAppContext) => { return { - onClose: () => props.history.goBack(), + onClose: () => props.history.pop(), onGenerateKey: () => props.app.generateWireguardKey(), onReplaceKey: (oldKey: IWgKey) => props.app.replaceWireguardKey(oldKey), onVerifyKey: (publicKey: IWgKey) => props.app.verifyWireguardKey(publicKey), @@ -23,5 +23,5 @@ const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps }; export default withAppContext( - withRouter(connect(mapStateToProps, mapDispatchToProps)(WireguardKeys)), + withHistory(connect(mapStateToProps, mapDispatchToProps)(WireguardKeys)), ); |