chore: better short code fetching

packages/hoppscotch-app/components/http/Request.vue

@@ -333,40 +333,51 @@ const copyLinkIcon = hasNavigatorShare ? ref("share-2") : ref("copy")
 const shareLink = ref("")
 const shareLinkStatus = ref(t("request.copy_link"))
 const fetchingShareLink = ref(false)
+const shareLinkAvailable = ref(false)
 
 const copyRequest = async () => {
-  shareLink.value = ""
+  if (shareLinkAvailable.value) {
-  fetchingShareLink.value = true
+    copyShareLink(shareLink.value)
-  shareLinkStatus.value = t("state.loading")
+  } else {
-  const request = getRESTRequest()
+    shareLink.value = ""
-  const shortcodeResult = await createShortcode(request)()
+    fetchingShareLink.value = true
-  if (E.isLeft(shortcodeResult)) {
+    shareLinkStatus.value = t("state.loading")
-    $toast.error(`${shortcodeResult.left.error}`)
+    const request = getRESTRequest()
-    shareLink.value = `${t("error.something_went_wrong")}`
+    const shortcodeResult = await createShortcode(request)()
-  } else if (E.isRight(shortcodeResult)) {
+    if (E.isLeft(shortcodeResult)) {
-    shareLink.value = shortcodeResult.right.createShortcode.id
+      $toast.error(`${shortcodeResult.left.error}`)
-    if (navigator.share) {
+      shareLink.value = `${t("error.something_went_wrong")}`
-      const time = new Date().toLocaleTimeString()
+      shareLinkAvailable.value = false
-      const date = new Date().toLocaleDateString()
+    } else if (E.isRight(shortcodeResult)) {
-      navigator
+      shareLink.value = `/${shortcodeResult.right.createShortcode.id}`
-        .share({
+      shareLinkAvailable.value = true
-          title: "Hoppscotch",
+      copyShareLink(shareLink.value)
-          text: `Hoppscotch • Open source API development ecosystem at ${time} on ${date}`,
-          url: `https://hopp.sh/r/${shareLink.value}`,
-        })
-        .then(() => {})
-        .catch(() => {})
-    } else {
-      copyLinkIcon.value = "check"
-      copyToClipboard(`https://hopp.sh/r/${shareLink.value}`)
-      $toast.success(`${t("state.copied_to_clipboard")}`, {
-        icon: "content_paste",
-      })
-      setTimeout(() => (copyLinkIcon.value = "copy"), 2000)
     }
+    fetchingShareLink.value = false
+    shareLinkStatus.value = shareLink.value
+  }
+}
+
+const copyShareLink = (shareLink: string) => {
+  if (navigator.share) {
+    const time = new Date().toLocaleTimeString()
+    const date = new Date().toLocaleDateString()
+    navigator
+      .share({
+        title: "Hoppscotch",
+        text: `Hoppscotch • Open source API development ecosystem at ${time} on ${date}`,
+        url: `https://hopp.sh/r${shareLink}`,
+      })
+      .then(() => {})
+      .catch(() => {})
+  } else {
+    copyLinkIcon.value = "check"
+    copyToClipboard(`https://hopp.sh/r${shareLink}`)
+    $toast.success(`${t("state.copied_to_clipboard")}`, {
+      icon: "content_paste",
+    })
+    setTimeout(() => (copyLinkIcon.value = "copy"), 2000)
   }
-  fetchingShareLink.value = false
-  shareLinkStatus.value = `/${shareLink.value}`
 }
 
 const cycleUpMethod = () => {