Store the proxies in storage, update on popup open

mullvad · Dec 7, 2023 · 885809a · 885809a
1 parent b1b5a2b
commit 885809a
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 101 deletions.
diff --git a/src/components/Location.test.ts b/src/components/Location.test.ts
@@ -9,26 +9,8 @@ jest.mock('@/composables/useListProxies', () => ({
   default: jest.fn(),
 }));
 
-jest.mock('@/composables/useSocksProxy', () => ({
-  __esModule: true,
-  default: () => ({ connectToSocksProxy: jest.fn() }),
-}));
-
+// TODO Fix this test
 describe('Location', () => {
-  it('should show a loading message', () => {
-    (useListProxies as jest.Mock).mockReturnValueOnce({ isLoading: true });
-    const wrapper = mount(Location);
-    expect(wrapper.text()).toMatch(/loading/i);
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
-  it('should show an error message', () => {
-    (useListProxies as jest.Mock).mockReturnValueOnce({ isError: true, error: 'Network error' });
-    const wrapper = mount(Location);
-    expect(wrapper.text()).toMatch(/network error/i);
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
   it('should show two countries', () => {
     (useListProxies as jest.Mock).mockReturnValueOnce({
       data: [{ country: 'Australia' }, { country: 'Austria' }],

diff --git a/src/components/Location.vue b/src/components/Location.vue
@@ -3,7 +3,6 @@ import { computed } from 'vue';
 import { NButton, NCollapse, NCollapseItem, NSpace } from 'naive-ui';
 
 import getRandomSocksProxy from '@/helpers/getRandomSocksProxy';
-import IconLabel from '@/components/IconLabel.vue';
 import LocationTabs from '@/components/LocationTabs.vue';
 
 import useListProxies from '@/composables/useListProxies';
@@ -15,7 +14,7 @@ import type { HistoricConnection } from '@/composables/useHistoricConnections/Hi
 
 const { activeTabHost } = useActiveTab();
 const { toggleLocations } = useLocations();
-const { data: socksProxies, isLoading, isError, error } = useListProxies();
+const { proxiesList } = useListProxies();
 const { setCustomProxy, setGlobalProxy } = useSocksProxy();
 const { storeSocksProxyUsage } = useHistoricConnections();
 
@@ -59,7 +58,7 @@ const clickSocksProxy = (
 
 const clickCountryOrCity = (country: string, city?: string) => {
   const { ipv4_address, port, hostname } = getRandomSocksProxy({
-    socksProxies: socksProxies.value,
+    socksProxies: proxiesList.value,
     country,
     city,
   });
@@ -81,14 +80,10 @@ const selectLocation = (connection: HistoricConnection) => {
   <p class="mb-8">
     Select the location where you want to have {{ currentOrAllWebsites }} routed through.
   </p>
-  <p v-if="isLoading" class="text-lg flex items-center">
-    <IconLabel text="Loading proxy servers list" type="spinner" />
-  </p>
-  <p v-else-if="isError">{{ error }}</p>
-  <div v-else>
+  <div>
     <LocationTabs :selectLocation="selectLocation" />
     <n-collapse arrow-placement="right">
-      <n-collapse-item v-for="{ country, cities } in socksProxies" :key="country" :name="country">
+      <n-collapse-item v-for="{ country, cities } in proxiesList" :key="country" :name="country">
         <template #header>
           <n-button quaternary @click.prevent="clickCountryOrCity(country)">
             {{ country }}

diff --git a/src/components/__snapshots__/Location.test.ts.snap b/src/components/__snapshots__/Location.test.ts.snap
@@ -1,74 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Location should show a loading message 1`] = `
-<div
-  data-v-app=""
->
-  
-  <p
-    class="mb-8"
-  >
-     Select the location where you want to have all your browser traffic routed through. 
-  </p>
-  <p
-    class="text-lg flex items-center"
-  >
-    <span>
-      <i
-        class="mr-2 n-icon"
-        role="img"
-        style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 25px;"
-      >
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <svg
-          class="text-info"
-          height="1em"
-          stroke="#ffffff"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <g
-            class="spinner"
-          >
-            <circle
-              cx="12"
-              cy="12"
-              fill="none"
-              r="9.5"
-              stroke-width="2"
-            />
-          </g>
-        </svg>
-        <!--v-if-->
-      </i>
-       Loading proxy servers list
-    </span>
-  </p>
-  
-</div>
-`;
-
-exports[`Location should show an error message 1`] = `
-<div
-  data-v-app=""
->
-  
-  <p
-    class="mb-8"
-  >
-     Select the location where you want to have all your browser traffic routed through. 
-  </p>
-  <p>
-    Network error
-  </p>
-  
-</div>
-`;
-
 exports[`Location should show two countries 1`] = `
 <div
   data-v-app=""

diff --git a/src/composables/useListProxies.ts b/src/composables/useListProxies.ts
@@ -1,5 +1,7 @@
-import axios, { AxiosError } from 'axios';
-import { useQuery } from 'vue-query';
+import axios from 'axios';
+import useStore from './useStore';
+
+const { proxiesList } = useStore();
 
 export type Location = {
   city: string;
@@ -71,10 +73,10 @@ const useListProxies = () => {
       'https://api.mullvad.net/network/v1-beta1/socks-proxies',
     );
     const grouped = groupByCountryAndCity(data);
-    return sortProxiesByCountryAndCity(grouped);
+    proxiesList.value = sortProxiesByCountryAndCity(grouped);
   };
 
-  return useQuery<Country[], AxiosError>('socksProxies', getSocksProxies);
+  return { getSocksProxies, proxiesList };
 };
 
 export default useListProxies;
diff --git a/src/composables/useStore.ts b/src/composables/useStore.ts
@@ -3,9 +3,11 @@ import { Ref } from 'vue';
 import { ProxyDetails, ProxyInfoMap, ProxyInfo, ProxyDetailsMap } from '@/helpers/socksProxy.types';
 import useBrowserStorageLocal from '@/composables/useBrowserStorageLocal';
 import type { HistoricConnectionsMap } from './useHistoricConnections/HistoricConnections.types';
+import { Country } from './useListProxies';
 
 export type Store = {
   customProxies: Ref<ProxyInfoMap>;
+  proxiesList: Ref<Country[]>;
   customProxiesDetails: Ref<ProxyDetailsMap>;
   excludedHosts: Ref<string[]>;
   globalProxy: Ref<ProxyInfo>;
@@ -23,6 +25,7 @@ const useStore = (): Store => {
   const globalProxy = useBrowserStorageLocal('globalProxy', {} as ProxyInfo);
   const globalProxyDetails = useBrowserStorageLocal('globalProxyDetails', { socksEnabled: false });
   const historicConnections = useBrowserStorageLocal('connections', {});
+  const proxiesList = useBrowserStorageLocal('proxiesList', [] as Country[]);
   const mullvadAccount = useBrowserStorageLocal('mullvadAccount', '');
   const randomProxyActive = useBrowserStorageLocal('randomProxyActive', false);
   const webRTCStatus = useBrowserStorageLocal('webRTCStatus', true);
@@ -33,6 +36,7 @@ const useStore = (): Store => {
     globalProxy,
     globalProxyDetails,
     historicConnections,
+    proxiesList,
     mullvadAccount,
     randomProxyActive,
     webRTCStatus,

diff --git a/src/popup/App.vue b/src/popup/App.vue
@@ -7,9 +7,11 @@ import Popup from '@/popup/Popup.vue';
 
 import useConnection, { ConnectionKey } from '@/composables/useConnection';
 import useSocksProxy from '@/composables/useSocksProxy';
+import useListProxies from '@/composables/useListProxies';
 
 const { isLoading, connection, isError } = useConnection();
 const { initGlobalProxy } = useSocksProxy();
+const { getSocksProxies } = useListProxies();
 
 provide(ConnectionKey, { connection, isLoading, isError });
 
@@ -23,6 +25,8 @@ watch(connection, async () => {
     },
     connection.value.protocol!,
   );
+
+  await getSocksProxies();
 });
 
 useQueryProvider();