Use hooks for version and connection state management in app info view

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) };
+};