Fix severname history entries and their display

src/components/Location.vue

@@ -25,9 +25,9 @@ const currentOrAllWebsites = computed(() =>
 const setProxy = (
   country: string,
   countryCode: string,
+  city: string,
   hostname: string,
   ipv4_address: string,
-  city?: string,
   port?: number,
 ) => {
   storeSocksProxyUsage({ country, countryCode, city, hostname, ipv4_address });
@@ -43,7 +43,7 @@ const setProxy = (
   }
 };
 
-const clickSocksProxy = (
+const clickServer = (
   country: string,
   countryCode: string,
   city: string,
@@ -54,20 +54,20 @@ const clickSocksProxy = (
   setProxy(country, countryCode, city, hostname, ipv4_address, port);
 };
 
-const clickCountryOrCity = (country: string, city?: string) => {
-  const { ipv4_address, port, hostname, countryCode } = getRandomSocksProxy({
+const clickCountryOrCity = (selectedCountry: string, selectedCity?: string) => {
+  const { country, countryCode, city, hostname, ipv4_address, port } = getRandomSocksProxy({
     socksProxies: proxiesList.value,
-    country,
-    city,
+    country: selectedCountry,
+    city: selectedCity,
   });
 
-  setProxy(country, countryCode, hostname, ipv4_address, city, port);
+  setProxy(country, countryCode, city, hostname, ipv4_address, port);
 };
 
 const selectLocation = (connection: HistoryEntry) => {
   const { country, countryCode, city, hostname, ipv4_address } = connection;
   if (hostname) {
-    clickSocksProxy(country, countryCode, city!, hostname, ipv4_address!);
+    clickServer(country, countryCode, city, hostname, ipv4_address!);
   } else {
     clickCountryOrCity(country, city);
   }
@@ -106,7 +106,7 @@ const selectLocation = (connection: HistoryEntry) => {
                 secondary
                 medium
                 @click="
-                  clickSocksProxy(
+                  clickServer(
                     country,
                     proxy.location.countryCode,
                     city,

src/composables/useProxyHistory/HistoryEntries.types.ts

@@ -1,7 +1,7 @@
 export type HistoryEntryDetails = {
   country: string;
   countryCode: string;
-  city?: string;
+  city: string;
   hostname: string;
   ipv4_address?: string;
 };

src/composables/useProxyHistory/useProxyHistory.ts

@@ -10,7 +10,13 @@ const { historyEntries } = useStore();
 const mostUsed = ref<HistoryEntry[]>([]);
 const mostRecent = ref<HistoryEntry[]>([]);
 
-const storeSocksProxyUsage = ({ country, city, hostname, ipv4_address }: HistoryEntryDetails) => {
+const storeSocksProxyUsage = ({
+  country,
+  countryCode,
+  city,
+  hostname,
+  ipv4_address,
+}: HistoryEntryDetails) => {
   const keys: string[] = [];
   if (country) {
     keys.push(country);
@@ -29,18 +35,19 @@ const storeSocksProxyUsage = ({ country, city, hostname, ipv4_address }: History
 
   data.timestamp = Date.now();
   data.count += 1;
-  data.city = city;
   data.country = country;
+  data.countryCode = countryCode;
+  data.city = city;
   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');
+  const { country, countryCode, city, hostname } = historyEntry;
+  const servername = hostname.split('.relays.mullvad.net')[0];
 
-  return `${city ? city + ', ' + country : country} (${servername})`;
+  return `${city ? city + `, ${countryCode.toUpperCase()}` : country} (${servername})`;
 };
 
 watchEffect(() => {

src/helpers/getRandomSocksProxy.ts

@@ -24,7 +24,16 @@ const getRandomSocksProxy = ({ socksProxies, country, city }: Props) => {
   const index = Math.floor(Math.random() * proxies.length);
   const { hostname, ipv4_address, port, location } = proxies[index];
 
-  return { hostname, ipv4_address, port, countryCode: location.countryCode };
+  const randomSocks = {
+    country: location.country,
+    city: location.city,
+    countryCode: location.countryCode,
+    hostname,
+    ipv4_address,
+    port,
+  };
+
+  return randomSocks;
 };
 
 export default getRandomSocksProxy;