Implement search based on @hankolsen previous PR

src/components/Location.test.ts

@@ -13,7 +13,7 @@ jest.mock('@/composables/useActiveTab', () => ({
 jest.mock('@/composables/useSocksProxies/useSocksProxies', () => ({
   __esModule: true,
   default: jest.fn(() => ({
-    proxiesList: [
+    filteredProxies: [
       {
         country: 'Albania',
       },

src/components/Location.vue

@@ -3,18 +3,20 @@ import { computed } from 'vue';
 import { NButton, NCollapse, NCollapseItem, NSpace } from 'naive-ui';
 
 import LocationTabs from '@/components/LocationTabs.vue';
+import SearchLocation from '@/components/SearchLocation.vue';
 
 import getRandomSocksProxy from '@/helpers/getRandomSocksProxy';
 import { updateCurrentTabProxyBadge } from '@/helpers/proxyBadge';
 
-import useListProxies from '@/composables/useSocksProxies/useSocksProxies';
+import useSocksProxies from '@/composables/useSocksProxies/useSocksProxies';
 import useSocksProxy from '@/composables/useSocksProxy';
 import useLocations from '@/composables/useLocations';
 import useProxyHistory from '@/composables/useProxyHistory/useProxyHistory';
 import type { HistoryEntry } from '@/composables/useProxyHistory/HistoryEntries.types';
 
 const { customProxyHost, customProxySelect, toggleLocations } = useLocations();
-const { proxiesList } = useListProxies();
+const { clearFilter, filteredProxies } = useSocksProxies();
+
 const { setCurrentHostProxy, setGlobalProxy } = useSocksProxy();
 const { storeSocksProxyUsage } = useProxyHistory();
 
@@ -54,16 +56,18 @@ const clickServer = (
   port?: number,
 ) => {
   setProxy(country, countryCode, city, hostname, ipv4_address, port);
+  clearFilter();
 };
 
 const clickCountryOrCity = (selectedCountry: string, selectedCity?: string) => {
   const { country, countryCode, city, hostname, ipv4_address, port } = getRandomSocksProxy({
-    socksProxies: proxiesList.value,
+    socksProxies: filteredProxies.value,
     country: selectedCountry,
     city: selectedCity,
   });
 
   setProxy(country, countryCode, city, hostname, ipv4_address, port);
+  clearFilter();
 };
 
 const selectLocation = (connection: HistoryEntry) => {
@@ -77,13 +81,18 @@ const selectLocation = (connection: HistoryEntry) => {
 </script>
 
 <template>
-  <p class="mb-8">
+  <p class="mb-4">
     Select the location where you want to have {{ currentOrAllWebsites }} routed through.
   </p>
   <div>
     <LocationTabs :selectLocation="selectLocation" />
+    <SearchLocation />
     <n-collapse arrow-placement="right">
-      <n-collapse-item v-for="{ country, cities } in proxiesList" :key="country" :name="country">
+      <n-collapse-item
+        v-for="{ country, cities } in filteredProxies"
+        :key="country"
+        :name="country"
+      >
         <template #header>
           <n-button quaternary @click.prevent="clickCountryOrCity(country)">
             {{ country }}

src/components/LocationTabs.vue

@@ -20,7 +20,7 @@ const { mostRecent } = useProxyHistory();
 </script>
 
 <template>
-  <div v-if="mostRecent.length > 0" class="mb-8 tabs-card">
+  <div v-if="mostRecent.length > 0" class="mb-3 tabs-card">
     <n-tabs
       size="large"
       justify-content="space-evenly"

src/components/Proxy/HomeProxyStatus.vue

@@ -9,7 +9,7 @@ import TitleCategory from '@/components/TitleCategory.vue';
 
 import useActiveTab from '@/composables/useActiveTab';
 import { ConnectionKey, defaultConnection } from '@/composables/useConnection';
-import useListProxies from '@/composables/useSocksProxies/useSocksProxies';
+import useSocksProxies from '@/composables/useSocksProxies/useSocksProxies';
 import useLocations from '@/composables/useLocations';
 import useProxyPermissions from '@/composables/useProxyPermissions';
 import useSocksProxy from '@/composables/useSocksProxy';
@@ -29,7 +29,7 @@ const {
   toggleCurrentHostProxy,
   toggleGlobalProxy,
 } = useSocksProxy();
-const { getSocksProxies } = useListProxies();
+const { getSocksProxies } = useSocksProxies();
 const { proxySelect } = useLocations();
 const { connection } = inject(ConnectionKey, defaultConnection);
 

src/components/SearchLocation.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+import { NInput } from 'naive-ui';
+import useSocksProxies from '@/composables/useSocksProxies/useSocksProxies';
+
+const { query } = useSocksProxies();
+</script>
+
+<template>
+  <NInput v-model:value="query" placeholder="Search" clearable class="mb-3" />
+</template>

src/components/__snapshots__/Location.test.ts.snap

@@ -6,12 +6,74 @@ exports[`Location should show two countries 1`] = `
 >
   
   <p
-    class="mb-8"
+    class="mb-4"
   >
      Select the location where you want to have all your browser traffic routed through. 
   </p>
   <div>
     <!--v-if-->
+    <div
+      class="n-input n-input--resizable n-input--stateful mb-3"
+      style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"
+    >
+      <div
+        class="n-input-wrapper"
+      >
+        <!---->
+        <div
+          class="n-input__input"
+        >
+          <input
+            class="n-input__input-el"
+            placeholder="Search"
+            size="20"
+            type="text"
+          />
+          <div
+            class="n-input__placeholder"
+          >
+            <span>
+              Search
+            </span>
+          </div>
+          <!---->
+        </div>
+        <div
+          class="n-input__suffix"
+        >
+          <div
+            class="n-base-clear"
+          >
+            <transition-stub
+              appear="true"
+              css="true"
+              name="icon-switch-transition"
+              persisted="false"
+            >
+              <div
+                class="n-base-clear__placeholder"
+              >
+                <!---->
+              </div>
+            </transition-stub>
+          </div>
+          <!---->
+          <!---->
+          <!---->
+          <!---->
+          <!---->
+        </div>
+      </div>
+      <!---->
+      <!---->
+      <div
+        class="n-input__border"
+      />
+      <div
+        class="n-input__state-border"
+      />
+      <!---->
+    </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;"

src/composables/useSocksProxies/useSocksProxies.ts

@@ -1,23 +1,43 @@
+import { computed, ref } from 'vue';
+
 import { addCountryCode } from '@/composables/useSocksProxies/addCountryCode';
 import { groupByCountryAndCity } from '@/composables/useSocksProxies/groupByCountryAndCity';
-import { SocksProxy } from '@/composables/useSocksProxies/socksProxies.types';
 import { sortProxiesByCountryAndCity } from '@/composables/useSocksProxies/sortProxiesByCountryAndCity';
 
+import { SocksProxy } from '@/composables/useSocksProxies/socksProxies.types';
 import useStore from '@/composables/useStore';
 
-const { proxiesList } = useStore();
+const { flatProxiesList } = useStore();
+
+const query = ref('');
+
+const clearFilter = () => {
+  query.value = '';
+};
+
 const useSocksProxies = () => {
   const getSocksProxies = async () => {
     const response = await fetch('https://api.mullvad.net/network/v1-beta1/socks-proxies');
     const data: SocksProxy[] = await response.json();
 
-    const onlineProxies = data.filter((proxy: SocksProxy) => proxy.online);
-    const proxiesWithCountryCode = addCountryCode(onlineProxies);
-    const groupedProxies = groupByCountryAndCity(proxiesWithCountryCode);
-    proxiesList.value = sortProxiesByCountryAndCity(groupedProxies);
+    flatProxiesList.value = data.filter((proxy: SocksProxy) => proxy.online);
   };
 
-  return { getSocksProxies, proxiesList };
+  const filteredData = computed(() =>
+    flatProxiesList.value.filter(
+      (socksProxy) =>
+        !query.value ||
+        socksProxy.location.country.toLowerCase().includes(query.value.toLowerCase()) ||
+        socksProxy.location.city.toLowerCase().includes(query.value.toLowerCase()) ||
+        socksProxy.hostname.toLowerCase().includes(query.value.toLowerCase()),
+    ),
+  );
+
+  const filteredProxies = computed(() =>
+    sortProxiesByCountryAndCity(groupByCountryAndCity(addCountryCode(filteredData.value))),
+  );
+
+  return { clearFilter, filteredProxies, getSocksProxies, query };
 };
 
 export default useSocksProxies;

src/composables/useStore.ts

@@ -10,40 +10,40 @@ import type {
 import { Tab } from '@/helpers/browserExtension';
 
 import useBrowserStorageLocal from '@/composables/useBrowserStorageLocal';
-import { Country } from '@/composables/useSocksProxies/socksProxies.types';
+import { SocksProxy } from '@/composables/useSocksProxies/socksProxies.types';
 
 export type Store = {
   excludedHosts: Ref<string[]>;
+  flatProxiesList: Ref<SocksProxy[]>;
   hostProxies: Ref<ProxyInfoMap>;
   hostProxiesDetails: Ref<ProxyDetailsMap>;
   globalProxy: Ref<ProxyInfo>;
   globalProxyDetails: Ref<ProxyDetails>;
   historyEntries: Ref<HistoryEntriesMap>;
-  proxiesList: Ref<Country[]>;
   webRTCStatus: Ref<boolean>;
   optionsActiveTab: Ref<Tab>;
 };
 
 const useStore = (): Store => {
   const excludedHosts = useBrowserStorageLocal('excludedHosts', []);
+  const flatProxiesList = useBrowserStorageLocal('flatProxiesList', [] as SocksProxy[]);
   const globalProxy = useBrowserStorageLocal('globalProxy', {} as ProxyInfo);
   const globalProxyDetails = useBrowserStorageLocal('globalProxyDetails', {} as ProxyDetails);
   const hostProxies = useBrowserStorageLocal('hostProxies', {});
   const hostProxiesDetails = useBrowserStorageLocal('hostProxiesDetails', {});
   const historyEntries = useBrowserStorageLocal('historyEntries', {});
-  const proxiesList = useBrowserStorageLocal('proxiesList', [] as Country[]);
   const webRTCStatus = useBrowserStorageLocal('webRTCStatus', true);
   const optionsActiveTab = useBrowserStorageLocal('optionsActiveTab', Tab.SETTINGS);
 
   return {
     excludedHosts,
+    flatProxiesList,
     globalProxy,
     globalProxyDetails,
     hostProxies,
     hostProxiesDetails,
     historyEntries,
     optionsActiveTab,
-    proxiesList,
     webRTCStatus,
   };
 };