diff options
Diffstat (limited to 'desktop')
18 files changed, 133 insertions, 54 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/AppInfoView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/AppInfoView.tsx index 9f5fd04ae9..547260f1f8 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/AppInfoView.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/AppInfoView.tsx @@ -1,7 +1,6 @@ import { messages } from '../../../../shared/gettext'; import { Flex } from '../../../lib/components'; import { useHistory } from '../../../lib/history'; -import { useSelector } from '../../../redux/store'; import { AppNavigationHeader } from '../../'; import { BackAction } from '../../KeyboardNavigation'; import { Layout, SettingsContainer, SettingsStack } from '../../Layout'; @@ -10,10 +9,11 @@ import { NavigationScrollbars } from '../../NavigationScrollbars'; import SettingsHeader, { HeaderTitle } from '../../SettingsHeader'; import { ChangelogListItem, UpdateAvailableListItem, VersionListItem } from './components'; import { BetaListItem } from './components/beta-list-item'; +import { useShowUpdateAvailable } from './hooks'; export function AppInfoView() { const { pop } = useHistory(); - const suggestedUpgrade = useSelector((state) => state.version.suggestedUpgrade); + const showUpdateAvailable = useShowUpdateAvailable(); return ( <BackAction action={pop}> <Layout> @@ -32,7 +32,7 @@ export function AppInfoView() { </SettingsHeader> <SettingsContainer> <SettingsStack> - {suggestedUpgrade && <UpdateAvailableListItem />} + {showUpdateAvailable && <UpdateAvailableListItem />} <Flex $flexDirection="column"> <VersionListItem /> <ChangelogListItem /> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/beta-list-item/BetaListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/beta-list-item/BetaListItem.tsx index 4f963e108f..aee5ebd82c 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/beta-list-item/BetaListItem.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/beta-list-item/BetaListItem.tsx @@ -1,15 +1,13 @@ import React from 'react'; import { messages } from '../../../../../../shared/gettext'; -import { useAppContext } from '../../../../../context'; import { ListItem } from '../../../../../lib/components/list-item'; -import { useSelector } from '../../../../../redux/store'; import Switch from '../../../../Switch'; +import { useSettingsShowBetaReleases, useVersionIsBeta } from '../../hooks'; export function BetaListItem() { - const isBeta = useSelector((state) => state.version.isBeta); - const showBetaReleases = useSelector((state) => state.settings.showBetaReleases); - const { setShowBetaReleases } = useAppContext(); + const { isBeta } = useVersionIsBeta(); + const { showBetaReleases, setShowBetaReleases } = useSettingsShowBetaReleases(); const switchId = React.useId(); const labelId = React.useId(); const descriptionId = React.useId(); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/changelog-list-item/ChangelogListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/changelog-list-item/ChangelogListItem.tsx index 40ecab7718..cc84da62c0 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/changelog-list-item/ChangelogListItem.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/changelog-list-item/ChangelogListItem.tsx @@ -1,21 +1,22 @@ -import { useCallback } from 'react'; - import { messages } from '../../../../../../shared/gettext'; import { Icon } from '../../../../../lib/components'; import { ListItem } from '../../../../../lib/components/list-item'; -import { useHistory } from '../../../../../lib/history'; -import { RoutePath } from '../../../../../lib/routes'; +import { usePushChangelog } from '../../hooks'; export function ChangelogListItem() { - const history = useHistory(); - const navigate = useCallback(() => history.push(RoutePath.changelog), [history]); + const pushChangelog = usePushChangelog(); return ( <ListItem> <ListItem.Item> - <ListItem.Trigger onClick={navigate}> + <ListItem.Trigger onClick={pushChangelog}> <ListItem.Content> - <ListItem.Label>{messages.pgettext('settings-view', 'What’s new')}</ListItem.Label> + <ListItem.Label> + { + // TRANSLATORS: Label for changelog list item. + messages.pgettext('app-info-view', 'What’s new') + } + </ListItem.Label> <Icon icon="chevron-right" /> </ListItem.Content> </ListItem.Trigger> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/update-available-list-item/UpdateAvailableListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/update-available-list-item/UpdateAvailableListItem.tsx index 109b5f9f85..0d15e9d037 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/update-available-list-item/UpdateAvailableListItem.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/update-available-list-item/UpdateAvailableListItem.tsx @@ -1,45 +1,42 @@ -import { useCallback } from 'react'; import styled from 'styled-components'; import { messages } from '../../../../../../shared/gettext'; import { Flex, Icon } from '../../../../../lib/components'; import { Dot } from '../../../../../lib/components/dot'; import { ListItem } from '../../../../../lib/components/list-item'; -import { useHistory } from '../../../../../lib/history'; -import { RoutePath } from '../../../../../lib/routes'; -import { useSelector } from '../../../../../redux/store'; +import { useConnectionIsBlocked, usePushAppUpgrade, useVersionSuggestedUpgrade } from '../../hooks'; const StyledText = styled(ListItem.Text)` margin-top: -4px; `; export function UpdateAvailableListItem() { - const suggestedUpgrade = useSelector((state) => state.version.suggestedUpgrade); - const isOffline = useSelector((state) => state.connection.isBlocked); - const history = useHistory(); - // TODO: Change to in app upgrade view - const navigate = useCallback(() => history.push(RoutePath.account), [history]); + const { suggestedUpgrade } = useVersionSuggestedUpgrade(); + const { isBlocked } = useConnectionIsBlocked(); + + const pushAppUpgrade = usePushAppUpgrade(); return ( - <> - <ListItem disabled={isOffline}> - <ListItem.Item> - <ListItem.Trigger onClick={navigate}> - <ListItem.Content> - <Flex $flexDirection="column"> - <ListItem.Label> - {messages.pgettext('app-info-view', 'Update available')} - </ListItem.Label> - <StyledText variant="footnoteMini">{suggestedUpgrade}</StyledText> - </Flex> - <ListItem.Group> - <Dot variant="warning" size="small" /> - <Icon icon="chevron-right" /> - </ListItem.Group> - </ListItem.Content> - </ListItem.Trigger> - </ListItem.Item> - </ListItem> - </> + <ListItem disabled={isBlocked}> + <ListItem.Item> + <ListItem.Trigger onClick={pushAppUpgrade}> + <ListItem.Content> + <Flex $flexDirection="column"> + <ListItem.Label> + { + // TRANSLATORS: Label for update available list item. + messages.pgettext('app-info-view', 'Update available') + } + </ListItem.Label> + <StyledText variant="footnoteMini">{suggestedUpgrade}</StyledText> + </Flex> + <ListItem.Group> + <Dot variant="warning" size="small" /> + <Icon icon="chevron-right" /> + </ListItem.Group> + </ListItem.Content> + </ListItem.Trigger> + </ListItem.Item> + </ListItem> ); } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/version-list-item/VersionListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/version-list-item/VersionListItem.tsx index 435517f394..7d49840c2b 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/version-list-item/VersionListItem.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/version-list-item/VersionListItem.tsx @@ -1,19 +1,21 @@ import { messages } from '../../../../../../shared/gettext'; -import { Box, Icon } from '../../../../../lib/components'; +import { Icon } from '../../../../../lib/components'; import { ListItem } from '../../../../../lib/components/list-item'; import { Colors } from '../../../../../lib/foundations'; -import { useSelector } from '../../../../../redux/store'; +import { useVersionCurrent } from '../../hooks'; +import { useShowAlert, useShowFooter } from './hooks'; export function VersionListItem() { - const appVersion = useSelector((state) => state.version.current); - const consistentVersion = useSelector((state) => state.version.consistent); + const { current } = useVersionCurrent(); + const showAlert = useShowAlert(); + const showFooter = useShowFooter(); return ( <ListItem> <ListItem.Item> <ListItem.Content> <ListItem.Group> - {!consistentVersion && <Icon icon="alert-circle" color={Colors.red} />} + {showAlert && <Icon icon="alert-circle" color={Colors.red} />} <ListItem.Label> { // TRANSLATORS: Label for version list item. @@ -21,12 +23,10 @@ export function VersionListItem() { } </ListItem.Label> </ListItem.Group> - <Box $width="24px" $height="24px" center> - <ListItem.Text>{appVersion}</ListItem.Text> - </Box> + <ListItem.Text>{current}</ListItem.Text> </ListItem.Content> </ListItem.Item> - {!consistentVersion && ( + {showFooter && ( <ListItem.Footer> <ListItem.Text> { diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/version-list-item/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/version-list-item/hooks/index.ts new file mode 100644 index 0000000000..80ad6f4868 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/version-list-item/hooks/index.ts @@ -0,0 +1,2 @@ +export * from './useShowAlert'; +export * from './useShowFooter'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/version-list-item/hooks/useShowAlert.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/version-list-item/hooks/useShowAlert.tsx new file mode 100644 index 0000000000..3351e7b378 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/version-list-item/hooks/useShowAlert.tsx @@ -0,0 +1,6 @@ +import { useVersionConsistent } from '../../../hooks'; + +export const useShowAlert = () => { + const { consistent } = useVersionConsistent(); + return !consistent; +}; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/version-list-item/hooks/useShowFooter.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/version-list-item/hooks/useShowFooter.tsx new file mode 100644 index 0000000000..1020de875f --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/version-list-item/hooks/useShowFooter.tsx @@ -0,0 +1,6 @@ +import { useVersionConsistent } from '../../../hooks'; + +export const useShowFooter = () => { + const { consistent } = useVersionConsistent(); + return !consistent; +}; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/index.ts new file mode 100644 index 0000000000..f22bb910ee --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/index.ts @@ -0,0 +1,9 @@ +export * from './useConnectionIsBlocked'; +export * from './usePushAppUpgrade'; +export * from './usePushChangelog'; +export * from './useSetttingsShowBetaReleases'; +export * from './useVersionConsistent'; +export * from './useVersionCurrent'; +export * from './useVersionIsBeta'; +export * from './useVersionSuggestedUpgrade'; +export * from './useShowUpdateAvailable'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/useConnectionIsBlocked.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/useConnectionIsBlocked.tsx new file mode 100644 index 0000000000..e71b843b77 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/useConnectionIsBlocked.tsx @@ -0,0 +1,5 @@ +import { useSelector } from '../../../../redux/store'; + +export const useConnectionIsBlocked = () => { + return { isBlocked: useSelector((state) => state.connection.isBlocked) }; +}; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/usePushAppUpgrade.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/usePushAppUpgrade.tsx new file mode 100644 index 0000000000..ee09cdc539 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/usePushAppUpgrade.tsx @@ -0,0 +1,10 @@ +import React from 'react'; + +import { useHistory } from '../../../../lib/history'; +import { RoutePath } from '../../../../lib/routes'; + +export const usePushAppUpgrade = () => { + const history = useHistory(); + // TODO: Change to navigate to in app upgrade view once available + return React.useCallback(() => history.push(RoutePath.account), [history]); +}; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/usePushChangelog.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/usePushChangelog.tsx new file mode 100644 index 0000000000..3e87134c72 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/usePushChangelog.tsx @@ -0,0 +1,9 @@ +import { useCallback } from 'react'; + +import { useHistory } from '../../../../lib/history'; +import { RoutePath } from '../../../../lib/routes'; + +export const usePushChangelog = () => { + const history = useHistory(); + return useCallback(() => history.push(RoutePath.changelog), [history]); +}; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/useSetttingsShowBetaReleases.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/useSetttingsShowBetaReleases.tsx new file mode 100644 index 0000000000..67ad99adbe --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/useSetttingsShowBetaReleases.tsx @@ -0,0 +1,10 @@ +import { useAppContext } from '../../../../context'; +import { useSelector } from '../../../../redux/store'; + +export const useSettingsShowBetaReleases = () => { + const { setShowBetaReleases } = useAppContext(); + return { + showBetaReleases: useSelector((state) => state.settings.showBetaReleases), + setShowBetaReleases, + }; +}; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/useShowUpdateAvailable.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/useShowUpdateAvailable.tsx new file mode 100644 index 0000000000..7ca3763a19 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/useShowUpdateAvailable.tsx @@ -0,0 +1,6 @@ +import { useVersionSuggestedUpgrade } from './useVersionSuggestedUpgrade'; + +export const useShowUpdateAvailable = () => { + const { suggestedUpgrade } = useVersionSuggestedUpgrade(); + return !!suggestedUpgrade; +}; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/useVersionConsistent.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/useVersionConsistent.tsx new file mode 100644 index 0000000000..1e13730cbc --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/useVersionConsistent.tsx @@ -0,0 +1,5 @@ +import { useSelector } from '../../../../redux/store'; + +export const useVersionConsistent = () => { + return { consistent: useSelector((state) => state.version.consistent) }; +}; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/useVersionCurrent.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/useVersionCurrent.tsx new file mode 100644 index 0000000000..ace1214d17 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/useVersionCurrent.tsx @@ -0,0 +1,5 @@ +import { useSelector } from '../../../../redux/store'; + +export const useVersionCurrent = () => { + return { current: useSelector((state) => state.version.current) }; +}; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/useVersionIsBeta.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/useVersionIsBeta.tsx new file mode 100644 index 0000000000..731e1d5464 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/useVersionIsBeta.tsx @@ -0,0 +1,5 @@ +import { useSelector } from '../../../../redux/store'; + +export const useVersionIsBeta = () => { + return { isBeta: useSelector((state) => state.version.isBeta) }; +}; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/useVersionSuggestedUpgrade.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/useVersionSuggestedUpgrade.tsx new file mode 100644 index 0000000000..c71dbe38be --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/hooks/useVersionSuggestedUpgrade.tsx @@ -0,0 +1,5 @@ +import { useSelector } from '../../../../redux/store'; + +export const useVersionSuggestedUpgrade = () => { + return { suggestedUpgrade: useSelector((state) => state.version.suggestedUpgrade) }; +}; |