Refactoring Lenses Using Vue Composables (#1995)

packages/hoppscotch-app/helpers/lenses/composables/useCopyResponse.ts

@@ -0,0 +1,24 @@
+import { Ref, ref } from "@nuxtjs/composition-api"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+import { useI18n, useToast } from "~/helpers/utils/composables"
+
+export default function useCopyResponse(responseBodyText: Ref<any>): {
+  copyIcon: Ref<string>
+  copyResponse: () => void
+} {
+  const toast = useToast()
+  const t = useI18n()
+  const copyIcon = ref("copy")
+
+  const copyResponse = () => {
+    copyToClipboard(responseBodyText.value)
+    copyIcon.value = "check"
+    toast.success(`${t("state.copied_to_clipboard")}`)
+    setTimeout(() => (copyIcon.value = "copy"), 1000)
+  }
+
+  return {
+    copyIcon,
+    copyResponse,
+  }
+}

packages/hoppscotch-app/helpers/lenses/composables/useDownloadResponse.ts

@@ -0,0 +1,39 @@
+import { Ref, ref } from "@nuxtjs/composition-api"
+import { useI18n, useToast } from "~/helpers/utils/composables"
+
+export type downloadResponseReturnType = (() => void) | Ref<any>
+
+export default function useDownloadResponse(
+  contentType: string,
+  responseBodyText: Ref<string>
+): {
+  downloadIcon: Ref<string>
+  downloadResponse: () => void
+} {
+  const downloadIcon = ref("download")
+  const toast = useToast()
+  const t = useI18n()
+
+  const downloadResponse = () => {
+    const dataToWrite = responseBodyText.value
+    const file = new Blob([dataToWrite], { type: contentType })
+    const a = document.createElement("a")
+    const url = URL.createObjectURL(file)
+    a.href = url
+    // TODO get uri from meta
+    a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
+    document.body.appendChild(a)
+    a.click()
+    downloadIcon.value = "check"
+    toast.success(`${t("state.download_started")}`)
+    setTimeout(() => {
+      document.body.removeChild(a)
+      URL.revokeObjectURL(url)
+      downloadIcon.value = "download"
+    }, 1000)
+  }
+  return {
+    downloadIcon,
+    downloadResponse,
+  }
+}

packages/hoppscotch-app/helpers/lenses/composables/usePreview.ts

@@ -0,0 +1,39 @@
+import { ref, Ref } from "@nuxtjs/composition-api"
+
+export default function usePreview(
+  previewEnabledDefault: boolean,
+  responseBodyText: Ref<string>
+): {
+  previewFrame: any
+  previewEnabled: Ref<boolean>
+  togglePreview: () => void
+} {
+  const previewFrame = ref<any | null>(null)
+  const previewEnabled = ref(previewEnabledDefault)
+  const url = ref("")
+
+  const togglePreview = () => {
+    previewEnabled.value = !previewEnabled.value
+    if (previewEnabled.value) {
+      if (previewFrame.value.getAttribute("data-previewing-url") === url.value)
+        return
+      // Use DOMParser to parse document HTML.
+      const previewDocument = new DOMParser().parseFromString(
+        responseBodyText.value,
+        "text/html"
+      )
+      // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
+      previewDocument.head.innerHTML =
+        `<base href="${url.value}">` + previewDocument.head.innerHTML
+      // Finally, set the iframe source to the resulting HTML.
+      previewFrame.value.srcdoc = previewDocument.documentElement.outerHTML
+      previewFrame.value.setAttribute("data-previewing-url", url.value)
+    }
+  }
+
+  return {
+    previewFrame,
+    previewEnabled,
+    togglePreview,
+  }
+}

packages/hoppscotch-app/helpers/lenses/composables/useResponseBody.ts

@@ -0,0 +1,25 @@
+import { computed, ComputedRef } from "@nuxtjs/composition-api"
+import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
+
+export default function useResponseBody(response: HoppRESTResponse): {
+  responseBodyText: ComputedRef<string>
+} {
+  const responseBodyText = computed(() => {
+    if (
+      response.type === "loading" ||
+      response.type === "network_fail" ||
+      response.type === "script_fail" ||
+      response.type === "fail"
+    )
+      return ""
+    if (typeof response.body === "string") return response.body
+    else {
+      const res = new TextDecoder("utf-8").decode(response.body)
+      // HACK: Temporary trailing null character issue from the extension fix
+      return res.replace(/\0+$/, "")
+    }
+  })
+  return {
+    responseBodyText,
+  }
+}

packages/hoppscotch-app/helpers/lenses/lenses.ts

@@ -16,7 +16,13 @@ export const lenses: Lens[] = [jsonLens, imageLens, htmlLens, xmlLens, rawLens]
 
 export function getSuitableLenses(response: HoppRESTResponse): Lens[] {
   // return empty array if response is loading or error
-  if (response.type === "loading" || response.type === "network_fail") return []
+  if (
+    response.type === "loading" ||
+    response.type === "network_fail" ||
+    response.type === "script_fail" ||
+    response.type === "fail"
+  )
+    return []
 
   const contentType = response.headers.find((h) => h.key === "content-type")