fix: json linting not working on raw body + small ts corrections

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

@@ -57,26 +57,57 @@
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, ref } from "@nuxtjs/composition-api"
+import {
+  computed,
+  reactive,
+  Ref,
+  ref,
+  watchEffect,
+} from "@nuxtjs/composition-api"
+import * as TO from "fp-ts/TaskOption"
+import { pipe } from "fp-ts/function"
+import { HoppRESTReqBody, ValidContentTypes } from "~/../hoppscotch-data/dist"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { getEditorLangForMimeType } from "~/helpers/editorutils"
 import { pluckRef, useI18n, useToast } from "~/helpers/utils/composables"
+import { isJSONContentType } from "~/helpers/utils/contenttypes"
 import { useRESTRequestBody } from "~/newstore/RESTSession"
 
+import jsonLinter from "~/helpers/editor/linting/json"
+import { readFileAsText } from "~/helpers/functional/files"
+
+type PossibleContentTypes = Exclude<
+  ValidContentTypes,
+  "multipart/form-data" | "application/x-www-form-urlencoded"
+>
+
 const t = useI18n()
 
 const props = defineProps<{
-  contentType: string
+  contentType: PossibleContentTypes
 }>()
 
 const toast = useToast()
 
-const rawParamsBody = pluckRef(useRESTRequestBody(), "body")
+const rawParamsBody = pluckRef(
+  useRESTRequestBody() as Ref<
+    HoppRESTReqBody & {
+      contentType: PossibleContentTypes
+    }
+  >,
+  "body"
+)
 const prettifyIcon = ref("wand")
 
 const rawInputEditorLang = computed(() =>
   getEditorLangForMimeType(props.contentType)
 )
+const langLinter = computed(() =>
+  isJSONContentType(props.contentType) ? jsonLinter : null
+)
+
+watchEffect(() => console.log(rawInputEditorLang.value))
+
 const linewrapEnabled = ref(true)
 const rawBodyParameters = ref<any | null>(null)
 
@@ -87,9 +118,9 @@ useCodemirror(
     extendedEditorConfig: {
       lineWrapping: linewrapEnabled,
       mode: rawInputEditorLang,
-      placeholder: t("request.raw_body"),
+      placeholder: t("request.raw_body").toString(),
     },
-    linter: null,
+    linter: langLinter,
     completer: null,
     environmentHighlights: true,
   })
@@ -99,18 +130,21 @@ const clearContent = () => {
   rawParamsBody.value = ""
 }
 
-const uploadPayload = (e: InputEvent) => {
-  const file = e.target.files[0]
-  if (file !== undefined && file !== null) {
-    const reader = new FileReader()
-    reader.onload = ({ target }) => {
-      rawParamsBody.value = target?.result
-    }
-    reader.readAsText(file)
-    toast.success(`${t("state.file_imported")}`)
-  } else {
-    toast.error(`${t("action.choose_file")}`)
-  }
+const uploadPayload = async (e: InputEvent) => {
+  await pipe(
+    (e.target as HTMLInputElement).files?.[0],
+    TO.of,
+    TO.chain(TO.fromPredicate((f): f is File => f !== undefined)),
+    TO.chain(readFileAsText),
+
+    TO.matchW(
+      () => toast.error(`${t("action.choose_file")}`),
+      (result) => {
+        rawParamsBody.value = result
+        toast.success(`${t("state.file_imported")}`)
+      }
+    )
+  )()
 }
 const prettifyRequestBody = () => {
   try {

packages/hoppscotch-app/helpers/functional/files.ts

@@ -0,0 +1,19 @@
+import * as TO from "fp-ts/TaskOption"
+
+export const readFileAsText = (file: File) =>
+  TO.tryCatch(
+    () =>
+      new Promise<string>((resolve, reject) => {
+        const reader = new FileReader()
+
+        reader.onload = () => {
+          resolve(reader.result as string)
+        }
+
+        reader.onerror = () => {
+          reject(new Error("File err"))
+        }
+
+        reader.readAsText(file)
+      })
+  )