From e9dc7769ac5d9e05e8a664ec702958e8726a67e0 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 1 Mar 2022 02:03:30 +0530
Subject: [PATCH] fix: raw lens renderer download option uses direct
 arraybuffer binary value instead of text

---
 .../lenses/renderers/RawLensRenderer.vue      | 35 ++++++++++++++-----
 .../helpers/functional/object.ts              | 10 ++++++
 .../lenses/composables/useDownloadResponse.ts |  4 +--
 3 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue
index c1fe5a8c6..44e0d4ed9 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue
@@ -39,12 +39,18 @@
 
 <script setup lang="ts">
 import { ref, computed, reactive } from "@nuxtjs/composition-api"
+import { flow, pipe } from "fp-ts/function"
+import * as S from "fp-ts/string"
+import * as RNEA from "fp-ts/ReadonlyNonEmptyArray"
+import * as A from "fp-ts/Array"
+import * as O from "fp-ts/Option"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 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"
+import { objFieldMatches } from "~/helpers/functional/object"
 
 const t = useI18n()
 
@@ -54,18 +60,31 @@ const props = defineProps<{
 
 const { responseBodyText } = useResponseBody(props.response)
 
-const responseType = computed(() => {
-  return (
-    props.response.headers.find((h) => h.key.toLowerCase() === "content-type")
-      .value || ""
+const rawResponseBody = computed(() =>
+  props.response.type === "fail" || props.response.type === "success"
+    ? props.response.body
+    : new ArrayBuffer(0)
+)
+
+const responseType = computed(() =>
+  pipe(
+    props.response,
+    O.fromPredicate(objFieldMatches("type", ["fail", "success"] as const)),
+    O.chain(
+      // Try getting content-type
+      flow(
+        (res) => res.headers,
+        A.findFirst((h) => h.key.toLowerCase() === "content-type"),
+        O.map(flow((h) => h.value, S.split(";"), RNEA.head, S.toLowerCase))
+      )
+    ),
+    O.getOrElse(() => "text/plain")
   )
-    .split(";")[0]
-    .toLowerCase()
-})
+)
 
 const { downloadIcon, downloadResponse } = useDownloadResponse(
   responseType.value,
-  responseBodyText
+  rawResponseBody
 )
 
 const { copyIcon, copyResponse } = useCopyResponse(responseBodyText)
diff --git a/packages/hoppscotch-app/helpers/functional/object.ts b/packages/hoppscotch-app/helpers/functional/object.ts
index 11697c924..1d6d9334b 100644
--- a/packages/hoppscotch-app/helpers/functional/object.ts
+++ b/packages/hoppscotch-app/helpers/functional/object.ts
@@ -1,5 +1,6 @@
 import { pipe } from "fp-ts/function"
 import cloneDeep from "lodash/cloneDeep"
+import isEqual from "lodash/isEqual"
 
 export const objRemoveKey =
   <T, K extends keyof T>(key: K) =>
@@ -8,3 +9,12 @@ export const objRemoveKey =
       delete e[key]
       return e
     })
+
+export const objFieldMatches =
+  <T, K extends keyof T, V extends T[K]>(
+    fieldName: K,
+    matches: ReadonlyArray<V>
+  ) =>
+  // eslint-disable-next-line no-unused-vars
+  (obj: T): obj is T & { [_ in K]: V } =>
+    matches.findIndex((x) => isEqual(obj[fieldName], x)) !== -1
diff --git a/packages/hoppscotch-app/helpers/lenses/composables/useDownloadResponse.ts b/packages/hoppscotch-app/helpers/lenses/composables/useDownloadResponse.ts
index af946b5b4..acc357929 100644
--- a/packages/hoppscotch-app/helpers/lenses/composables/useDownloadResponse.ts
+++ b/packages/hoppscotch-app/helpers/lenses/composables/useDownloadResponse.ts
@@ -5,7 +5,7 @@ export type downloadResponseReturnType = (() => void) | Ref<any>
 
 export default function useDownloadResponse(
   contentType: string,
-  responseBodyText: Ref<string>
+  responseBody: Ref<string | ArrayBuffer>
 ): {
   downloadIcon: Ref<string>
   downloadResponse: () => void
@@ -15,7 +15,7 @@ export default function useDownloadResponse(
   const t = useI18n()
 
   const downloadResponse = () => {
-    const dataToWrite = responseBodyText.value
+    const dataToWrite = responseBody.value
     const file = new Blob([dataToWrite], { type: contentType })
     const a = document.createElement("a")
     const url = URL.createObjectURL(file)