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