Move initGlobalProxy and inject conn to App.vue

mullvad · Dec 4, 2023 · 01f73c4 · 01f73c4
1 parent 0ddb9e3
commit 01f73c4
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 42 deletions.
diff --git a/src/popup/App.vue b/src/popup/App.vue
@@ -1,10 +1,31 @@
 <script lang="ts" setup>
+import { provide, watch } from 'vue';
 import { useQueryProvider } from 'vue-query';
 import { NConfigProvider, GlobalThemeOverrides, darkTheme } from 'naive-ui';
+
 import Popup from '@/popup/Popup.vue';
 
-useQueryProvider();
+import useConnection, { ConnectionKey } from '@/composables/useConnection';
+import useSocksProxy from '@/composables/useSocksProxy';
+
+const { isLoading, connection, isError } = useConnection();
+const { initGlobalProxy } = useSocksProxy();
+
+provide(ConnectionKey, { connection, isLoading, isError });
 
+watch(connection, async () => {
+  // Make sure the proxy always has some value
+  await initGlobalProxy(
+    {
+      hostname: connection.value.server,
+      country: connection.value.country,
+      city: connection.value.city,
+    },
+    connection.value.protocol!,
+  );
+});
+
+useQueryProvider();
 const themeOverrides: GlobalThemeOverrides = {
   common: {
     cardColor: 'rgba(41, 77, 115, 0.5)',
@@ -26,6 +47,7 @@ const themeOverrides: GlobalThemeOverrides = {
   },
 };
 </script>
+
 <template>
   <n-config-provider :theme-overrides="themeOverrides" :theme="darkTheme">
     <Popup />

diff --git a/src/popup/views/Home.vue b/src/popup/views/Home.vue
@@ -1,28 +1,12 @@
 <script lang="ts" setup>
-import { provide, watch } from 'vue';
+import { inject } from 'vue';
 
 import NotificationsCarousel from '@/components/NotificationsCarousel.vue';
 import ConnectionDetails from '@/components/ConnectionDetails/ConnectionDetails.vue';
 
-import useConnection, { ConnectionKey } from '@/composables/useConnection';
-import useSocksProxy from '@/composables/useSocksProxy';
+import { ConnectionKey, defaultConnection } from '@/composables/useConnection';
 
-const { isLoading, connection, isError } = useConnection();
-const { initGlobalProxy } = useSocksProxy();
-
-provide(ConnectionKey, { connection, isLoading, isError });
-
-watch(connection, async () => {
-  // Make sure the proxy always has some value
-  await initGlobalProxy(
-    {
-      hostname: connection.value.server,
-      country: connection.value.country,
-      city: connection.value.city,
-    },
-    connection.value.protocol!,
-  );
-});
+const { isLoading } = inject(ConnectionKey) || defaultConnection;
 </script>
 
 <template>

diff --git a/src/popup/views/Proxy.vue b/src/popup/views/Proxy.vue
@@ -1,34 +1,16 @@
 <script lang="ts" setup>
-import { computed, provide, watch } from 'vue';
+import { inject } from 'vue';
 
 import IconLabel from '@/components/IconLabel.vue';
 import ProxyGlobal from '@/components/ProxyStatus/ProxyGlobal.vue';
 import ProxyHost from '@/components/ProxyStatus/ProxyHost.vue';
 
-import useConnection, { ConnectionKey } from '@/composables/useConnection';
-import useSocksProxy from '@/composables/useSocksProxy';
-
-const { isLoading, connection, isError } = useConnection();
-const { initGlobalProxy } = useSocksProxy();
-
-const connected = computed(() => connection.value.isMullvad);
-
-provide(ConnectionKey, { connection, isLoading, isError });
-watch(connection, async () => {
-  // Make sure the proxy always has some value
-  await initGlobalProxy(
-    {
-      hostname: connection.value.server,
-      country: connection.value.country,
-      city: connection.value.city,
-    },
-    connection.value.protocol!,
-  );
-});
+import { ConnectionKey, defaultConnection } from '@/composables/useConnection';
+const { connection } = inject(ConnectionKey) || defaultConnection;
 </script>
 
 <template>
-  <div v-if="connected">
+  <div v-if="connection.isMullvad">
     <ProxyGlobal />
     <ProxyHost />
   </div>