refactor: update codegen code

components/http/CodegenModal.vue

@@ -26,8 +26,10 @@
             :info-icon="gen.id === codegenType ? 'done' : ''"
             :active-info-icon="gen.id === codegenType"
             @click.native="
-              codegenType = gen.id
-              $refs.options.tippy().hide()
+              () => {
+                codegenType = gen.id
+                options.tippy().hide()
+              }
             "
           />
         </tippy>
@@ -68,82 +70,62 @@
   </SmartModal>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
-import { codegens } from "~/helpers/codegen/codegen"
-import { getRESTRequest } from "~/newstore/RESTSession"
+<script setup lang="ts">
+import { computed, ref, useContext, watch } from "@nuxtjs/composition-api"
+import { codegens, generateCodegenContext } from "~/helpers/codegen/codegen"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { getEffectiveRESTRequest } from "~/helpers/utils/EffectiveURL"
 import { getCurrentEnvironment } from "~/newstore/environments"
-import { copyToClipboard } from "~/helpers/utils/clipboard"
+import { getRESTRequest } from "~/newstore/RESTSession"
 
-export default defineComponent({
-  props: {
-    show: Boolean,
-  },
-  data() {
-    return {
-      codegens,
-      copyIcon: "content_copy",
-      request: getRESTRequest(),
-      codegenType: "curl",
-    }
-  },
-  computed: {
-    requestCode(): string {
-      const effectiveRequest = getEffectiveRESTRequest(
-        this.request,
-        getCurrentEnvironment()
-      )
+const props = defineProps<{
+  show: boolean
+}>()
 
-      const urlObj = new URL(effectiveRequest.effectiveFinalURL)
-      const baseURL = urlObj.origin
-      const path = urlObj.pathname
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
 
-      // TODO: Solidify
-      // TODO: Implement updated auth stuff
-      return codegens
-        .find((x) => x.id === this.codegenType)!
-        .generator({
-          auth: "None",
-          httpUser: null,
-          httpPassword: null,
-          method: effectiveRequest.method,
-          url: baseURL,
-          pathName: path,
-          queryString: urlObj.searchParams.toString(),
-          bearerToken: null,
-          headers: effectiveRequest.effectiveFinalHeaders,
-          rawInput: null,
-          rawParams: null,
-          rawRequestBody: "",
-          contentType: effectiveRequest.effectiveFinalHeaders.find(
-            (x) => x.key === "content-type"
-          ),
-        })
-    },
-  },
-  watch: {
-    show(goingToShow) {
-      if (goingToShow) {
-        this.request = getRESTRequest()
-      }
-    },
-  },
-  methods: {
-    hideModal() {
-      this.$emit("hide-modal")
-    },
-    handleImport() {
-      this.$emit("handle-import")
-    },
-    copyRequestCode() {
-      copyToClipboard(this.requestCode)
-      this.copyIcon = "done"
-      this.$toast.success(this.$t("state.copied_to_clipboard").toString(), {
-        icon: "content_paste",
-      })
-      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
-    },
-  },
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+const $t = i18n.t.bind(i18n)
+
+const options = ref<any | null>(null)
+
+const request = ref(getRESTRequest())
+const codegenType = ref("curl")
+const copyIcon = ref("content_copy")
+
+const requestCode = computed(() => {
+  const effectiveRequest = getEffectiveRESTRequest(
+    request.value as any,
+    getCurrentEnvironment()
+  )
+
+  return codegens
+    .find((x) => x.id === codegenType.value)!
+    .generator(generateCodegenContext(effectiveRequest))
 })
+
+watch(
+  () => props.show,
+  (goingToShow) => {
+    if (goingToShow) {
+      request.value = getRESTRequest()
+    }
+  }
+)
+
+const hideModal = () => emit("hide-modal")
+
+const copyRequestCode = () => {
+  copyToClipboard(requestCode.value)
+  copyIcon.value = "done"
+  $toast.success($t("state.copied_to_clipboard").toString(), {
+    icon: "content_paste",
+  })
+  setTimeout(() => (copyIcon.value = "content_copy"), 1000)
+}
 </script>

helpers/codegen/codegen.ts

@@ -1,4 +1,9 @@
-import { HoppRESTHeader, HoppRESTParam } from "../types/HoppRESTRequest"
+import {
+  FormDataKeyValue,
+  HoppRESTHeader,
+  HoppRESTParam,
+} from "../types/HoppRESTRequest"
+import { EffectiveHoppRESTRequest } from "../utils/EffectiveURL"
 import { CLibcurlCodegen } from "./generators/c-libcurl"
 import { CsRestsharpCodegen } from "./generators/cs-restsharp"
 import { CurlCodegen } from "./generators/curl"
@@ -67,11 +72,11 @@ export type HoppCodegenContext = {
   bearerToken: string | null
   headers: HoppRESTHeader[]
   params: HoppRESTParam[]
-  bodyParams: any // TODO: Change this
+  bodyParams: FormDataKeyValue[]
   rawParams: string | null
   rawInput: boolean
   rawRequestBody: any
-  contentType: string
+  contentType: string | null
   queryString: string
 }
 
@@ -86,3 +91,93 @@ export function generateCodeWithGenerator(
 
   return ""
 }
+
+function getCodegenAuth(
+  request: EffectiveHoppRESTRequest
+): Pick<
+  HoppCodegenContext,
+  "auth" | "bearerToken" | "httpUser" | "httpPassword"
+> {
+  if (!request.auth.authActive || request.auth.authType === "none") {
+    return {
+      auth: "None",
+      httpUser: null,
+      httpPassword: null,
+      bearerToken: null,
+    }
+  }
+
+  if (request.auth.authType === "basic") {
+    return {
+      auth: "Basic Auth",
+      httpUser: request.auth.username,
+      httpPassword: request.auth.password,
+      bearerToken: null,
+    }
+  } else {
+    return {
+      auth: "Bearer Token",
+      httpUser: null,
+      httpPassword: null,
+      bearerToken: request.auth.token,
+    }
+  }
+}
+
+function getCodegenGeneralRESTInfo(
+  request: EffectiveHoppRESTRequest
+): Pick<
+  HoppCodegenContext,
+  | "name"
+  | "uri"
+  | "url"
+  | "method"
+  | "queryString"
+  | "pathName"
+  | "params"
+  | "headers"
+> {
+  const urlObj = new URL(request.effectiveFinalURL)
+
+  return {
+    name: request.name,
+    uri: request.effectiveFinalURL,
+    headers: request.effectiveFinalHeaders.map((x) => ({ ...x, active: true })),
+    params: request.effectiveFinalParams.map((x) => ({ ...x, active: true })),
+    method: request.method,
+    url: urlObj.origin,
+    queryString: urlObj.searchParams.toString(),
+    pathName: urlObj.pathname,
+  }
+}
+
+function getCodegenReqBodyData(
+  request: EffectiveHoppRESTRequest
+): Pick<
+  HoppCodegenContext,
+  "rawRequestBody" | "rawInput" | "contentType" | "bodyParams" | "rawParams"
+> {
+  return {
+    contentType: request.body.contentType,
+    rawInput: request.body.contentType !== "multipart/form-data",
+    rawRequestBody:
+      request.body.contentType !== "multipart/form-data"
+        ? request.body.body
+        : null,
+    bodyParams:
+      request.body.contentType === "multipart/form-data"
+        ? request.body.body
+        : [],
+    rawParams: null,
+  }
+}
+
+export function generateCodegenContext(
+  request: EffectiveHoppRESTRequest
+): HoppCodegenContext {
+  return {
+    ...getCodegenAuth(request),
+    ...getCodegenGeneralRESTInfo(request),
+    ...getCodegenReqBodyData(request),
+  }
+}

nuxt.config.js

@@ -125,7 +125,7 @@ export default {
     // https: //github.com/nuxt-community/google-fonts-module
     "@nuxtjs/google-fonts",
     // https://github.com/nuxt/typescript
-    "@nuxt/typescript-build",
+    ["@nuxt/typescript-build", { typeCheck: false }],
     // https://github.com/nuxt-community/dotenv-module
     "@nuxtjs/dotenv",
     // https://github.com/nuxt-community/composition-api