Move shadowsocks settings components to separate folders

4 files changed, 83 insertions, 76 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/ShadowsocksSettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/ShadowsocksSettingsView.tsx
index 6d3c5be792..20b1070e23 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/ShadowsocksSettingsView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/ShadowsocksSettingsView.tsx
@@ -1,25 +1,15 @@
-import { useCallback } from 'react';
-import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { wrapConstraint } from '../../../../shared/daemon-rpc-types';
 import { messages } from '../../../../shared/gettext';
-import { removeNonNumericCharacters } from '../../../../shared/string-helpers';
-import { useAppContext } from '../../../context';
 import { useHistory } from '../../../lib/history';
-import { useSelector } from '../../../redux/store';
 import { AppNavigationHeader } from '../..';
-import { AriaDescription, AriaInputGroup } from '../../AriaGroup';
 import * as Cell from '../../cell';
-import { SelectorItem, SelectorWithCustomItem } from '../../cell/Selector';
 import { BackAction } from '../../KeyboardNavigation';
 import { Layout, SettingsContainer } from '../../Layout';
 import { NavigationContainer } from '../../NavigationContainer';
 import { NavigationScrollbars } from '../../NavigationScrollbars';
 import SettingsHeader, { HeaderTitle } from '../../SettingsHeader';
-
-const PORTS: Array<SelectorItem<number>> = [];
-const ALLOWED_RANGE = [1, 65535];
+import { ShadowsocksPortSelector } from './components';
 
 const StyledContent = styled.div({
   display: 'flex',
@@ -28,10 +18,6 @@ const StyledContent = styled.div({
   marginBottom: '2px',
 });
 
-const StyledSelectorContainer = styled.div({
-  flex: 0,
-});
-
 export function ShadowsocksSettingsView() {
   const { pop } = useHistory();
 
@@ -66,64 +52,3 @@ export function ShadowsocksSettingsView() {
     </BackAction>
   );
 }
-
-function ShadowsocksPortSelector() {
-  const { setObfuscationSettings } = useAppContext();
-  const obfuscationSettings = useSelector((state) => state.settings.obfuscationSettings);
-
-  const port =
-    obfuscationSettings.shadowsocksSettings.port === 'any'
-      ? null
-      : obfuscationSettings.shadowsocksSettings.port.only;
-
-  const setShadowsocksPort = useCallback(
-    async (port: number | null) => {
-      await setObfuscationSettings({
-        ...obfuscationSettings,
-        shadowsocksSettings: {
-          ...obfuscationSettings.shadowsocksSettings,
-          port: wrapConstraint(port),
-        },
-      });
-    },
-    [setObfuscationSettings, obfuscationSettings],
-  );
-
-  const parseValue = useCallback((port: string) => parseInt(port), []);
-
-  const validateValue = useCallback(
-    (value: number) => value >= ALLOWED_RANGE[0] && value <= ALLOWED_RANGE[1],
-    [],
-  );
-
-  return (
-    <AriaInputGroup>
-      <StyledSelectorContainer>
-        <SelectorWithCustomItem
-          // TRANSLATORS: The title for the WireGuard port selector.
-          title={messages.pgettext('wireguard-settings-view', 'Port')}
-          items={PORTS}
-          value={port}
-          onSelect={setShadowsocksPort}
-          inputPlaceholder={messages.pgettext('wireguard-settings-view', 'Port')}
-          automaticValue={null}
-          parseValue={parseValue}
-          modifyValue={removeNonNumericCharacters}
-          validateValue={validateValue}
-          maxLength={`${ALLOWED_RANGE[1]}`.length}
-        />
-      </StyledSelectorContainer>
-      <Cell.CellFooter>
-        <AriaDescription>
-          <Cell.CellFooterText>
-            {sprintf(
-              // TRANSLATORS: Text describing the valid port range for a port selector.
-              messages.pgettext('wireguard-settings-view', 'Valid range: %(min)s - %(max)s'),
-              { min: ALLOWED_RANGE[0], max: ALLOWED_RANGE[1] },
-            )}
-          </Cell.CellFooterText>
-        </AriaDescription>
-      </Cell.CellFooter>
-    </AriaInputGroup>
-  );
-}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/components/index.ts
new file mode 100644
index 0000000000..ac69d11d9e
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/components/index.ts
@@ -0,0 +1 @@
+export * from './shadowsocks-port-setting';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/components/shadowsocks-port-setting/ShadowSocksPortSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/components/shadowsocks-port-setting/ShadowSocksPortSetting.tsx
new file mode 100644
index 0000000000..c8f62d2595
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/components/shadowsocks-port-setting/ShadowSocksPortSetting.tsx
@@ -0,0 +1,80 @@
+import { useCallback } from 'react';
+import { sprintf } from 'sprintf-js';
+import styled from 'styled-components';
+
+import { wrapConstraint } from '../../../../../../shared/daemon-rpc-types';
+import { messages } from '../../../../../../shared/gettext';
+import { removeNonNumericCharacters } from '../../../../../../shared/string-helpers';
+import { useAppContext } from '../../../../../context';
+import { useSelector } from '../../../../../redux/store';
+import { AriaDescription, AriaInputGroup } from '../../../../AriaGroup';
+import * as Cell from '../../../../cell';
+import { SelectorItem, SelectorWithCustomItem } from '../../../../cell/Selector';
+
+const PORTS: Array<SelectorItem<number>> = [];
+const ALLOWED_RANGE = [1, 65535];
+
+const StyledSelectorContainer = styled.div({
+  flex: 0,
+});
+
+export function ShadowsocksPortSelector() {
+  const { setObfuscationSettings } = useAppContext();
+  const obfuscationSettings = useSelector((state) => state.settings.obfuscationSettings);
+
+  const port =
+    obfuscationSettings.shadowsocksSettings.port === 'any'
+      ? null
+      : obfuscationSettings.shadowsocksSettings.port.only;
+
+  const setShadowsocksPort = useCallback(
+    async (port: number | null) => {
+      await setObfuscationSettings({
+        ...obfuscationSettings,
+        shadowsocksSettings: {
+          ...obfuscationSettings.shadowsocksSettings,
+          port: wrapConstraint(port),
+        },
+      });
+    },
+    [setObfuscationSettings, obfuscationSettings],
+  );
+
+  const parseValue = useCallback((port: string) => parseInt(port), []);
+
+  const validateValue = useCallback(
+    (value: number) => value >= ALLOWED_RANGE[0] && value <= ALLOWED_RANGE[1],
+    [],
+  );
+
+  return (
+    <AriaInputGroup>
+      <StyledSelectorContainer>
+        <SelectorWithCustomItem
+          // TRANSLATORS: The title for the WireGuard port selector.
+          title={messages.pgettext('wireguard-settings-view', 'Port')}
+          items={PORTS}
+          value={port}
+          onSelect={setShadowsocksPort}
+          inputPlaceholder={messages.pgettext('wireguard-settings-view', 'Port')}
+          automaticValue={null}
+          parseValue={parseValue}
+          modifyValue={removeNonNumericCharacters}
+          validateValue={validateValue}
+          maxLength={`${ALLOWED_RANGE[1]}`.length}
+        />
+      </StyledSelectorContainer>
+      <Cell.CellFooter>
+        <AriaDescription>
+          <Cell.CellFooterText>
+            {sprintf(
+              // TRANSLATORS: Text describing the valid port range for a port selector.
+              messages.pgettext('wireguard-settings-view', 'Valid range: %(min)s - %(max)s'),
+              { min: ALLOWED_RANGE[0], max: ALLOWED_RANGE[1] },
+            )}
+          </Cell.CellFooterText>
+        </AriaDescription>
+      </Cell.CellFooter>
+    </AriaInputGroup>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/components/shadowsocks-port-setting/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/components/shadowsocks-port-setting/index.ts
new file mode 100644
index 0000000000..a7857e9ba5
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/components/shadowsocks-port-setting/index.ts
@@ -0,0 +1 @@
+export * from './ShadowSocksPortSetting';