From 9e37ed59583fe5e8db91ff576fc9be973223075e Mon Sep 17 00:00:00 2001
From: rui hildt <rui@mullvad.net>
Date: Fri, 2 Feb 2024 23:27:03 +0100
Subject: [PATCH] Fix display of proxy history and improve naming

---
 src/components/Location.vue                   | 10 +--
 src/components/LocationTabs.vue               |  8 +-
 .../MostUsedLocationButtons.test.ts           | 44 ++++++---
 src/components/MostUsedLocationButtons.vue    | 13 +--
 src/components/RecentLocationButtons.vue      | 10 +--
 .../__snapshots__/Location.test.ts.snap       | 89 ++++++++++++++++++-
 .../HistoricConnections.types.ts              | 17 ----
 .../useHistoricConnections.ts                 | 76 ----------------
 .../useProxyHistory/HistoryEntries.types.ts   | 12 +++
 .../useProxyHistory/useProxyHistory.ts        | 63 +++++++++++++
 src/composables/useStore.ts                   |  8 +-
 11 files changed, 219 insertions(+), 131 deletions(-)
 delete mode 100644 src/composables/useHistoricConnections/HistoricConnections.types.ts
 delete mode 100644 src/composables/useHistoricConnections/useHistoricConnections.ts
 create mode 100644 src/composables/useProxyHistory/HistoryEntries.types.ts
 create mode 100644 src/composables/useProxyHistory/useProxyHistory.ts

diff --git a/src/components/Location.vue b/src/components/Location.vue
index acbd90a1..eb9ff3e0 100644
--- a/src/components/Location.vue
+++ b/src/components/Location.vue
@@ -9,14 +9,14 @@ import useListProxies from '@/composables/useListProxies';
 import useSocksProxy from '@/composables/useSocksProxy';
 import useLocations from '@/composables/useLocations';
 import useActiveTab from '@/composables/useActiveTab';
-import useHistoricConnections from '@/composables/useHistoricConnections/useHistoricConnections';
-import type { HistoricConnection } from '@/composables/useHistoricConnections/HistoricConnections.types';
+import useProxyHistory from '@/composables/useProxyHistory/useProxyHistory';
+import type { HistoryEntry } from '@/composables/useProxyHistory/HistoryEntries.types';
 
 const { activeTabHost } = useActiveTab();
 const { hostProxySelect, toggleLocations } = useLocations();
 const { proxiesList } = useListProxies();
 const { setCurrentHostProxy, setGlobalProxy } = useSocksProxy();
-const { storeSocksProxyUsage } = useHistoricConnections();
+const { storeSocksProxyUsage } = useProxyHistory();
 
 const currentOrAllWebsites = computed(() =>
   hostProxySelect.value ? activeTabHost.value : 'all your browser traffic',
@@ -59,10 +59,10 @@ const clickCountryOrCity = (country: string, city?: string) => {
   setProxy(country, hostname, ipv4_address, city, port);
 };
 
-const selectLocation = (connection: HistoricConnection) => {
+const selectLocation = (connection: HistoryEntry) => {
   const { country, city, hostname, ipv4_address } = connection;
   if (hostname) {
-    clickSocksProxy(country, city, hostname, ipv4_address);
+    clickSocksProxy(country, city!, hostname, ipv4_address!);
   } else {
     clickCountryOrCity(country, city);
   }
diff --git a/src/components/LocationTabs.vue b/src/components/LocationTabs.vue
index 66e2644a..9f26c422 100644
--- a/src/components/LocationTabs.vue
+++ b/src/components/LocationTabs.vue
@@ -3,8 +3,8 @@ import { NTabPane, NTabs, TabsProps } from 'naive-ui';
 
 import RecentLocationButtons from '@/components/RecentLocationButtons.vue';
 import MostUsedLocationButtons from '@/components/MostUsedLocationButtons.vue';
-import useHistoricConnections from '@/composables/useHistoricConnections/useHistoricConnections';
-import type { HistoricConnection } from '@/composables/useHistoricConnections/HistoricConnections.types';
+import useProxyHistory from '@/composables/useProxyHistory/useProxyHistory';
+import type { HistoryEntry } from '@/composables/useProxyHistory/HistoryEntries.types';
 
 type TabsThemeOverrides = NonNullable<TabsProps['themeOverrides']>;
 const tabsThemeOverrides: TabsThemeOverrides = {
@@ -14,9 +14,9 @@ const tabsThemeOverrides: TabsThemeOverrides = {
   tabTextColorLine: 'var(--light-grey)',
 };
 
-defineProps<{ selectLocation: (connection: HistoricConnection) => void }>();
+defineProps<{ selectLocation: (connection: HistoryEntry) => void }>();
 
-const { mostRecent } = useHistoricConnections();
+const { mostRecent } = useProxyHistory();
 </script>
 
 <template>
diff --git a/src/components/MostUsedLocationButtons.test.ts b/src/components/MostUsedLocationButtons.test.ts
index 9a6ca14b..08cf44ca 100644
--- a/src/components/MostUsedLocationButtons.test.ts
+++ b/src/components/MostUsedLocationButtons.test.ts
@@ -1,20 +1,26 @@
 import { mount } from '@vue/test-utils';
 import MostUsedLocationButtons from '@/components/MostUsedLocationButtons.vue';
 
-import useHistoricConnections from '@/composables/useHistoricConnections/useHistoricConnections';
+import useProxyHistory from '@/composables/useProxyHistory/useProxyHistory';
 import Button from '@/components/Buttons/Button.vue';
 
-jest.mock('@/composables/useHistoricConnections/useHistoricConnections', () => ({
+jest.mock('@/composables/useProxyHistory/useProxyHistory', () => ({
   __esModule: true,
   default: jest.fn(),
 }));
 
 describe('MostUsedLocationButtons', () => {
   it('should render one button', () => {
-    (useHistoricConnections as jest.Mock).mockReturnValueOnce({
-      mostUsed: [{ country: 'Argentina' }],
+    (useProxyHistory as jest.Mock).mockReturnValueOnce({
+      mostUsed: {
+        value: [{ country: 'Argentina' }],
+      },
+      mostRecent: {
+        value: [{ country: 'Argentina' }],
+      },
       getLabel: ({ country }: { country: string }) => country,
     });
+
     const wrapper = mount(MostUsedLocationButtons, { props: { selectLocation: jest.fn() } });
     const buttons = wrapper.findAllComponents(Button);
 
@@ -25,15 +31,27 @@ describe('MostUsedLocationButtons', () => {
   });
 
   it('should render three buttons', () => {
-    (useHistoricConnections as jest.Mock).mockReturnValueOnce({
-      mostUsed: [
-        { country: 'Sweden' },
-        { country: 'Norway' },
-        { country: 'Iceland' },
-        { country: 'Denmark' },
-        { country: 'France' },
-        { country: 'Spain' },
-      ],
+    (useProxyHistory as jest.Mock).mockReturnValueOnce({
+      mostUsed: {
+        value: [
+          { country: 'Sweden' },
+          { country: 'Norway' },
+          { country: 'Iceland' },
+          { country: 'Denmark' },
+          { country: 'France' },
+          { country: 'Spain' },
+        ],
+      },
+      mostRecent: {
+        value: [
+          { country: 'Sweden' },
+          { country: 'Norway' },
+          { country: 'Iceland' },
+          { country: 'Denmark' },
+          { country: 'France' },
+          { country: 'Spain' },
+        ],
+      },
       getLabel: ({ country }: { country: string }) => country,
     });
     const wrapper = mount(MostUsedLocationButtons, { props: { selectLocation: jest.fn() } });
diff --git a/src/components/MostUsedLocationButtons.vue b/src/components/MostUsedLocationButtons.vue
index c00aacdb..cfef8b78 100644
--- a/src/components/MostUsedLocationButtons.vue
+++ b/src/components/MostUsedLocationButtons.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import Button from '@/components/Buttons/Button.vue';
-import useHistoricConnections from '@/composables/useHistoricConnections/useHistoricConnections';
-import type { HistoricConnection } from '@/composables/useHistoricConnections/HistoricConnections.types';
+import useProxyHistory from '@/composables/useProxyHistory/useProxyHistory';
+import type { HistoryEntry } from '@/composables/useProxyHistory/HistoryEntries.types';
 
-defineProps<{ selectLocation: (connection: HistoricConnection) => void }>();
+defineProps<{ selectLocation: (connection: HistoryEntry) => void }>();
 
-const { mostUsed, getLabel } = useHistoricConnections();
+const { mostUsed, getLabel } = useProxyHistory();
 
-const buttons = mostUsed.slice(0, 3).map((connection) => {
+const buttons = mostUsed.value.slice(0, 3).map((connection: HistoryEntry) => {
   const label = getLabel(connection);
   return {
     label,
@@ -23,7 +23,8 @@ const buttons = mostUsed.slice(0, 3).map((connection) => {
       :key="label"
       class="block"
       @click="selectLocation(connection)"
-      >{{ label }}</Button
     >
+      {{ label }}
+    </Button>
   </div>
 </template>
diff --git a/src/components/RecentLocationButtons.vue b/src/components/RecentLocationButtons.vue
index 2b27ab91..24350c98 100644
--- a/src/components/RecentLocationButtons.vue
+++ b/src/components/RecentLocationButtons.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import Button from '@/components/Buttons/Button.vue';
-import useHistoricConnections from '@/composables/useHistoricConnections/useHistoricConnections';
-import type { HistoricConnection } from '@/composables/useHistoricConnections/HistoricConnections.types';
+import useProxyHistory from '@/composables/useProxyHistory/useProxyHistory';
+import type { HistoryEntry } from '@/composables/useProxyHistory/HistoryEntries.types';
 
-defineProps<{ selectLocation: (connection: HistoricConnection) => void }>();
+defineProps<{ selectLocation: (connection: HistoryEntry) => void }>();
 
-const { mostRecent, getLabel } = useHistoricConnections();
+const { mostRecent, getLabel } = useProxyHistory();
 
-const buttons = mostRecent.slice(0, 3).map((connection) => {
+const buttons = mostRecent.value.slice(0, 3).map((connection: HistoryEntry) => {
   const label = getLabel(connection);
   return {
     label,
diff --git a/src/components/__snapshots__/Location.test.ts.snap b/src/components/__snapshots__/Location.test.ts.snap
index 0fc7e301..efe30b8a 100644
--- a/src/components/__snapshots__/Location.test.ts.snap
+++ b/src/components/__snapshots__/Location.test.ts.snap
@@ -11,7 +11,94 @@ exports[`Location should show two countries 1`] = `
      Select the location where you want to have all your browser traffic routed through. 
   </p>
   <div>
-    <!--v-if-->
+    <div
+      class="mb-8 tabs-card"
+    >
+      <div
+        class="n-tabs n-tabs--line-type n-tabs--large-size n-tabs--flex n-tabs--top"
+        style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-segment: rgb(247, 247, 250); --n-bar-color: #fff; --n-tab-font-size: 16px; --n-tab-text-color: var(--light-grey); --n-tab-text-color-active: #fff; --n-tab-text-color-disabled: rgba(194, 194, 194, 1); --n-tab-text-color-hover: #fff; --n-pane-text-color: rgb(51, 54, 57); --n-tab-border-color: rgb(239, 239, 245); --n-tab-border-radius: 3px; --n-close-size: 18px; --n-close-icon-size: 14px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-border-radius: 3px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-tab-color: rgb(247, 247, 250); --n-tab-font-weight: 400; --n-tab-font-weight-active: 400; --n-tab-padding: 14px 0; --n-tab-padding-vertical: 10px 20px; --n-tab-gap: 36px; --n-tab-gap-vertical: 8px; --n-pane-padding-left: 0; --n-pane-padding-right: 0; --n-pane-padding-top: 16px; --n-pane-padding-bottom: 0; --n-font-weight-strong: 500; --n-tab-color-segment: #FFF;"
+      >
+        <div
+          class="n-tabs-nav--line-type n-tabs-nav--top n-tabs-nav"
+        >
+          <!---->
+          
+          <div
+            class="n-tabs-nav-scroll-wrapper"
+          >
+            <div
+              class="v-x-scroll"
+            >
+              <div
+                class="n-tabs-nav-scroll-content"
+              >
+                <div
+                  class="n-tabs-wrapper"
+                  style="display: flex; justify-content: space-evenly;"
+                >
+                  <!---->
+                  
+                  <div
+                    class="n-tabs-tab-wrapper"
+                  >
+                    <!---->
+                    <div
+                      class="n-tabs-tab n-tabs-tab--active"
+                      data-name="mostUsed"
+                    >
+                      <span
+                        class="n-tabs-tab__label"
+                      >
+                        Frequent Locations
+                      </span>
+                      <!---->
+                    </div>
+                  </div>
+                  <div
+                    class="n-tabs-tab-wrapper"
+                  >
+                    <!---->
+                    <div
+                      class="n-tabs-tab"
+                      data-name="recent"
+                    >
+                      <span
+                        class="n-tabs-tab__label"
+                      >
+                        Recent Locations
+                      </span>
+                      <!---->
+                    </div>
+                  </div>
+                  
+                  <!---->
+                  <!---->
+                </div>
+                <!---->
+                <div
+                  class="n-tabs-bar"
+                />
+              </div>
+            </div>
+          </div>
+          
+          <!---->
+          <!---->
+        </div>
+        
+        <div
+          class="n-tab-pane"
+        >
+          <div
+            class="space-y-2"
+          >
+            
+            
+          </div>
+        </div>
+        
+      </div>
+    </div>
     <div
       class="n-collapse"
       style="--n-font-size: 14px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgb(51, 54, 57); --n-divider-color: rgb(239, 239, 245); --n-title-padding: 16px 0 0 0; --n-title-font-size: 14px; --n-title-text-color: rgb(31, 34, 37); --n-title-text-color-disabled: rgba(194, 194, 194, 1); --n-title-font-weight: 400; --n-arrow-color: rgb(51, 54, 57); --n-arrow-color-disabled: rgba(194, 194, 194, 1); --n-item-margin: 16px 0 0 0;"
diff --git a/src/composables/useHistoricConnections/HistoricConnections.types.ts b/src/composables/useHistoricConnections/HistoricConnections.types.ts
deleted file mode 100644
index 75339615..00000000
--- a/src/composables/useHistoricConnections/HistoricConnections.types.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export type HistoricConnection = {
-  country: string;
-  city: string;
-  hostname: string;
-  ipv4_address: string;
-  count: number;
-  timestamp: number;
-};
-
-export type HistoricConnectionsMap = { [key: string]: { count: number; timestamp: number } };
-
-export type StoreSocksProxyUsageProps = {
-  country?: string;
-  city?: string;
-  hostname?: string;
-  ipv4_address?: string;
-};
diff --git a/src/composables/useHistoricConnections/useHistoricConnections.ts b/src/composables/useHistoricConnections/useHistoricConnections.ts
deleted file mode 100644
index 0bc2241c..00000000
--- a/src/composables/useHistoricConnections/useHistoricConnections.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { watchEffect } from 'vue';
-import useStore from '../useStore';
-import type {
-  HistoricConnection,
-  StoreSocksProxyUsageProps,
-} from '@/composables/useHistoricConnections/HistoricConnections.types';
-
-const { historicConnections } = useStore();
-
-const storeSocksProxyUsage = ({
-  country,
-  city,
-  hostname,
-  ipv4_address,
-}: StoreSocksProxyUsageProps) => {
-  const keys: string[] = [];
-  if (country) {
-    keys.push(country);
-  }
-  if (city) {
-    keys.push(city);
-  }
-  if (hostname) {
-    keys.push(hostname);
-  }
-  if (ipv4_address) {
-    keys.push(ipv4_address);
-  }
-  const key = keys.join(',');
-  const data = historicConnections.value[key] ?? { count: 0 };
-  data.timestamp = Date.now();
-  data.count += 1;
-  historicConnections.value[key] = data;
-};
-
-const getLabel = (latest: HistoricConnection) => {
-  const { country, city, hostname } = latest;
-  if (hostname) {
-    const [servername] = hostname.split('.socks5.mullvad.net');
-    return `${city} (${servername})`;
-  }
-  if (city) {
-    return city;
-  }
-  return country;
-};
-
-let sortedByUsageConnections: HistoricConnection[] = [];
-
-let sortedByRecentConnections: HistoricConnection[];
-
-watchEffect(() => {
-  sortedByUsageConnections = Object.entries(historicConnections.value)
-    .map(([key, { count, timestamp }]) => {
-      const [country, city, hostname, ipv4_address] = key.split(',');
-      return { country, city, hostname, ipv4_address, count, timestamp };
-    })
-    .sort((a, b) => b.count - a.count || b.timestamp - a.timestamp);
-
-  if (sortedByUsageConnections.length) {
-    sortedByRecentConnections = [...sortedByUsageConnections].sort(
-      (a, b) => b.timestamp - a.timestamp,
-    );
-  }
-});
-
-const useHistoricConnections = () => {
-  return {
-    storeSocksProxyUsage,
-    mostUsed: sortedByUsageConnections,
-    mostRecent: sortedByRecentConnections,
-    getLabel,
-  };
-};
-
-export default useHistoricConnections;
diff --git a/src/composables/useProxyHistory/HistoryEntries.types.ts b/src/composables/useProxyHistory/HistoryEntries.types.ts
new file mode 100644
index 00000000..ab4607e2
--- /dev/null
+++ b/src/composables/useProxyHistory/HistoryEntries.types.ts
@@ -0,0 +1,12 @@
+export type HistoryEntryDetails = {
+  country: string;
+  city?: string;
+  hostname: string;
+  ipv4_address?: string;
+};
+
+export type HistoryEntry = { count: number; timestamp: number } & HistoryEntryDetails;
+
+export type HistoryEntriesMap = {
+  [key: string]: HistoryEntry;
+};
diff --git a/src/composables/useProxyHistory/useProxyHistory.ts b/src/composables/useProxyHistory/useProxyHistory.ts
new file mode 100644
index 00000000..5463eb8e
--- /dev/null
+++ b/src/composables/useProxyHistory/useProxyHistory.ts
@@ -0,0 +1,63 @@
+import { ref, watchEffect } from 'vue';
+import useStore from '../useStore';
+import type {
+  HistoryEntry,
+  HistoryEntryDetails,
+} from '@/composables/useProxyHistory/HistoryEntries.types';
+
+const { historyEntries } = useStore();
+
+const mostUsed = ref<HistoryEntry[]>([]);
+const mostRecent = ref<HistoryEntry[]>([]);
+
+const storeSocksProxyUsage = ({ country, city, hostname, ipv4_address }: HistoryEntryDetails) => {
+  const keys: string[] = [];
+  if (country) {
+    keys.push(country);
+  }
+  if (city) {
+    keys.push(city);
+  }
+  if (hostname) {
+    keys.push(hostname);
+  }
+  if (ipv4_address) {
+    keys.push(ipv4_address);
+  }
+  const key = keys.join(',');
+  const data = historyEntries.value[key] ?? { count: 0 };
+
+  data.timestamp = Date.now();
+  data.count += 1;
+  data.city = city;
+  data.country = country;
+  data.hostname = hostname;
+  data.ipv4_address = ipv4_address;
+  historyEntries.value[key] = data;
+};
+
+const getLabel = (historyEntry: HistoryEntry) => {
+  const { country, city, hostname } = historyEntry;
+  const servername = hostname.split('.relays.mullvad.net');
+
+  return `${city ? city + ', ' + country : country} (${servername})`;
+};
+
+watchEffect(() => {
+  mostUsed.value = Object.values(historyEntries.value).sort((a, b) => b.count - a.count);
+
+  if (mostUsed.value) {
+    mostRecent.value = [...mostUsed.value].sort((a, b) => b.timestamp - a.timestamp);
+  }
+});
+
+const useProxyHistory = () => {
+  return {
+    storeSocksProxyUsage,
+    mostUsed,
+    mostRecent,
+    getLabel,
+  };
+};
+
+export default useProxyHistory;
diff --git a/src/composables/useStore.ts b/src/composables/useStore.ts
index ba42d8d9..ad373f8c 100644
--- a/src/composables/useStore.ts
+++ b/src/composables/useStore.ts
@@ -2,7 +2,7 @@ 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 type { HistoryEntriesMap } from './useProxyHistory/HistoryEntries.types';
 import { Country } from './useListProxies';
 
 export type Store = {
@@ -11,7 +11,7 @@ export type Store = {
   hostProxiesDetails: Ref<ProxyDetailsMap>;
   globalProxy: Ref<ProxyInfo>;
   globalProxyDetails: Ref<ProxyDetails>; // TODO make sure it always come from the socks-proxies server info
-  historicConnections: Ref<HistoricConnectionsMap>;
+  historyEntries: Ref<HistoryEntriesMap>;
   mullvadAccount: Ref<string>;
   proxiesList: Ref<Country[]>;
   randomProxyActive: Ref<boolean>;
@@ -24,7 +24,7 @@ const useStore = (): Store => {
   const globalProxyDetails = useBrowserStorageLocal('globalProxyDetails', { socksEnabled: false });
   const hostProxies = useBrowserStorageLocal('hostProxies', {});
   const hostProxiesDetails = useBrowserStorageLocal('hostProxiesDetails', {});
-  const historicConnections = useBrowserStorageLocal('connections', {});
+  const historyEntries = useBrowserStorageLocal('historyEntries', {});
   const mullvadAccount = useBrowserStorageLocal('mullvadAccount', '');
   const proxiesList = useBrowserStorageLocal('proxiesList', [] as Country[]);
   const randomProxyActive = useBrowserStorageLocal('randomProxyActive', false);
@@ -35,7 +35,7 @@ const useStore = (): Store => {
     globalProxyDetails,
     hostProxies,
     hostProxiesDetails,
-    historicConnections,
+    historyEntries,
     mullvadAccount,
     proxiesList,
     randomProxyActive,