refactor: init newstore for request body

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
2021-08-14 14:31:16 +05:30
parent e9eee0703d
commit a129d7eb13
4 changed files with 188 additions and 128 deletions
--- a/components/http/Body.vue
+++ b/components/http/Body.vue
@@ -5,7 +5,7 @@
        bg-primary
        border-b border-dividerLight
        flex flex-1
-        pl-4 pl-4
+        pl-4
        items-center
        justify-between
      "
@@ -44,11 +44,11 @@
          />
        </tippy>
      </span>
-      <SmartToggle :on="rawInput" class="px-2" @change="rawInput = !rawInput">
-        {{ $t("raw_input") }}
-      </SmartToggle>
    </div>
-    <HttpBodyParameters v-if="!rawInput" :content-type="contentType" />
+    <HttpBodyParameters
+      v-if="contentType == 'multipart/form-data'"
+      :content-type="contentType"
+    />
    <HttpRawBody v-else :content-type="contentType" />
  </div>
 </template>
@@ -63,7 +63,6 @@ export default defineComponent({
  setup() {
    return {
      contentType: pluckRef(useRESTRequestBody(), "contentType"),
-      rawInput: pluckRef(useRESTRequestBody(), "isRaw"),
    }
  },
  data() {
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -13,7 +13,7 @@
        justify-between
      "
    >
-      <label>
+      <label class="font-semibold text-secondaryLight">
        {{ $t("request_body") }}
      </label>
      <div class="flex">
@@ -38,11 +38,11 @@
        />
      </div>
    </div>
+    <!-- <div v-if="typeof bodyParams !== 'string'"> -->
    <div
      v-for="(param, index) in bodyParams"
      :key="`param-${index}`"
      class="divide-x divide-dividerLight border-b border-dividerLight flex"
-      :class="{ 'border-t': index == 0 }"
    >
      <SmartEnvInput
        v-if="EXPERIMENTAL_URL_BAR_ENABLED"
@@ -88,13 +88,12 @@
        "
      />
      <SmartEnvInput
-        v-if="EXPERIMENTAL_URL_BAR_ENABLED && !requestBodyParamIsFile(index)"
+        v-if="EXPERIMENTAL_URL_BAR_ENABLED && !param.isFile"
        v-model="param.value"
        :placeholder="$t('count.value', { count: index + 1 })"
        styles="
          bg-primaryLight
          flex
-
          flex-1
          py-1
          px-4
@@ -109,7 +108,7 @@
        "
      />
      <input
-        v-if="!EXPERIMENTAL_URL_BAR_ENABLED && !requestBodyParamIsFile(index)"
+        v-if="!EXPERIMENTAL_URL_BAR_ENABLED && !param.isFile"
        class="
          bg-primaryLight
          flex flex-1
@@ -208,124 +207,35 @@
        @click.native="addBodyParam"
      />
    </div>
+    <!-- </div> -->
  </AppSection>
 </template>

-<script>
-export default {
-  props: {
-    bodyParams: { type: Array, default: () => [] },
-  },
-  computed: {
-    contentType() {
-      return this.$store.state.request.contentType
-    },
-  },
-  watch: {
-    bodyParams: {
-      handler(newValue) {
-        if (
-          (newValue[newValue.length - 1]?.key !== "" ||
-            newValue[newValue.length - 1]?.value !== "") &&
-          newValue.length
-        )
-          this.addBodyParam()
-      },
-      deep: true,
-    },
-  },
-  mounted() {
-    if (!this.bodyParams?.length) {
-      this.addRequestBodyParam()
+<script lang="ts">
+import { defineComponent, onMounted } from "@nuxtjs/composition-api"
+import { pluckRef } from "~/helpers/utils/composables"
+import { addFormDataEntry, useRESTRequestBody } from "~/newstore/RESTSession"
+import { useSetting } from "~/newstore/settings"
+
+export default defineComponent({
+  setup() {
+    const bodyParams = pluckRef(useRESTRequestBody(), "body")
+
+    onMounted(() => {
+      console.log(bodyParams.value)
+    })
+    return {
+      bodyParams,
+      EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
    }
  },
  methods: {
-    clearContent() {
-      this.$emit("clear-content")
-    },
-    removeRequestBodyParam(index) {
-      const paramArr = this.$store.state.request.bodyParams.filter(
-        (item, itemIndex) =>
-          itemIndex !== index &&
-          (Object.prototype.hasOwnProperty.call(item, "active")
-            ? item.active === true
-            : true)
-      )
-      this.setRawParams(paramArr)
-      this.$emit("remove-request-body-param", index)
-    },
-    addRequestBodyParam() {
-      this.$emit("add-request-body-param")
-    },
-    setRequestAttachment(event, index) {
-      const { files } = event.target
-      this.$store.commit("setFilesBodyParams", {
-        index,
-        value: Array.from(files),
-      })
-    },
-    requestBodyParamIsFile(index) {
-      const bodyParamValue = this.bodyParams?.[index]?.value
-      const isFile = bodyParamValue?.[0] instanceof File
-      return isFile
-    },
-    chipDelete(paramIndex, fileIndex) {
-      this.$store.commit("removeFile", {
-        index: paramIndex,
-        fileIndex,
-      })
-    },
-    updateBodyParams(event, index, type) {
-      this.$store.commit(type, {
-        index,
-        value: event.target.value,
-      })
-      const paramArr = this.$store.state.request.bodyParams.filter((item) =>
-        Object.prototype.hasOwnProperty.call(item, "active")
-          ? item.active === true
-          : true
-      )
-
-      this.setRawParams(paramArr)
-    },
-    toggleActive(index, param) {
-      const paramArr = this.$store.state.request.bodyParams.filter(
-        (item, itemIndex) => {
-          if (index === itemIndex) {
-            return !param.active
-          } else {
-            return Object.prototype.hasOwnProperty.call(item, "active")
-              ? item.active === true
-              : true
-          }
-        }
-      )
-
-      this.setRawParams(paramArr)
-
-      this.$store.commit("setActiveBodyParams", {
-        index,
-        value: Object.prototype.hasOwnProperty.call(param, "active")
-          ? !param.active
-          : false,
-      })
-    },
-    setRawParams(filteredParamArr) {
-      let rawParams = {}
-      filteredParamArr.forEach((_param) => {
-        rawParams = {
-          ...rawParams,
-          [_param.key]: _param.value,
-        }
-      })
-      const rawParamsStr = JSON.stringify(rawParams, null, 2)
-      this.$store.commit("setState", {
-        value: rawParamsStr,
-        attribute: "rawParams",
-      })
+    addBodyParam() {
+      addFormDataEntry({ key: "", value: "", active: true, isFile: false })
    },
+    updateBodyParam() {},
  },
-}
+})
 </script>

 <style scoped lang="scss">
--- a/helpers/types/HoppRESTRequest.ts
+++ b/helpers/types/HoppRESTRequest.ts
@@ -15,12 +15,23 @@ export type HoppRESTHeader = {
  active: boolean
 }

-export type HoppRESTReqBody = {
-  contentType: ValidContentTypes
-  body: string
-  isRaw: boolean
+export type FormDataKeyValue = {
+  key: string
+  active: boolean
+} & ({ isFile: true; value: Blob } | { isFile: false; value: string })
+
+export type HoppRESTReqBodyFormData = {
+  contentType: "multipart/form-data"
+  body: FormDataKeyValue[]
 }

+export type HoppRESTReqBody =
+  | {
+      contentType: Exclude<ValidContentTypes, "multipart/form-data">
+      body: string
+    }
+  | HoppRESTReqBodyFormData
+
 export interface HoppRESTRequest {
  v: string

@@ -55,14 +66,12 @@ function parseRequestBody(x: any): HoppRESTReqBody {
    return {
      contentType: "application/json",
      body: x.rawParams,
-      isRaw: x.rawInput,
    }
  }

  return {
    contentType: "application/json",
    body: "",
-    isRaw: x.rawInput,
  }
 }

--- a/newstore/RESTSession.ts
+++ b/newstore/RESTSession.ts
@@ -2,6 +2,7 @@ import { pluck, distinctUntilChanged, map, filter } from "rxjs/operators"
 import { Ref } from "@nuxtjs/composition-api"
 import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
 import {
+  FormDataKeyValue,
  HoppRESTHeader,
  HoppRESTParam,
  HoppRESTReqBody,
@@ -12,6 +13,7 @@ import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 import { useStream } from "~/helpers/utils/composables"
 import { HoppTestResult } from "~/helpers/types/HoppTestResult"
 import { HoppRESTAuth } from "~/helpers/types/HoppRESTAuth"
+import { ValidContentTypes } from "~/helpers/utils/contenttypes"

 type RESTSession = {
  request: HoppRESTRequest
@@ -36,7 +38,6 @@ const defaultRESTRequest: HoppRESTRequest = {
  body: {
    contentType: "application/json",
    body: "",
-    isRaw: false,
  },
 }

@@ -196,6 +197,112 @@ const dispatchers = defineDispatchers({
      },
    }
  },
+  setContentType(
+    curr: RESTSession,
+    { newContentType }: { newContentType: ValidContentTypes }
+  ) {
+    // TODO: persist body evenafter switching content typees
+    if (curr.request.body.contentType !== "multipart/form-data") {
+      if (newContentType === "multipart/form-data") {
+        // Going from non-formdata to form-data, discard contents and set empty array as body
+        return {
+          request: {
+            ...curr.request,
+            body: <HoppRESTReqBody>{
+              contentType: "multipart/form-data",
+              body: [],
+            },
+          },
+        }
+      } else {
+        // non-formdata to non-formdata, keep body and set content type
+        return {
+          request: {
+            ...curr.request,
+            body: <HoppRESTReqBody>{
+              contentType: newContentType,
+              body: curr.request.body.body,
+            },
+          },
+        }
+      }
+    } else if (newContentType !== "multipart/form-data") {
+      // Going from formdata to non-formdata, discard contents and set empty string
+      return {
+        ...curr.request,
+        body: <HoppRESTReqBody>{
+          contentType: newContentType,
+          body: "",
+        },
+      }
+    } else {
+      // form-data to form-data ? just set the content type ¯\_(ツ)_/¯
+      return {
+        ...curr.request,
+        body: <HoppRESTReqBody>{
+          contentType: newContentType,
+          body: curr.request.body.body,
+        },
+      }
+    }
+  },
+  addFormDataEntry(curr: RESTSession, { entry }: { entry: FormDataKeyValue }) {
+    // Only perform update if the current content-type is formdata
+    if (curr.request.body.contentType !== "multipart/form-data") return {}
+
+    return {
+      request: {
+        ...curr.request,
+        body: <HoppRESTReqBody>{
+          contentType: "multipart/form-data",
+          body: [...curr.request.body.body, entry],
+        },
+      },
+    }
+  },
+  removeFormDataEntry(curr: RESTSession, { index }: { index: number }) {
+    // Only perform update if the current content-type is formdata
+    if (curr.request.body.contentType !== "multipart/form-data") return {}
+
+    return {
+      request: {
+        ...curr.request,
+        body: <HoppRESTReqBody>{
+          contentType: "multipart/form-data",
+          body: curr.request.body.body.filter((_, i) => i !== index),
+        },
+      },
+    }
+  },
+  updateFormDataEntry(
+    curr: RESTSession,
+    { index, entry }: { index: number; entry: FormDataKeyValue }
+  ) {
+    // Only perform update if the current content-type is formdata
+    if (curr.request.body.contentType !== "multipart/form-data") return {}
+
+    return {
+      request: {
+        ...curr.request,
+        body: <HoppRESTReqBody>{
+          contentType: "multipart/form-data",
+          body: curr.request.body.body.map((x, i) => (i !== index ? x : entry)),
+        },
+      },
+    }
+  },
+  clearAllFormDataEntries(curr: RESTSession) {
+    // Only perform update if the current content-type is formdata
+    if (curr.request.body.contentType !== "multipart/form-data") return {}
+
+    return {
+      ...curr.request,
+      body: <HoppRESTReqBody>{
+        contentType: "multipart/form-data",
+        body: [],
+      },
+    }
+  },
  setRequestBody(curr: RESTSession, { newBody }: { newBody: HoppRESTReqBody }) {
    return {
      request: {
@@ -422,6 +529,41 @@ export function setRESTTestResults(newResults: HoppTestResult | null) {
  })
 }

+export function addFormDataEntry(entry: FormDataKeyValue) {
+  restSessionStore.dispatch({
+    dispatcher: "addFormDataEntry",
+    payload: {
+      entry,
+    },
+  })
+}
+
+export function removeFormDataEntry(index: number) {
+  restSessionStore.dispatch({
+    dispatcher: "removeFormDataEntry",
+    payload: {
+      index,
+    },
+  })
+}
+
+export function updateFormDataEntry(index: number, entry: FormDataKeyValue) {
+  restSessionStore.dispatch({
+    dispatcher: "updateFormDataEntry",
+    payload: {
+      index,
+      entry,
+    },
+  })
+}
+
+export function clearAllFormDataEntries() {
+  restSessionStore.dispatch({
+    dispatcher: "clearAllFormDataEntries",
+    payload: {},
+  })
+}
+
 export const restRequest$ = restSessionStore.subject$.pipe(
  pluck("request"),
  distinctUntilChanged()