Refactoring Lenses Using Vue Composables (#1995)

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

@@ -145,7 +145,8 @@ const statusCategory = computed(() => {
   if (
     props.response.type === "loading" ||
     props.response.type === "network_fail" ||
-    props.response.type === "script_fail"
+    props.response.type === "script_fail" ||
+    props.response.type === "fail"
   )
     return {
       name: "error",

packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue

@@ -55,11 +55,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, reactive } from "@nuxtjs/composition-api"
+import { ref, reactive } from "@nuxtjs/composition-api"
+import usePreview from "~/helpers/lenses/composables/usePreview"
+import useResponseBody from "~/helpers/lenses/composables/useResponseBody"
+import useDownloadResponse from "~/helpers/lenses/composables/useDownloadResponse"
+import useCopyResponse from "~/helpers/lenses/composables/useCopyResponse"
 import { useCodemirror } from "~/helpers/editor/codemirror"
-import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
-import { useI18n, useToast } from "~/helpers/utils/composables"
+import { useI18n } from "~/helpers/utils/composables"
 
 const t = useI18n()
 
@@ -67,31 +70,20 @@ const props = defineProps<{
   response: HoppRESTResponse
 }>()
 
-const toast = useToast()
-
-const responseBodyText = computed(() => {
-  if (
-    props.response.type === "loading" ||
-    props.response.type === "network_fail"
-  )
-    return ""
-  if (typeof props.response.body === "string") return props.response.body
-  else {
-    const res = new TextDecoder("utf-8").decode(props.response.body)
-    // HACK: Temporary trailing null character issue from the extension fix
-    return res.replace(/\0+$/, "")
-  }
-})
-
-const downloadIcon = ref("download")
-const copyIcon = ref("copy")
-const previewEnabled = ref(false)
-const previewFrame = ref<any | null>(null)
-const url = ref("")
-
 const htmlResponse = ref<any | null>(null)
 const linewrapEnabled = ref(true)
 
+const { responseBodyText } = useResponseBody(props.response)
+const { downloadIcon, downloadResponse } = useDownloadResponse(
+  "text/html",
+  responseBodyText
+)
+const { previewFrame, previewEnabled, togglePreview } = usePreview(
+  false,
+  responseBodyText
+)
+const { copyIcon, copyResponse } = useCopyResponse(responseBodyText)
+
 useCodemirror(
   htmlResponse,
   responseBodyText,
@@ -106,51 +98,6 @@ useCodemirror(
     environmentHighlights: true,
   })
 )
-
-const downloadResponse = () => {
-  const dataToWrite = responseBodyText.value
-  const file = new Blob([dataToWrite], { type: "text/html" })
-  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)
-}
-
-const copyResponse = () => {
-  copyToClipboard(responseBodyText.value)
-  copyIcon.value = "check"
-  toast.success(`${t("state.copied_to_clipboard")}`)
-  setTimeout(() => (copyIcon.value = "copy"), 1000)
-}
-
-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)
-  }
-}
 </script>
 
 <style lang="scss" scoped>

packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue

@@ -126,7 +126,6 @@
 <script setup lang="ts">
 import { computed, ref, reactive } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
-import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 import jsonParse, { JSONObjectMember, JSONValue } from "~/helpers/jsonParse"
 import { getJSONOutlineAtPos } from "~/helpers/newOutline"
@@ -134,7 +133,10 @@ import {
   convertIndexToLineCh,
   convertLineChToIndex,
 } from "~/helpers/editor/utils"
-import { useI18n, useToast } from "~/helpers/utils/composables"
+import { useI18n } from "~/helpers/utils/composables"
+import useCopyResponse from "~/helpers/lenses/composables/useCopyResponse"
+import useResponseBody from "~/helpers/lenses/composables/useResponseBody"
+import useDownloadResponse from "~/helpers/lenses/composables/useDownloadResponse"
 
 const t = useI18n()
 
@@ -142,24 +144,14 @@ const props = defineProps<{
   response: HoppRESTResponse
 }>()
 
-const toast = useToast()
+const { responseBodyText } = useResponseBody(props.response)
 
-const responseBodyText = computed(() => {
-  if (
-    props.response.type === "loading" ||
-    props.response.type === "network_fail"
-  )
-    return ""
-  if (typeof props.response.body === "string") return props.response.body
-  else {
-    const res = new TextDecoder("utf-8").decode(props.response.body)
-    // HACK: Temporary trailing null character issue from the extension fix
-    return res.replace(/\0+$/, "")
-  }
-})
+const { copyIcon, copyResponse } = useCopyResponse(responseBodyText)
 
-const downloadIcon = ref("download")
-const copyIcon = ref("copy")
+const { downloadIcon, downloadResponse } = useDownloadResponse(
+  "application/json",
+  responseBodyText
+)
 
 const jsonBodyText = computed(() => {
   try {
@@ -203,25 +195,6 @@ const jumpCursor = (ast: JSONValue | JSONObjectMember) => {
   cursor.value = pos
 }
 
-const downloadResponse = () => {
-  const dataToWrite = responseBodyText.value
-  const file = new Blob([dataToWrite], { type: "application/json" })
-  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)
-}
-
 const outlinePath = computed(() => {
   if (ast.value) {
     return getJSONOutlineAtPos(
@@ -230,13 +203,6 @@ const outlinePath = computed(() => {
     )
   } else return null
 })
-
-const copyResponse = () => {
-  copyToClipboard(responseBodyText.value)
-  copyIcon.value = "check"
-  toast.success(`${t("state.copied_to_clipboard")}`)
-  setTimeout(() => (copyIcon.value = "copy"), 1000)
-}
 </script>
 
 <style lang="scss" scoped>

packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue

@@ -40,9 +40,11 @@
 <script setup lang="ts">
 import { ref, computed, reactive } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
-import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
-import { useI18n, useToast } from "~/helpers/utils/composables"
+import { useI18n } from "~/helpers/utils/composables"
+import useResponseBody from "~/helpers/lenses/composables/useResponseBody"
+import useDownloadResponse from "~/helpers/lenses/composables/useDownloadResponse"
+import useCopyResponse from "~/helpers/lenses/composables/useCopyResponse"
 
 const t = useI18n()
 
@@ -50,24 +52,7 @@ const props = defineProps<{
   response: HoppRESTResponse
 }>()
 
-const toast = useToast()
-
-const responseBodyText = computed(() => {
-  if (
-    props.response.type === "loading" ||
-    props.response.type === "network_fail"
-  )
-    return ""
-  if (typeof props.response.body === "string") return props.response.body
-  else {
-    const res = new TextDecoder("utf-8").decode(props.response.body)
-    // HACK: Temporary trailing null character issue from the extension fix
-    return res.replace(/\0+$/, "")
-  }
-})
-
-const downloadIcon = ref("download")
-const copyIcon = ref("copy")
+const { responseBodyText } = useResponseBody(props.response)
 
 const responseType = computed(() => {
   return (
@@ -78,6 +63,13 @@ const responseType = computed(() => {
     .toLowerCase()
 })
 
+const { downloadIcon, downloadResponse } = useDownloadResponse(
+  responseType.value,
+  responseBodyText
+)
+
+const { copyIcon, copyResponse } = useCopyResponse(responseBodyText)
+
 const rawResponse = ref<any | null>(null)
 const linewrapEnabled = ref(true)
 
@@ -95,30 +87,4 @@ useCodemirror(
     environmentHighlights: true,
   })
 )
-
-const downloadResponse = () => {
-  const dataToWrite = responseBodyText.value
-  const file = new Blob([dataToWrite], { type: responseType.value })
-  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)
-}
-
-const copyResponse = () => {
-  copyToClipboard(responseBodyText.value)
-  copyIcon.value = "check"
-  toast.success(`${t("state.copied_to_clipboard")}`)
-  setTimeout(() => (copyIcon.value = "copy"), 1000)
-}
 </script>

packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue

@@ -40,9 +40,11 @@
 <script setup lang="ts">
 import { computed, ref, reactive } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
-import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
-import { useI18n, useToast } from "~/helpers/utils/composables"
+import { useI18n } from "~/helpers/utils/composables"
+import useResponseBody from "~/helpers/lenses/composables/useResponseBody"
+import useDownloadResponse from "~/helpers/lenses/composables/useDownloadResponse"
+import useCopyResponse from "~/helpers/lenses/composables/useCopyResponse"
 
 const t = useI18n()
 
@@ -50,24 +52,7 @@ const props = defineProps<{
   response: HoppRESTResponse
 }>()
 
-const toast = useToast()
-
-const responseBodyText = computed(() => {
-  if (
-    props.response.type === "loading" ||
-    props.response.type === "network_fail"
-  )
-    return ""
-  if (typeof props.response.body === "string") return props.response.body
-  else {
-    const res = new TextDecoder("utf-8").decode(props.response.body)
-    // HACK: Temporary trailing null character issue from the extension fix
-    return res.replace(/\0+$/, "")
-  }
-})
-
-const downloadIcon = ref("download")
-const copyIcon = ref("copy")
+const { responseBodyText } = useResponseBody(props.response)
 
 const responseType = computed(() => {
   return (
@@ -78,6 +63,13 @@ const responseType = computed(() => {
     .toLowerCase()
 })
 
+const { downloadIcon, downloadResponse } = useDownloadResponse(
+  responseType.value,
+  responseBodyText
+)
+
+const { copyIcon, copyResponse } = useCopyResponse(responseBodyText)
+
 const xmlResponse = ref<any | null>(null)
 const linewrapEnabled = ref(true)
 
@@ -95,30 +87,4 @@ useCodemirror(
     environmentHighlights: true,
   })
 )
-
-const downloadResponse = () => {
-  const dataToWrite = responseBodyText.value
-  const file = new Blob([dataToWrite], { type: responseType.value })
-  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)
-}
-
-const copyResponse = () => {
-  copyToClipboard(responseBodyText.value)
-  copyIcon.value = "check"
-  toast.success(`${t("state.copied_to_clipboard")}`)
-  setTimeout(() => (copyIcon.value = "copy"), 1000)
-}
 </script>

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")