Separate update of protocol and port

2 files changed, 20 insertions, 33 deletions

diff --git a/gui/src/renderer/components/OpenVpnSettings.tsx b/gui/src/renderer/components/OpenVpnSettings.tsx
index c848f5688b..f3224dc370 100644
--- a/gui/src/renderer/components/OpenVpnSettings.tsx
+++ b/gui/src/renderer/components/OpenVpnSettings.tsx
@@ -125,6 +125,7 @@ export default function OpenVpnSettings() {
 }
 
 function TransportProtocolSelector() {
+  const relaySettingsUpdater = useRelaySettingsUpdater();
   const relaySettings = useSelector((state) => state.settings.relaySettings);
   const bridgeState = useSelector((state) => state.settings.bridgeState);
 
@@ -133,7 +134,15 @@ function TransportProtocolSelector() {
     return protocol === 'any' ? null : protocol;
   }, [relaySettings]);
 
-  const protocolAndPortUpdater = useProtocolAndPortUpdater();
+  const onSelect = useCallback(
+    async (protocol: RelayProtocol | null) => {
+      await relaySettingsUpdater((settings) => {
+        settings.openvpnConstraints.protocol = wrapConstraint(protocol);
+        return settings;
+      });
+    },
+    [relaySettingsUpdater],
+  );
 
   const items: SelectorItem<RelayProtocol>[] = useMemo(
     () => [
@@ -157,7 +166,7 @@ function TransportProtocolSelector() {
           title={messages.pgettext('openvpn-settings-view', 'Transport protocol')}
           items={items}
           value={protocol}
-          onSelect={protocolAndPortUpdater}
+          onSelect={onSelect}
           automaticValue={null}
         />
         {bridgeState === 'on' && (
@@ -181,31 +190,8 @@ function TransportProtocolSelector() {
   );
 }
 
-function useProtocolAndPortUpdater() {
-  const relaySettingsUpdater = useRelaySettingsUpdater();
-
-  const updater = useCallback(
-    async (protocol: RelayProtocol | null, port?: number | null) => {
-      try {
-        await relaySettingsUpdater((settings) => {
-          settings.openvpnConstraints.protocol = wrapConstraint(protocol);
-          if (port) {
-            settings.openvpnConstraints.port = wrapConstraint(port);
-          }
-          return settings;
-        });
-      } catch (e) {
-        const error = e as Error;
-        log.error('Failed to update relay settings', error.message);
-      }
-    },
-    [relaySettingsUpdater],
-  );
-
-  return updater;
-}
-
 function PortSelector() {
+  const relaySettingsUpdater = useRelaySettingsUpdater();
   const relaySettings = useSelector((state) => state.settings.relaySettings);
 
   const protocol = useMemo(() => {
@@ -218,13 +204,14 @@ function PortSelector() {
     return port === 'any' ? null : port;
   }, [relaySettings]);
 
-  const protocolAndPortUpdater = useProtocolAndPortUpdater();
-
   const onSelect = useCallback(
     async (port: number | null) => {
-      await protocolAndPortUpdater(protocol, port);
+      await relaySettingsUpdater((settings) => {
+        settings.openvpnConstraints.port = wrapConstraint(port);
+        return settings;
+      });
     },
-    [protocolAndPortUpdater, protocol],
+    [relaySettingsUpdater],
   );
 
   const portItems = {
diff --git a/gui/src/renderer/lib/constraint-updater.ts b/gui/src/renderer/lib/constraint-updater.ts
index af70237126..054f063465 100644
--- a/gui/src/renderer/lib/constraint-updater.ts
+++ b/gui/src/renderer/lib/constraint-updater.ts
@@ -76,14 +76,14 @@ export function useRelaySettingsModifier() {
 }
 
 export function useRelaySettingsUpdater() {
-  const { setRelaySettings: updateRelaySettings } = useAppContext();
+  const { setRelaySettings } = useAppContext();
   const modifyRelaySettings = useRelaySettingsModifier();
 
   return useCallback(
     async (fn: UpdateFunction) => {
       const modifiedSettings = modifyRelaySettings(fn);
-      await updateRelaySettings({ normal: modifiedSettings });
+      await setRelaySettings({ normal: modifiedSettings });
     },
-    [updateRelaySettings, modifyRelaySettings],
+    [setRelaySettings, modifyRelaySettings],
   );
 }