From 3f35fedd9d52876da3699e78e21d77f9698a3a26 Mon Sep 17 00:00:00 2001
From: Anwarul Islam <anwaarulislaam@gmail.com>
Date: Wed, 10 May 2023 19:46:28 +0600
Subject: [PATCH] fix: tab system breaks when a new tab is created while
 waiting for response in another tab (#3031)

---
 .../components/collections/SaveRequest.vue    |  8 ++--
 .../src/components/http/Request.vue           | 40 +++----------------
 .../src/components/http/Response.vue          |  8 +---
 3 files changed, 10 insertions(+), 46 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/collections/SaveRequest.vue b/packages/hoppscotch-common/src/components/collections/SaveRequest.vue
index db867cbfe9..48e6697e6a 100644
--- a/packages/hoppscotch-common/src/components/collections/SaveRequest.vue
+++ b/packages/hoppscotch-common/src/components/collections/SaveRequest.vue
@@ -136,11 +136,11 @@ const requestName = ref(
 )
 
 watch(
-  () => [currentActiveTab.value.document.request.name, gqlRequestName.value],
+  () => [currentActiveTab.value, gqlRequestName.value],
   () => {
-    if (props.mode === "rest")
-      requestName.value = currentActiveTab.value.document.request.name
-    else requestName.value = gqlRequestName.value
+    if (props.mode === "rest") {
+      requestName.value = currentActiveTab.value?.document.request.name ?? ""
+    } else requestName.value = gqlRequestName.value
   }
 )
 
diff --git a/packages/hoppscotch-common/src/components/http/Request.vue b/packages/hoppscotch-common/src/components/http/Request.vue
index d33740c0ed..a6f8b8e973 100644
--- a/packages/hoppscotch-common/src/components/http/Request.vue
+++ b/packages/hoppscotch-common/src/components/http/Request.vue
@@ -229,11 +229,10 @@ import { useI18n } from "@composables/i18n"
 import { useSetting } from "@composables/settings"
 import { useStreamSubscriber } from "@composables/stream"
 import { useToast } from "@composables/toast"
-import { completePageProgress, startPageProgress } from "@modules/loadingbar"
 import { refAutoReset, useVModel } from "@vueuse/core"
 import * as E from "fp-ts/Either"
 import { isLeft, isRight } from "fp-ts/lib/Either"
-import { computed, ref, watch } from "vue"
+import { computed, onBeforeUnmount, ref } from "vue"
 import { defineActionHandler } from "~/helpers/actions"
 import { runMutation } from "~/helpers/backend/GQLClient"
 import { UpdateRequestDocument } from "~/helpers/backend/graphql"
@@ -311,39 +310,6 @@ const clearAll = ref<any | null>(null)
 const copyRequestAction = ref<any | null>(null)
 const saveRequestAction = ref<any | null>(null)
 
-// Update Nuxt Loading bar
-watch(loading, () => {
-  if (loading.value) {
-    startPageProgress()
-  } else {
-    completePageProgress()
-  }
-})
-
-// TODO: make this oAuthURL() work
-
-// function oAuthURL() {
-//   const auth = useReadonlyStream(props.request.auth$, {
-//     authType: "none",
-//     authActive: true,
-//   })
-
-//   const oauth2Token = pluckRef(auth as Ref<HoppRESTAuthOAuth2>, "token")
-
-//   onBeforeMount(async () => {
-//     try {
-//       const tokenInfo = await oauthRedirect()
-//       if (Object.prototype.hasOwnProperty.call(tokenInfo, "access_token")) {
-//         if (typeof tokenInfo === "object") {
-//           oauth2Token.value = tokenInfo.access_token
-//         }
-//       }
-
-//       // eslint-disable-next-line no-empty
-//     } catch (_) {}
-//   })
-// }
-
 const newSendRequest = async () => {
   if (newEndpoint.value === "" || /^\s+$/.test(newEndpoint.value)) {
     toast.error(`${t("empty.endpoint")}`)
@@ -574,6 +540,10 @@ const saveRequest = () => {
   }
 }
 
+onBeforeUnmount(() => {
+  if (loading.value) cancelRequest()
+})
+
 defineActionHandler("request.send-cancel", () => {
   if (!loading.value) newSendRequest()
   else cancelRequest()
diff --git a/packages/hoppscotch-common/src/components/http/Response.vue b/packages/hoppscotch-common/src/components/http/Response.vue
index 69e47cefdb..12fdbb5d06 100644
--- a/packages/hoppscotch-common/src/components/http/Response.vue
+++ b/packages/hoppscotch-common/src/components/http/Response.vue
@@ -10,8 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from "vue"
-import { startPageProgress, completePageProgress } from "@modules/loadingbar"
+import { computed, ref } from "vue"
 import { HoppRESTTab } from "~/helpers/rest/tab"
 import { useVModel } from "@vueuse/core"
 
@@ -34,9 +33,4 @@ const hasResponse = computed(
 )
 
 const loading = computed(() => tab.value.response?.type === "loading")
-
-watch(loading, (isLoading) => {
-  if (isLoading) startPageProgress()
-  else completePageProgress()
-})
 </script>