Move udp over tcp settings components to separate folders

4 files changed, 73 insertions, 62 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/UdpOverTcpSettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/UdpOverTcpSettingsView.tsx
index 5def5bfabd..4921720332 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/UdpOverTcpSettingsView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/UdpOverTcpSettingsView.tsx
@@ -1,29 +1,20 @@
-import { useCallback, useMemo } from 'react';
 import styled from 'styled-components';
 
-import {
-  liftConstraint,
-  LiftedConstraint,
-  wrapConstraint,
-} from '../../../../shared/daemon-rpc-types';
 import { messages } from '../../../../shared/gettext';
-import { useAppContext } from '../../../context';
 import { useHistory } from '../../../lib/history';
-import { useSelector } from '../../../redux/store';
 import { AppNavigationHeader } from '../..';
-import { AriaInputGroup } from '../../AriaGroup';
 import * as Cell from '../../cell';
-import Selector, { SelectorItem } from '../../cell/Selector';
+import { SelectorItem } from '../../cell/Selector';
 import { BackAction } from '../../KeyboardNavigation';
 import { Layout, SettingsContainer } from '../../Layout';
-import { ModalMessage } from '../../Modal';
 import { NavigationContainer } from '../../NavigationContainer';
 import { NavigationScrollbars } from '../../NavigationScrollbars';
 import SettingsHeader, { HeaderTitle } from '../../SettingsHeader';
+import { Udp2tcpPortSetting } from './components';
 
-const UDP2TCP_PORTS = [80, 5001];
+export const UDP2TCP_PORTS = [80, 5001];
 
-function mapPortToSelectorItem(value: number): SelectorItem<number> {
+export function mapPortToSelectorItem(value: number): SelectorItem<number> {
   return { label: value.toString(), value };
 }
 
@@ -34,7 +25,7 @@ const StyledContent = styled.div({
   marginBottom: '2px',
 });
 
-const StyledSelectorContainer = styled.div({
+export const StyledSelectorContainer = styled.div({
   flex: 0,
 });
 
@@ -72,51 +63,3 @@ export function UdpOverTcpSettingsView() {
     </BackAction>
   );
 }
-
-function Udp2tcpPortSetting() {
-  const { setObfuscationSettings } = useAppContext();
-  const obfuscationSettings = useSelector((state) => state.settings.obfuscationSettings);
-
-  const port = liftConstraint(obfuscationSettings.udp2tcpSettings.port);
-  const portItems: SelectorItem<number>[] = useMemo(
-    () => UDP2TCP_PORTS.map(mapPortToSelectorItem),
-    [],
-  );
-
-  const selectPort = useCallback(
-    async (port: LiftedConstraint<number>) => {
-      await setObfuscationSettings({
-        ...obfuscationSettings,
-        udp2tcpSettings: {
-          ...obfuscationSettings.udp2tcpSettings,
-          port: wrapConstraint(port),
-        },
-      });
-    },
-    [setObfuscationSettings, obfuscationSettings],
-  );
-
-  return (
-    <AriaInputGroup>
-      <StyledSelectorContainer>
-        <Selector
-          // TRANSLATORS: The title for the UDP-over-TCP port selector.
-          title={messages.pgettext('wireguard-settings-view', 'UDP-over-TCP port')}
-          details={
-            <ModalMessage>
-              {messages.pgettext(
-                'wireguard-settings-view',
-                'Which TCP port the UDP-over-TCP obfuscation protocol should connect to on the VPN server.',
-              )}
-            </ModalMessage>
-          }
-          items={portItems}
-          value={port}
-          onSelect={selectPort}
-          thinTitle
-          automaticValue={'any' as const}
-        />
-      </StyledSelectorContainer>
-    </AriaInputGroup>
-  );
-}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/components/index.ts
new file mode 100644
index 0000000000..6be2d43b04
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/components/index.ts
@@ -0,0 +1 @@
+export * from './udp-over-tcp-port-setting';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/components/udp-over-tcp-port-setting/Udp2tcpPortSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/components/udp-over-tcp-port-setting/Udp2tcpPortSetting.tsx
new file mode 100644
index 0000000000..9ca3548239
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/components/udp-over-tcp-port-setting/Udp2tcpPortSetting.tsx
@@ -0,0 +1,66 @@
+import { useCallback, useMemo } from 'react';
+
+import {
+  liftConstraint,
+  LiftedConstraint,
+  wrapConstraint,
+} from '../../../../../../shared/daemon-rpc-types';
+import { messages } from '../../../../../../shared/gettext';
+import { useAppContext } from '../../../../../context';
+import { useSelector } from '../../../../../redux/store';
+import { AriaInputGroup } from '../../../../AriaGroup';
+import Selector, { SelectorItem } from '../../../../cell/Selector';
+import { ModalMessage } from '../../../../Modal';
+import {
+  mapPortToSelectorItem,
+  StyledSelectorContainer,
+  UDP2TCP_PORTS,
+} from '../../UdpOverTcpSettingsView';
+
+export function Udp2tcpPortSetting() {
+  const { setObfuscationSettings } = useAppContext();
+  const obfuscationSettings = useSelector((state) => state.settings.obfuscationSettings);
+
+  const port = liftConstraint(obfuscationSettings.udp2tcpSettings.port);
+  const portItems: SelectorItem<number>[] = useMemo(
+    () => UDP2TCP_PORTS.map(mapPortToSelectorItem),
+    [],
+  );
+
+  const selectPort = useCallback(
+    async (port: LiftedConstraint<number>) => {
+      await setObfuscationSettings({
+        ...obfuscationSettings,
+        udp2tcpSettings: {
+          ...obfuscationSettings.udp2tcpSettings,
+          port: wrapConstraint(port),
+        },
+      });
+    },
+    [setObfuscationSettings, obfuscationSettings],
+  );
+
+  return (
+    <AriaInputGroup>
+      <StyledSelectorContainer>
+        <Selector
+          // TRANSLATORS: The title for the UDP-over-TCP port selector.
+          title={messages.pgettext('wireguard-settings-view', 'UDP-over-TCP port')}
+          details={
+            <ModalMessage>
+              {messages.pgettext(
+                'wireguard-settings-view',
+                'Which TCP port the UDP-over-TCP obfuscation protocol should connect to on the VPN server.',
+              )}
+            </ModalMessage>
+          }
+          items={portItems}
+          value={port}
+          onSelect={selectPort}
+          thinTitle
+          automaticValue={'any' as const}
+        />
+      </StyledSelectorContainer>
+    </AriaInputGroup>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/components/udp-over-tcp-port-setting/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/components/udp-over-tcp-port-setting/index.ts
new file mode 100644
index 0000000000..15a623cee7
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/components/udp-over-tcp-port-setting/index.ts
@@ -0,0 +1 @@
+export * from './Udp2tcpPortSetting';