Use hooks for version and connection state management in settings view

28 files changed, 125 insertions, 36 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/SettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/SettingsView.tsx
index 9f5c4375a6..353367da8c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/SettingsView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/SettingsView.tsx
@@ -1,10 +1,9 @@
 import styled from 'styled-components';
 
 import { messages } from '../../../../shared/gettext';
+import { usePop } from '../../../history/hooks';
 import { Flex, TitleBig } from '../../../lib/components';
 import { spacings } from '../../../lib/foundations';
-import { useHistory } from '../../../lib/history';
-import { useSelector } from '../../../redux/store';
 import { AppNavigationHeader } from '../../';
 import { measurements } from '../../common-styles';
 import { BackAction } from '../../KeyboardNavigation';
@@ -22,6 +21,7 @@ import {
   UserInterfaceSettingsListItem,
   VpnSettingsListItem,
 } from './components';
+import { useShowDebug, useShowSplitTunneling, useShowSubSettings } from './hooks';
 
 export const Title = styled(TitleBig)`
   margin: 0 ${spacings.medium} ${spacings.medium};
@@ -32,17 +32,14 @@ export const Footer = styled(Flex)`
 `;
 
 export function SettingsView() {
-  const history = useHistory();
+  const pop = usePop();
 
-  const loginState = useSelector((state) => state.account.status);
-  const connectedToDaemon = useSelector((state) => state.userInterface.connectedToDaemon);
-  const isMacOs13OrNewer = useSelector((state) => state.userInterface.isMacOs13OrNewer);
-
-  const showSubSettings = loginState.type === 'ok' && connectedToDaemon;
-  const showSplitTunneling = window.env.platform !== 'darwin' || isMacOs13OrNewer;
+  const showSubSettings = useShowSubSettings();
+  const showSplitTunneling = useShowSplitTunneling();
+  const showDebug = useShowDebug();
 
   return (
-    <BackAction action={history.pop}>
+    <BackAction action={pop}>
       <SettingsContainer>
         <NavigationContainer>
           <AppNavigationHeader
@@ -81,7 +78,7 @@ export function SettingsView() {
                 <AppInfoListItem />
               </Flex>
 
-              {window.env.development && <DebugListItem />}
+              {showDebug && <DebugListItem />}
             </Flex>
             <Footer>
               <QuitButton />
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/app-info-list-item/AppInfoListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/app-info-list-item/AppInfoListItem.tsx
index 93737617fd..2b1df0d955 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/app-info-list-item/AppInfoListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/app-info-list-item/AppInfoListItem.tsx
@@ -5,7 +5,7 @@ import { Flex, Icon } from '../../../../../lib/components';
 import { Dot } from '../../../../../lib/components/dot';
 import { ListItem } from '../../../../../lib/components/list-item';
 import { RoutePath } from '../../../../../lib/routes';
-import { useSelector } from '../../../../../redux/store';
+import { useVersionCurrent, useVersionSuggestedUpgrade } from '../../../../../redux/hooks';
 import { NavigationListItem } from '../../../../NavigationListItem';
 
 const StyledText = styled(ListItem.Text)`
@@ -13,8 +13,8 @@ const StyledText = styled(ListItem.Text)`
 `;
 
 export function AppInfoListItem() {
-  const appVersion = useSelector((state) => state.version.current);
-  const suggestedUpgrade = useSelector((state) => state.version.suggestedUpgrade);
+  const { current } = useVersionCurrent();
+  const { suggestedUpgrade } = useVersionSuggestedUpgrade();
 
   return (
     <NavigationListItem to={RoutePath.appInfo}>
@@ -35,7 +35,7 @@ export function AppInfoListItem() {
         )}
       </Flex>
       <ListItem.Group>
-        <ListItem.Text>{appVersion}</ListItem.Text>
+        <ListItem.Text>{current}</ListItem.Text>
         {suggestedUpgrade && <Dot variant="warning" size="small" />}
         <Icon icon="chevron-right" />
       </ListItem.Group>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/DaitaListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/DaitaListItem.tsx
index cf9676b750..158353f8dc 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/DaitaListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/DaitaListItem.tsx
@@ -3,22 +3,17 @@ import { messages } from '../../../../../../shared/gettext';
 import { Icon } from '../../../../../lib/components';
 import { ListItem } from '../../../../../lib/components/list-item';
 import { RoutePath } from '../../../../../lib/routes';
-import { useSelector } from '../../../../../redux/store';
 import { NavigationListItem } from '../../../../NavigationListItem';
+import { useIsOn } from './hooks';
 
 export function DaitaListItem() {
-  const daita = useSelector((state) => state.settings.wireguard.daita?.enabled ?? false);
-  const relaySettings = useSelector((state) => state.settings.relaySettings);
-  const unavailable =
-    'normal' in relaySettings ? relaySettings.normal.tunnelProtocol === 'openvpn' : true;
+  const isOn = useIsOn();
 
   return (
     <NavigationListItem to={RoutePath.daitaSettings}>
       <ListItem.Label>{strings.daita}</ListItem.Label>
       <ListItem.Group>
-        <ListItem.Text>
-          {daita && !unavailable ? messages.gettext('On') : messages.gettext('Off')}
-        </ListItem.Text>
+        <ListItem.Text>{isOn ? messages.gettext('On') : messages.gettext('Off')}</ListItem.Text>
         <Icon icon="chevron-right" />
       </ListItem.Group>
     </NavigationListItem>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/hooks/index.ts
new file mode 100644
index 0000000000..a96f5ea44e
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useIsOn';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/hooks/useIsOn.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/hooks/useIsOn.tsx
new file mode 100644
index 0000000000..eb519439c4
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/hooks/useIsOn.tsx
@@ -0,0 +1,9 @@
+import { useSettingsDaitaEnabled, useSettingsRelaySettings } from '../../../../../../redux/hooks';
+
+export const useIsOn = () => {
+  const { daitaEnabled } = useSettingsDaitaEnabled();
+  const { relaySettings } = useSettingsRelaySettings();
+  const unavailable =
+    'normal' in relaySettings ? relaySettings.normal.tunnelProtocol === 'openvpn' : true;
+  return daitaEnabled && !unavailable;
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/multihop-list-item/MultihopListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/multihop-list-item/MultihopListItem.tsx
index 351b78d536..a25f1d7330 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/multihop-list-item/MultihopListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/multihop-list-item/MultihopListItem.tsx
@@ -2,22 +2,17 @@ import { messages } from '../../../../../../shared/gettext';
 import { Icon } from '../../../../../lib/components';
 import { ListItem } from '../../../../../lib/components/list-item';
 import { RoutePath } from '../../../../../lib/routes';
-import { useSelector } from '../../../../../redux/store';
 import { NavigationListItem } from '../../../../NavigationListItem';
+import { useIsOn } from './hooks';
 
 export function MultihopListItem() {
-  const relaySettings = useSelector((state) => state.settings.relaySettings);
-  const multihop = 'normal' in relaySettings ? relaySettings.normal.wireguard.useMultihop : false;
-  const unavailable =
-    'normal' in relaySettings ? relaySettings.normal.tunnelProtocol === 'openvpn' : true;
+  const isOn = useIsOn();
 
   return (
     <NavigationListItem to={RoutePath.multihopSettings}>
       <ListItem.Label>{messages.pgettext('settings-view', 'Multihop')}</ListItem.Label>
       <ListItem.Group>
-        <ListItem.Text>
-          {multihop && !unavailable ? messages.gettext('On') : messages.gettext('Off')}
-        </ListItem.Text>
+        <ListItem.Text>{isOn ? messages.gettext('On') : messages.gettext('Off')}</ListItem.Text>
         <Icon icon="chevron-right" />
       </ListItem.Group>
     </NavigationListItem>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/multihop-list-item/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/multihop-list-item/hooks/index.ts
new file mode 100644
index 0000000000..a96f5ea44e
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/multihop-list-item/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useIsOn';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/multihop-list-item/hooks/useIsOn.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/multihop-list-item/hooks/useIsOn.tsx
new file mode 100644
index 0000000000..499be9373e
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/multihop-list-item/hooks/useIsOn.tsx
@@ -0,0 +1,10 @@
+import { useSettingsRelaySettings } from '../../../../../../redux/hooks';
+
+export const useIsOn = () => {
+  const { relaySettings } = useSettingsRelaySettings();
+  const multihopEnabled =
+    'normal' in relaySettings ? relaySettings.normal.wireguard.useMultihop : false;
+  const unavailable =
+    'normal' in relaySettings ? relaySettings.normal.tunnelProtocol === 'openvpn' : true;
+  return multihopEnabled && !unavailable;
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/quit-button/QuitButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/quit-button/QuitButton.tsx
index 1c2c450537..99c7d555f0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/quit-button/QuitButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/quit-button/QuitButton.tsx
@@ -1,18 +1,16 @@
 import { messages } from '../../../../../../shared/gettext';
 import { useAppContext } from '../../../../../context';
 import { Button } from '../../../../../lib/components';
-import { useSelector } from '../../../../../redux/store';
+import { useIsConnected } from './hooks';
 
 export function QuitButton() {
   const { quit } = useAppContext();
-  const tunnelState = useSelector((state) => state.connection.status);
+  const isConnected = useIsConnected();
 
   return (
     <Button variant="destructive" onClick={quit}>
       <Button.Text>
-        {tunnelState.state === 'disconnected'
-          ? messages.gettext('Quit')
-          : messages.gettext('Disconnect & quit')}
+        {isConnected ? messages.gettext('Disconnect & quit') : messages.gettext('Quit')}
       </Button.Text>
     </Button>
   );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/quit-button/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/quit-button/hooks/index.ts
new file mode 100644
index 0000000000..d25f83300d
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/quit-button/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useIsConnected';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/quit-button/hooks/useIsConnected.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/quit-button/hooks/useIsConnected.tsx
new file mode 100644
index 0000000000..18bc40946b
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/quit-button/hooks/useIsConnected.tsx
@@ -0,0 +1,6 @@
+import { useConnectionStatus } from '../../../../../../redux/hooks';
+
+export const useIsConnected = () => {
+  const { status } = useConnectionStatus();
+  return status.state === 'connected';
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/hooks/index.ts
new file mode 100644
index 0000000000..eddd5a9766
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/hooks/index.ts
@@ -0,0 +1,3 @@
+export * from './useShowDebug';
+export * from './useShowSubSettings';
+export * from './useShowSplitTunneling';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/hooks/useShowDebug.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/hooks/useShowDebug.tsx
new file mode 100644
index 0000000000..0f907df671
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/hooks/useShowDebug.tsx
@@ -0,0 +1,3 @@
+export const useShowDebug = () => {
+  return window.env.development;
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/hooks/useShowSplitTunneling.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/hooks/useShowSplitTunneling.tsx
new file mode 100644
index 0000000000..a699aee42e
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/hooks/useShowSplitTunneling.tsx
@@ -0,0 +1,6 @@
+import { useUserInterfaceIsMacOs13OrNewer } from '../../../../redux/hooks';
+
+export const useShowSplitTunneling = () => {
+  const { isMacOs13OrNewer } = useUserInterfaceIsMacOs13OrNewer();
+  return window.env.platform !== 'darwin' || isMacOs13OrNewer;
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/hooks/useShowSubSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/hooks/useShowSubSettings.tsx
new file mode 100644
index 0000000000..774c597395
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/hooks/useShowSubSettings.tsx
@@ -0,0 +1,7 @@
+import { useAccountStatus, useUserInterfaceConnectedToDaemon } from '../../../../redux/hooks';
+
+export const useShowSubSettings = () => {
+  const { status } = useAccountStatus();
+  const connectedToDaemon = useUserInterfaceConnectedToDaemon();
+  return status.type === 'ok' && connectedToDaemon;
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/history/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/history/hooks/index.ts
index 973cc7b4c6..34a8c3a9f7 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/history/hooks/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/history/hooks/index.ts
@@ -1,2 +1,3 @@
 export * from './usePushAppUpgrade';
 export * from './usePushChangelog';
+export * from './usePop';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/history/hooks/usePop.tsx b/desktop/packages/mullvad-vpn/src/renderer/history/hooks/usePop.tsx
new file mode 100644
index 0000000000..2685a7880f
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/history/hooks/usePop.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+
+import { useHistory } from '../../lib/history';
+
+export const usePop = () => {
+  const history = useHistory();
+  return React.useCallback(() => history.pop(), [history]);
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/redux/account/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/redux/account/hooks/index.ts
new file mode 100644
index 0000000000..223bde8b64
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/redux/account/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useAccountStatus';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/redux/account/hooks/useAccountStatus.tsx b/desktop/packages/mullvad-vpn/src/renderer/redux/account/hooks/useAccountStatus.tsx
new file mode 100644
index 0000000000..9702dbfc56
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/redux/account/hooks/useAccountStatus.tsx
@@ -0,0 +1,7 @@
+import { useSelector } from '../../store';
+
+export const useAccountStatus = () => {
+  return {
+    status: useSelector((state) => state.account.status),
+  };
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/redux/connection/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/redux/connection/hooks/index.ts
index d302ed2c2c..8d23ba1971 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/redux/connection/hooks/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/redux/connection/hooks/index.ts
@@ -1 +1,2 @@
 export * from './useConnectionIsBlocked';
+export * from './useConnectionStatus';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/redux/connection/hooks/useConnectionStatus.tsx b/desktop/packages/mullvad-vpn/src/renderer/redux/connection/hooks/useConnectionStatus.tsx
new file mode 100644
index 0000000000..06ebe49615
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/redux/connection/hooks/useConnectionStatus.tsx
@@ -0,0 +1,5 @@
+import { useSelector } from '../../store';
+
+export const useConnectionStatus = () => {
+  return { status: useSelector((state) => state.connection.status) };
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/redux/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/redux/hooks/index.ts
index 7e4dc3ccf9..d5304e4b11 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/redux/hooks/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/redux/hooks/index.ts
@@ -1,3 +1,5 @@
+export * from '../account/hooks';
 export * from '../connection/hooks';
 export * from '../settings/hooks';
 export * from '../version/hooks';
+export * from '../userinterface/hooks';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/redux/settings/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/redux/settings/hooks/index.ts
index a64158b2c3..e5781542ee 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/redux/settings/hooks/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/redux/settings/hooks/index.ts
@@ -1 +1,3 @@
 export * from './useSettingsShowBetaReleases';
+export * from './useSettingsRelaySettings';
+export * from './useSettingsDaitaEnabled';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/redux/settings/hooks/useSettingsDaitaEnabled.tsx b/desktop/packages/mullvad-vpn/src/renderer/redux/settings/hooks/useSettingsDaitaEnabled.tsx
new file mode 100644
index 0000000000..7d66346ded
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/redux/settings/hooks/useSettingsDaitaEnabled.tsx
@@ -0,0 +1,7 @@
+import { useSelector } from '../../store';
+
+export const useSettingsDaitaEnabled = () => {
+  return {
+    daitaEnabled: useSelector((state) => state.settings.wireguard.daita?.enabled ?? false),
+  };
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/redux/settings/hooks/useSettingsRelaySettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/redux/settings/hooks/useSettingsRelaySettings.tsx
new file mode 100644
index 0000000000..ceed55869f
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/redux/settings/hooks/useSettingsRelaySettings.tsx
@@ -0,0 +1,7 @@
+import { useSelector } from '../../store';
+
+export const useSettingsRelaySettings = () => {
+  return {
+    relaySettings: useSelector((state) => state.settings.relaySettings),
+  };
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/redux/userinterface/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/redux/userinterface/hooks/index.ts
new file mode 100644
index 0000000000..4d7ff23df6
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/redux/userinterface/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from './useUserInterfaceConnectedToDaemon';
+export * from './useUserInterfaceIsMacOs13OrNewer';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/redux/userinterface/hooks/useUserInterfaceConnectedToDaemon.tsx b/desktop/packages/mullvad-vpn/src/renderer/redux/userinterface/hooks/useUserInterfaceConnectedToDaemon.tsx
new file mode 100644
index 0000000000..40acdd520b
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/redux/userinterface/hooks/useUserInterfaceConnectedToDaemon.tsx
@@ -0,0 +1,7 @@
+import { useSelector } from '../../store';
+
+export const useUserInterfaceConnectedToDaemon = () => {
+  return {
+    connectedToDaemon: useSelector((state) => state.userInterface.connectedToDaemon),
+  };
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/redux/userinterface/hooks/useUserInterfaceIsMacOs13OrNewer.tsx b/desktop/packages/mullvad-vpn/src/renderer/redux/userinterface/hooks/useUserInterfaceIsMacOs13OrNewer.tsx
new file mode 100644
index 0000000000..bf0fa4722c
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/redux/userinterface/hooks/useUserInterfaceIsMacOs13OrNewer.tsx
@@ -0,0 +1,7 @@
+import { useSelector } from '../../store';
+
+export const useUserInterfaceIsMacOs13OrNewer = () => {
+  return {
+    isMacOs13OrNewer: useSelector((state) => state.userInterface.isMacOs13OrNewer),
+  };
+};