fix: shortcode data do not fetch or render (#2972)

packages/hoppscotch-common/src/components.d.ts

@@ -115,6 +115,7 @@ declare module '@vue/runtime-core' {
     HttpTestResultReport: typeof import('./components/http/TestResultReport.vue')['default']
     HttpTests: typeof import('./components/http/Tests.vue')['default']
     HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
+    IconLucideAlertTriangle: typeof import('~icons/lucide/alert-triangle')['default']
     IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
     IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
     IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']

packages/hoppscotch-common/src/pages/r/_id.vue

@@ -59,8 +59,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, watch } from "vue"
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import * as E from "fp-ts/Either"
 import { safelyExtractRESTRequest } from "@hoppscotch/data"
@@ -77,71 +77,56 @@ import IconRefreshCW from "~icons/lucide/refresh-cw"
 import { createNewTab } from "~/helpers/rest/tab"
 import { getDefaultRESTRequest } from "~/helpers/rest/default"
 
-export default defineComponent({
-  setup() {
-    const route = useRoute()
-    const router = useRouter()
+const route = useRoute()
+const router = useRouter()
 
-    const t = useI18n()
+const t = useI18n()
 
-    const shortcodeDetails = useGQLQuery<
-      ResolveShortcodeQuery,
-      ResolveShortcodeQueryVariables,
-      ""
-    >({
-      query: ResolveShortcodeDocument,
-      variables: {
-        code: route.params.id as string,
-      },
-    })
+const invalidLink = ref(false)
+const shortcodeID = ref("")
 
-    watch(
-      () => shortcodeDetails.data,
-      () => {
-        if (shortcodeDetails.loading) return
-
-        const data = shortcodeDetails.data
-
-        if (E.isRight(data)) {
-          const request: unknown = JSON.parse(
-            data.right.shortcode?.request as string
-          )
-
-          createNewTab({
-            request: safelyExtractRESTRequest(request, getDefaultRESTRequest()),
-            isDirty: false,
-          })
-
-          router.push({ path: "/" })
-        }
-      }
-    )
-
-    const reloadApplication = () => {
-      window.location.reload()
-    }
-
-    return {
-      E,
-      shortcodeDetails,
-      reloadApplication,
-      t,
-      route,
-      IconHome,
-      IconRefreshCW,
-    }
-  },
-  data() {
-    return {
-      invalidLink: false,
-      shortcodeID: "",
-    }
-  },
-  mounted() {
-    if (typeof this.route.params.id === "string") {
-      this.shortcodeID = this.route.params.id
-    }
-    this.invalidLink = !this.shortcodeID
+const shortcodeDetails = useGQLQuery<
+  ResolveShortcodeQuery,
+  ResolveShortcodeQueryVariables,
+  ""
+>({
+  query: ResolveShortcodeDocument,
+  variables: {
+    code: route.params.id.toString(),
   },
 })
+
+watch(
+  () => shortcodeDetails.data,
+  () => addRequestToTab()
+)
+
+const addRequestToTab = () => {
+  if (shortcodeDetails.loading) return
+
+  const data = shortcodeDetails.data
+
+  if (E.isRight(data)) {
+    const request: unknown = JSON.parse(data.right.shortcode?.request as string)
+
+    createNewTab({
+      request: safelyExtractRESTRequest(request, getDefaultRESTRequest()),
+      isDirty: false,
+    })
+
+    router.push({ path: "/" })
+  }
+}
+
+const reloadApplication = () => {
+  window.location.reload()
+}
+
+onMounted(() => {
+  if (typeof route.params.id === "string") {
+    shortcodeID.value = route.params.id
+    shortcodeDetails.execute()
+  }
+  invalidLink.value = !shortcodeID.value
+})
 </script>