From 27ea170d85fb82d0b43e1633816b9d40de180ba0 Mon Sep 17 00:00:00 2001
From: nivedin <nivedinp@gmail.com>
Date: Mon, 13 May 2024 13:39:42 +0530
Subject: [PATCH] refactor: update interceptor section in settings page

---
 .../src/components/settings/Extension.vue     | 32 ------------------
 .../src/components/settings/Proxy.vue         | 33 +++----------------
 .../hoppscotch-common/src/pages/settings.vue  |  1 +
 3 files changed, 6 insertions(+), 60 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/settings/Extension.vue b/packages/hoppscotch-common/src/components/settings/Extension.vue
index 8b8f62e31..b136854eb 100644
--- a/packages/hoppscotch-common/src/components/settings/Extension.vue
+++ b/packages/hoppscotch-common/src/components/settings/Extension.vue
@@ -36,16 +36,6 @@
       />
     </span>
   </div>
-  <div class="space-y-4 py-4">
-    <div class="flex items-center">
-      <HoppSmartToggle
-        :on="extensionEnabled"
-        @change="extensionEnabled = !extensionEnabled"
-      >
-        {{ t("settings.extensions_use_toggle") }}
-      </HoppSmartToggle>
-    </div>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -55,34 +45,12 @@ import IconCheckCircle from "~icons/lucide/check-circle"
 import { useI18n } from "@composables/i18n"
 import { ExtensionInterceptorService } from "~/platform/std/interceptors/extension"
 import { useService } from "dioc/vue"
-import { computed } from "vue"
-import { InterceptorService } from "~/services/interceptor.service"
-import { platform } from "~/platform"
 
 const t = useI18n()
 
-const interceptorService = useService(InterceptorService)
 const extensionService = useService(ExtensionInterceptorService)
 
 const extensionVersion = extensionService.extensionVersion
 const hasChromeExtInstalled = extensionService.chromeExtensionInstalled
 const hasFirefoxExtInstalled = extensionService.firefoxExtensionInstalled
-
-const extensionEnabled = computed({
-  get() {
-    return (
-      interceptorService.currentInterceptorID.value ===
-      extensionService.interceptorID
-    )
-  },
-  set(active) {
-    if (active) {
-      interceptorService.currentInterceptorID.value =
-        extensionService.interceptorID
-    } else {
-      interceptorService.currentInterceptorID.value =
-        platform.interceptors.default
-    }
-  },
-})
 </script>
diff --git a/packages/hoppscotch-common/src/components/settings/Proxy.vue b/packages/hoppscotch-common/src/components/settings/Proxy.vue
index e8c2ddd19..270706b06 100644
--- a/packages/hoppscotch-common/src/components/settings/Proxy.vue
+++ b/packages/hoppscotch-common/src/components/settings/Proxy.vue
@@ -8,16 +8,6 @@
       :label="t('app.proxy_privacy_policy')"
     />.
   </div>
-  <div class="space-y-4 py-4">
-    <div class="flex items-center">
-      <HoppSmartToggle
-        :on="proxyEnabled"
-        @change="proxyEnabled = !proxyEnabled"
-      >
-        {{ t("settings.proxy_use_toggle") }}
-      </HoppSmartToggle>
-    </div>
-  </div>
   <div class="flex items-center space-x-2 py-4">
     <HoppSmartInput
       v-model="PROXY_URL"
@@ -50,7 +40,6 @@ import { computed } from "vue"
 import { useService } from "dioc/vue"
 import { InterceptorService } from "~/services/interceptor.service"
 import { proxyInterceptor } from "~/platform/std/interceptors/proxy"
-import { platform } from "~/platform"
 
 const t = useI18n()
 const toast = useToast()
@@ -59,23 +48,11 @@ const interceptorService = useService(InterceptorService)
 
 const PROXY_URL = useSetting("PROXY_URL")
 
-const proxyEnabled = computed({
-  get() {
-    return (
-      interceptorService.currentInterceptorID.value ===
-      proxyInterceptor.interceptorID
-    )
-  },
-  set(active) {
-    if (active) {
-      interceptorService.currentInterceptorID.value =
-        proxyInterceptor.interceptorID
-    } else {
-      interceptorService.currentInterceptorID.value =
-        platform.interceptors.default
-    }
-  },
-})
+const proxyEnabled = computed(
+  () =>
+    interceptorService.currentInterceptorID.value ===
+    proxyInterceptor.interceptorID
+)
 
 const clearIcon = refAutoReset<typeof IconRotateCCW | typeof IconCheck>(
   IconRotateCCW,
diff --git a/packages/hoppscotch-common/src/pages/settings.vue b/packages/hoppscotch-common/src/pages/settings.vue
index 2285e68f6..dbe043786 100644
--- a/packages/hoppscotch-common/src/pages/settings.vue
+++ b/packages/hoppscotch-common/src/pages/settings.vue
@@ -98,6 +98,7 @@
           </p>
         </div>
         <div class="space-y-8 p-8 md:col-span-2">
+          <AppInterceptor />
           <section v-for="[id, settings] in interceptorsWithSettings" :key="id">
             <h4 class="font-semibold text-secondaryDark">
               {{ settings.entryTitle(t) }}