diff options
13 files changed, 64 insertions, 59 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/app.tsx b/desktop/packages/mullvad-vpn/src/renderer/app.tsx index 81ae105f14..114c1dd01e 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/app.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/app.tsx @@ -47,7 +47,7 @@ import MacOsScrollbarDetection from './components/MacOsScrollbarDetection'; import { ModalContainer } from './components/Modal'; import { AppContext } from './context'; import { Theme } from './lib/components'; -import History, { ITransitionSpecification, transitions } from './lib/history'; +import History, { TransitionType } from './lib/history'; import { loadTranslations } from './lib/load-translations'; import IpcOutput from './lib/logging'; import { RoutePath } from './lib/routes'; @@ -409,7 +409,7 @@ export default class AppRenderer { actions.account.loginTooManyDevices(); this.loginState = 'too many devices'; - this.history.reset(RoutePath.tooManyDevices, { transition: transitions.push }); + this.history.reset(RoutePath.tooManyDevices, { transition: TransitionType.push }); } catch { log.error('Failed to fetch device list'); actions.account.loginFailed('list-devices'); @@ -426,7 +426,7 @@ export default class AppRenderer { this.loginState = 'none'; }; - public logout = async (transition = transitions.dismiss) => { + public logout = async (transition = TransitionType.dismiss) => { try { this.history.reset(RoutePath.login, { transition }); await IpcRendererEventChannel.account.logout(); @@ -437,7 +437,7 @@ export default class AppRenderer { }; public leaveRevokedDevice = async () => { - await this.logout(transitions.pop); + await this.logout(TransitionType.pop); await this.disconnectTunnel(); }; @@ -718,38 +718,38 @@ export default class AppRenderer { // First level contains the possible next locations and the second level contains the // possible current locations. const navigationTransitions: Partial< - Record<RoutePath, Partial<Record<RoutePath | '*', ITransitionSpecification>>> + Record<RoutePath, Partial<Record<RoutePath | '*', TransitionType>>> > = { [RoutePath.launch]: { - [RoutePath.login]: transitions.pop, - [RoutePath.main]: transitions.pop, - '*': transitions.dismiss, + [RoutePath.login]: TransitionType.pop, + [RoutePath.main]: TransitionType.pop, + '*': TransitionType.dismiss, }, [RoutePath.login]: { - [RoutePath.launch]: transitions.push, - [RoutePath.main]: transitions.pop, - [RoutePath.deviceRevoked]: transitions.pop, - '*': transitions.dismiss, + [RoutePath.launch]: TransitionType.push, + [RoutePath.main]: TransitionType.pop, + [RoutePath.deviceRevoked]: TransitionType.pop, + '*': TransitionType.dismiss, }, [RoutePath.main]: { - [RoutePath.launch]: transitions.push, - [RoutePath.login]: transitions.push, - [RoutePath.tooManyDevices]: transitions.push, - '*': transitions.dismiss, + [RoutePath.launch]: TransitionType.push, + [RoutePath.login]: TransitionType.push, + [RoutePath.tooManyDevices]: TransitionType.push, + '*': TransitionType.dismiss, }, [RoutePath.expired]: { - [RoutePath.launch]: transitions.push, - [RoutePath.login]: transitions.push, - [RoutePath.tooManyDevices]: transitions.push, - '*': transitions.dismiss, + [RoutePath.launch]: TransitionType.push, + [RoutePath.login]: TransitionType.push, + [RoutePath.tooManyDevices]: TransitionType.push, + '*': TransitionType.dismiss, }, [RoutePath.timeAdded]: { - [RoutePath.expired]: transitions.push, - [RoutePath.redeemVoucher]: transitions.push, - '*': transitions.dismiss, + [RoutePath.expired]: TransitionType.push, + [RoutePath.redeemVoucher]: TransitionType.push, + '*': TransitionType.dismiss, }, [RoutePath.deviceRevoked]: { - '*': transitions.pop, + '*': TransitionType.pop, }, }; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx index 5473b69f03..aae0e599b1 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx @@ -11,7 +11,7 @@ import { useAppContext } from '../context'; import useActions from '../lib/actionsHook'; import { Flex, Icon } from '../lib/components'; import { Colors } from '../lib/foundations'; -import { transitions, useHistory } from '../lib/history'; +import { TransitionType, useHistory } from '../lib/history'; import { IconBadge } from '../lib/icon-badge'; import { generateRoutePath } from '../lib/routeHelpers'; import { RoutePath } from '../lib/routes'; @@ -282,7 +282,7 @@ function useFinishedCallback() { accountSetupFinished(); } - history.reset(RoutePath.main, { transition: transitions.push }); + history.reset(RoutePath.main, { transition: TransitionType.push }); }, [isNewAccount, accountSetupFinished, history]); return callback; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx index 59675c025e..530e6faa59 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx @@ -4,7 +4,7 @@ import styled from 'styled-components'; import { messages } from '../../shared/gettext'; import { useAppContext } from '../context'; import { Colors } from '../lib/foundations'; -import { transitions, useHistory } from '../lib/history'; +import { TransitionType, useHistory } from '../lib/history'; import { RoutePath } from '../lib/routes'; import { useBoolean } from '../lib/utility-hooks'; import { useSelector } from '../redux/store'; @@ -75,7 +75,7 @@ function DefaultFooter() { const openSendProblemReport = useCallback(() => { hideDialog(); - push(RoutePath.problemReport, { transition: transitions.show }); + push(RoutePath.problemReport, { transition: TransitionType.show }); }, [hideDialog, push]); return ( diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Map.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Map.tsx index 9ea69251d9..c4df7ebbbe 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/Map.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/Map.tsx @@ -5,6 +5,7 @@ import { TunnelState } from '../../shared/daemon-rpc-types'; import log from '../../shared/logging'; import { useAppContext } from '../context'; import GlMap, { ConnectionState, Coordinate } from '../lib/3dmap'; +import { getReduceMotion } from '../lib/functions'; import { useCombinedRefs, useEffectEvent, @@ -44,7 +45,7 @@ export default function Map() { const connectionState = getConnectionState(hasLocationValue, connection.status.state); - const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + const reduceMotion = getReduceMotion(); const animate = !reduceMotion && animateMap; return ( diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx index 17ccab76a3..c27475773a 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx @@ -16,7 +16,7 @@ import { } from '../../shared/notifications'; import { useAppContext } from '../context'; import useActions from '../lib/actionsHook'; -import { transitions, useHistory } from '../lib/history'; +import { TransitionType, useHistory } from '../lib/history'; import { NewDeviceNotificationProvider, NewVersionNotificationProvider, @@ -212,7 +212,7 @@ function NotificationActionWrapper({ const goToProblemReport = useCallback(() => { closeTroubleshootModal(); - push(RoutePath.problemReport, { transition: transitions.show }); + push(RoutePath.problemReport, { transition: TransitionType.show }); }, [closeTroubleshootModal, push]); let actionComponent: React.ReactElement | undefined; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx index c7fd3db1a3..4b0459a392 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx @@ -8,7 +8,7 @@ import { useAppContext } from '../context'; import useActions from '../lib/actionsHook'; import { Flex, Icon, IconProps } from '../lib/components'; import { Colors, spacings } from '../lib/foundations'; -import { transitions, useHistory } from '../lib/history'; +import { TransitionType, useHistory } from '../lib/history'; import { RoutePath } from '../lib/routes'; import { useBoolean, useEffectEvent } from '../lib/utility-hooks'; import settingsImportActions from '../redux/settings-import/actions'; @@ -72,7 +72,7 @@ export default function SettingsImport() { }, [clearAllRelayOverrides, hideClearDialog, setImportStatus]); const navigateTextImport = useCallback(() => { - history.push(RoutePath.settingsTextImport, { transition: transitions.show }); + history.push(RoutePath.settingsTextImport, { transition: TransitionType.show }); }, [history]); const importFile = useCallback(async () => { diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx index 326d72985d..68644cdfa1 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx @@ -15,6 +15,7 @@ import { Button, Container, Flex, FootnoteMini, IconButton, Spinner } from '../l import { Colors } from '../lib/foundations'; import { useHistory } from '../lib/history'; import { formatHtml } from '../lib/html-formatter'; +import { useAfterTransition } from '../lib/transition-hooks'; import { useEffectEvent, useStyledRef } from '../lib/utility-hooks'; import { IReduxState } from '../redux/store'; import { AppNavigationHeader } from './'; @@ -114,14 +115,17 @@ function useFilePicker( function LinuxSplitTunnelingSettings(props: IPlatformSplitTunnelingSettingsProps) { const { getLinuxSplitTunnelingApplications, launchExcludedApplication } = useAppContext(); + const runAfterTransition = useAfterTransition(); const [searchTerm, setSearchTerm] = useState(''); const [applications, setApplications] = useState<ILinuxSplitTunnelingApplication[]>(); const [browseError, setBrowseError] = useState<string>(); - const updateApplications = useEffectEvent(async () => { - const applications = await getLinuxSplitTunnelingApplications(); - setApplications(applications); + const updateApplications = useEffectEvent(() => { + runAfterTransition(async () => { + const applications = await getLinuxSplitTunnelingApplications(); + setApplications(applications); + }); }); useEffect(() => void updateApplications(), []); @@ -312,6 +316,7 @@ export function SplitTunnelingSettings(props: IPlatformSplitTunnelingSettingsPro needFullDiskPermissions, setSplitTunnelingState, } = useAppContext(); + const runAfterTransition = useAfterTransition(); const splitTunnelingEnabled = useSelector((state: IReduxState) => state.settings.splitTunneling); const splitTunnelingApplications = useSelector( (state: IReduxState) => state.settings.splitTunnelingApplications, @@ -340,14 +345,16 @@ export function SplitTunnelingSettings(props: IPlatformSplitTunnelingSettingsPro } }, [fetchNeedFullDiskPermissions]); - const onMount = useEffectEvent(async () => { - const { fromCache, applications } = await getSplitTunnelingApplications(); - setApplications(applications); - - if (fromCache) { - const { applications } = await getSplitTunnelingApplications(true); + const onMount = useEffectEvent(() => { + runAfterTransition(async () => { + const { fromCache, applications } = await getSplitTunnelingApplications(); setApplications(applications); - } + + if (fromCache) { + const { applications } = await getSplitTunnelingApplications(true); + setApplications(applications); + } + }); }); useEffect(() => void onMount(), []); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx index a748845fc3..6ae2dd2166 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx @@ -9,7 +9,7 @@ import { capitalizeEveryWord } from '../../shared/string-helpers'; import { useAppContext } from '../context'; import { Button, Flex, IconButton, Spinner } from '../lib/components'; import { Colors } from '../lib/foundations'; -import { transitions, useHistory } from '../lib/history'; +import { TransitionType, useHistory } from '../lib/history'; import { formatHtml } from '../lib/html-formatter'; import { IconBadge, IconBadgeProps } from '../lib/icon-badge'; import { RoutePath } from '../lib/routes'; @@ -93,11 +93,11 @@ export default function TooManyDevices() { const continueLogin = useCallback(() => { void login(accountNumber); - reset(RoutePath.login, { transition: transitions.pop }); + reset(RoutePath.login, { transition: TransitionType.pop }); }, [reset, login, accountNumber]); const cancel = useCallback(() => { cancelLogin(); - reset(RoutePath.login, { transition: transitions.pop }); + reset(RoutePath.login, { transition: TransitionType.pop }); }, [reset, cancelLogin]); const imageSource = getIconSource(devices); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderAccountButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderAccountButton.tsx index 7eee31e980..f558f253ee 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderAccountButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderAccountButton.tsx @@ -2,7 +2,7 @@ import { useCallback } from 'react'; import { messages } from '../../../../shared/gettext'; import { IconButton, IconButtonProps, MainHeader } from '../../../lib/components'; -import { transitions, useHistory } from '../../../lib/history'; +import { TransitionType, useHistory } from '../../../lib/history'; import { RoutePath } from '../../../lib/routes'; import { useSelector } from '../../../redux/store'; @@ -11,7 +11,7 @@ export type MainHeaderBarAccountButtonProps = Omit<IconButtonProps, 'icon'>; export const AppMainHeaderBarAccountButton = (props: MainHeaderBarAccountButtonProps) => { const history = useHistory(); const openAccount = useCallback( - () => history.push(RoutePath.account, { transition: transitions.show }), + () => history.push(RoutePath.account, { transition: TransitionType.show }), [history], ); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderSettingsButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderSettingsButton.tsx index f7bb352b04..755350f18d 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderSettingsButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderSettingsButton.tsx @@ -2,7 +2,7 @@ import { useCallback } from 'react'; import { messages } from '../../../../shared/gettext'; import { IconButton, IconButtonProps, MainHeader } from '../../../lib/components'; -import { transitions, useHistory } from '../../../lib/history'; +import { TransitionType, useHistory } from '../../../lib/history'; import { RoutePath } from '../../../lib/routes'; export type MainHeaderSettingsButtonProps = Omit<IconButtonProps, 'icon'>; @@ -12,7 +12,7 @@ export function AppMainHeaderSettingsButton(props: MainHeaderSettingsButtonProps const openSettings = useCallback(() => { if (!props.disabled) { - history.push(RoutePath.settings, { transition: transitions.show }); + history.push(RoutePath.settings, { transition: TransitionType.show }); } }, [history, props.disabled]); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderBackButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderBackButton.tsx index 73bcd69d46..a4f85d3dff 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderBackButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderBackButton.tsx @@ -2,17 +2,14 @@ import { useContext, useMemo } from 'react'; import { messages } from '../../../../shared/gettext'; import { IconButton } from '../../../lib/components'; -import { transitions, useHistory } from '../../../lib/history'; +import { TransitionType, useHistory } from '../../../lib/history'; import { BackActionContext } from '../../KeyboardNavigation'; export const AppNavigationHeaderBackButton = () => { const history = useHistory(); // Compare the transition name with dismiss to infer wheter or not the view will slide // horizontally or vertically and then use matching button. - const backIcon = useMemo( - () => history.getPopTransition().name !== transitions.dismiss.name, - [history], - ); + const backIcon = useMemo(() => history.getPopTransition() !== TransitionType.dismiss, [history]); const { parentBackAction } = useContext(BackActionContext); if (!parentBackAction) return null; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/SelectLocationButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/SelectLocationButton.tsx index df1c9246e3..7581941942 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/SelectLocationButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/SelectLocationButton.tsx @@ -7,7 +7,7 @@ import { messages, relayLocations } from '../../../shared/gettext'; import log from '../../../shared/logging'; import { useAppContext } from '../../context'; import { Button, ButtonProps, Icon } from '../../lib/components'; -import { transitions, useHistory } from '../../lib/history'; +import { TransitionType, useHistory } from '../../lib/history'; import { RoutePath } from '../../lib/routes'; import { IRelayLocationCountryRedux, RelaySettingsRedux } from '../../redux/settings/reducers'; import { useSelector } from '../../redux/store'; @@ -37,7 +37,7 @@ function SelectLocationButton(props: ButtonProps) { ); const onSelectLocation = useCallback(() => { - push(RoutePath.selectLocation, { transition: transitions.show }); + push(RoutePath.selectLocation, { transition: TransitionType.show }); }, [push]); return ( diff --git a/desktop/packages/mullvad-vpn/src/shared/ipc-types.ts b/desktop/packages/mullvad-vpn/src/shared/ipc-types.ts index c186c9ac83..67d1539b36 100644 --- a/desktop/packages/mullvad-vpn/src/shared/ipc-types.ts +++ b/desktop/packages/mullvad-vpn/src/shared/ipc-types.ts @@ -1,6 +1,6 @@ import { Action, Location } from 'history'; -import { ITransitionSpecification } from '../renderer/lib/history'; +import { TransitionType } from '../renderer/lib/history'; export interface ICurrentAppVersionInfo { gui: string; @@ -18,7 +18,7 @@ export type IChangelog = Array<string>; export interface LocationState { scrollPosition: [number, number]; expandedSections: Record<string, boolean>; - transition: ITransitionSpecification; + transition: TransitionType; } export interface IHistoryObject { |