Refactor use of the active tab host proxy status

mullvad · Jan 30, 2024 · 8fb438b · 8fb438b
1 parent aacbc42
commit 8fb438b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 25 deletions.
diff --git a/src/components/ConnectionDetails/ConnectionDetails.vue b/src/components/ConnectionDetails/ConnectionDetails.vue
@@ -14,7 +14,7 @@ import DnsLeakStatus from '@/components/ConnectionStatus/DnsLeakStatus.vue';
 import { ConnectionKey, defaultConnection } from '@/composables/useConnection';
 import useSocksProxy from '@/composables/useSocksProxy';
 
-const { globalProxyEnabled, customProxyEnabled } = useSocksProxy();
+const { globalProxyEnabled, activeTabProxyEnabled } = useSocksProxy();
 
 const { isLoading, isError, connection } = inject(ConnectionKey, defaultConnection);
 const connected = computed(() => connection.value.isMullvad);
@@ -34,7 +34,7 @@ const connected = computed(() => connection.value.isMullvad);
         <IconLabel text="Checking connection" type="spinner" />
       </p>
 
-      <div v-if="globalProxyEnabled || customProxyEnabled">
+      <div v-if="globalProxyEnabled || activeTabProxyEnabled">
         <p>The connection is set to use a proxy server.</p>
         <p>If you can't load any pages, try disabling the proxy to access the internet directly</p>
         <router-link to="/proxy">
@@ -45,7 +45,7 @@ const connected = computed(() => connection.value.isMullvad);
 
     <div v-else-if="isError">
       <IconLabel text="Couldn't get connection details" type="warning" />
-      <div v-if="globalProxyEnabled || customProxyEnabled">
+      <div v-if="globalProxyEnabled || activeTabProxyEnabled">
         <p>The connection is set to use a proxy server.</p>
         <p>If you can't load any pages, try disabling the proxy to access the internet directly</p>
         <router-link to="/proxy">

diff --git a/src/components/ProxyStatus/ProxyHost.vue b/src/components/ProxyStatus/ProxyHost.vue
@@ -10,20 +10,16 @@ import TitleCategory from '@/components/TitleCategory.vue';
 import useActiveTab from '@/composables/useActiveTab';
 import useConnection from '@/composables/useConnection';
 import useLocations from '@/composables/useLocations';
-// import useSocksProxy from '@/composables/useSocksProxy';
+import useSocksProxy from '@/composables/useSocksProxy';
 import useStore from '@/composables/useStore';
 
 const { connection } = useConnection();
 const { hostProxySelect, toggleLocations } = useLocations();
+const { activeTabProxyEnabled } = useSocksProxy();
 const { customProxiesDetails, customProxies, excludedHosts } = useStore();
-// const { globalProxyEnabled } = useSocksProxy();
 
 const { activeTabHost, activeTab } = useActiveTab();
 
-const isCustomProxy = computed(() =>
-  Object.keys(customProxies.value).includes(activeTabHost.value),
-);
-
 const customTitle = computed(() => `For this website (${activeTabHost.value})`);
 const currentProxyDetails = computed(() => {
   return customProxiesDetails.value[activeTabHost.value];
@@ -45,7 +41,7 @@ const allowProxy = () => {
   excludedHosts.value = excludedHosts.value.filter((excluded) => excluded !== activeTabHost.value);
 };
 
-const handleSetHostProxy = () => {
+const handleHostProxySelect = () => {
   hostProxySelect.value = true;
   toggleLocations();
 };
@@ -55,7 +51,7 @@ const handleSetHostProxy = () => {
 // watchEffect(() => {
 //   let message = '';
 
-//   if (isCustomProxy.value) {
+//   if (activeTabProxyEnabled.value) {
 //     message = `Only this website is configured to use the following proxy.`;
 //   } else if (isExcluded.value) {
 //     message = 'The website is configured to never use a proxy.';
@@ -71,7 +67,7 @@ const handleSetHostProxy = () => {
   <n-card v-if="activeTab" :bordered="false" class="mb-4">
     <div class="flex justify-between">
       <TitleCategory :title="customTitle" />
-      <n-tag v-if="isCustomProxy" round :bordered="false" type="success">
+      <n-tag v-if="activeTabProxyEnabled" round :bordered="false" type="success">
         active
         <template #icon>
           <FeCheck />
@@ -81,7 +77,7 @@ const handleSetHostProxy = () => {
     </div>
 
     <CurrentProxyDetails
-      v-if="isCustomProxy && currentProxyDetails"
+      v-if="activeTabProxyEnabled && currentProxyDetails"
       :proxy-details="currentProxyDetails"
     />
 
@@ -98,12 +94,12 @@ const handleSetHostProxy = () => {
       </Button>
 
       <n-button-group v-else>
-        <Button class="flex items-center justify-center" @click="handleSetHostProxy">
+        <Button class="flex items-center justify-center" @click="handleHostProxySelect">
           Switch location
         </Button>
 
         <Button
-          v-if="isCustomProxy"
+          v-if="activeTabProxyEnabled"
           color="error"
           class="flex items-center justify-center"
           @click="removeCustomProxy"

diff --git a/src/composables/useSocksProxy.ts b/src/composables/useSocksProxy.ts
@@ -8,15 +8,18 @@ import {
 } from '@/helpers/socksProxy.types';
 import getSocksIpForProtocol from './utils/getSocksIpForProtocol';
 
-import useStore from '@/composables/useStore';
+import useActiveTab from '@/composables/useActiveTab';
 import useConnection from '@/composables/useConnection';
+import useStore from '@/composables/useStore';
 
+const { activeTabHost } = useActiveTab();
 const { connection, updateConnection } = useConnection();
-const { customProxyDetails, globalProxyDetails, globalProxy, customProxies, customProxiesDetails } =
-  useStore();
+const { globalProxyDetails, globalProxy, customProxies, customProxiesDetails } = useStore();
 
 const globalProxyEnabled = computed(() => globalProxyDetails.value.socksEnabled);
-const customProxyEnabled = computed(() => customProxyDetails.value.socksEnabled);
+const activeTabProxyEnabled = computed(() =>
+  Object.keys(customProxies.value).includes(activeTabHost.value),
+);
 
 const baseConfig: Partial<ProxyInfo> = {
   port: 1080,
@@ -34,10 +37,6 @@ const toggleGlobalProxy = () => {
   setProxyDetails(globalProxyDetails, !globalProxyDetails.value.socksEnabled);
 };
 
-const toggleCustomProxy = () => {
-  setProxyDetails(customProxyDetails, !customProxyDetails.value.socksEnabled);
-};
-
 const initGlobalProxy = async (
   { hostname, country, city }: Partial<ProxyOperationArgs>,
   protocol: string,
@@ -126,13 +125,12 @@ const setHostProxy = (
 const useSocksProxy = () => {
   return {
     customProxiesDetails,
-    customProxyEnabled,
+    activeTabProxyEnabled,
     globalProxyDetails,
     globalProxyEnabled,
     initGlobalProxy,
     setHostProxy,
     setGlobalProxy,
-    toggleCustomProxy,
     toggleGlobalProxy,
   };
 };