From 1ba89a0f0b734e86b22ed765025bba20b89ece30 Mon Sep 17 00:00:00 2001 From: liyasthomas Date: Fri, 21 Jan 2022 23:21:23 +0530 Subject: [PATCH] fix: url encoded binding --- .../hoppscotch-app/components/http/Body.vue | 2 +- .../components/http/URLEncodedParams.vue | 155 +++++++++--------- 2 files changed, 80 insertions(+), 77 deletions(-) diff --git a/packages/hoppscotch-app/components/http/Body.vue b/packages/hoppscotch-app/components/http/Body.vue index 368766c4..3f4b9fb3 100644 --- a/packages/hoppscotch-app/components/http/Body.vue +++ b/packages/hoppscotch-app/components/http/Body.vue @@ -51,7 +51,7 @@
- @@ -88,25 +83,25 @@ @@ -117,7 +112,7 @@ :title="t('action.remove')" svg="trash" color="red" - @click.native="deleteHeader(index)" + @click.native="deleteUrlEncodedParam(index)" />
@@ -129,17 +124,17 @@ :src="`/images/states/${$colorMode.value}/add_category.svg`" loading="lazy" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4" - :alt="`${t('empty.headers')}`" + :alt="`${t('empty.body')}`" /> - {{ t("empty.headers") }} + {{ t("empty.body") }}
@@ -150,11 +145,11 @@ import { Ref, ref, watch } from "@nuxtjs/composition-api" import isEqual from "lodash/isEqual" import clone from "lodash/clone" -import { HoppRESTHeader } from "@hoppscotch/data" +import { HoppRESTReqBody } from "@hoppscotch/data" import { useCodemirror } from "~/helpers/editor/codemirror" -import { restHeaders$, setRESTHeaders } from "~/newstore/RESTSession" -import { commonHeaders } from "~/helpers/headers" -import { useI18n, useStream, useToast } from "~/helpers/utils/composables" +import { useRESTRequestBody } from "~/newstore/RESTSession" +import { pluckRef, useI18n, useToast } from "~/helpers/utils/composables" +import { RawKeyValueEntry } from "~/helpers/rawKeyValue" const t = useI18n() const toast = useToast() @@ -175,13 +170,16 @@ useCodemirror(bulkEditor, bulkUrlEncodedParams, { environmentHighlights: true, }) -// The functional headers list (the headers actually in the system) -const headers = useStream(restHeaders$, [], setRESTHeaders) as Ref< - HoppRESTHeader[] -> +// The functional urlEncodedParams list (the urlEncodedParams actually in the system) +const urlEncodedParams = pluckRef( + useRESTRequestBody() as Ref< + HoppRESTReqBody & { contentType: "application/x-www-form-urlencoded" } + >, + "body" +) -// The UI representation of the headers list (has the empty end header) -const workingUrlEncodedParams = ref([ +// The UI representation of the urlEncodedParams list (has the empty end urlEncodedParam) +const workingUrlEncodedParams = ref([ { key: "", value: "", @@ -189,11 +187,11 @@ const workingUrlEncodedParams = ref([ }, ]) -// Rule: Working Headers always have one empty header or the last element is always an empty header -watch(workingUrlEncodedParams, (headersList) => { +// Rule: Working urlEncodedParams always have one empty urlEncodedParam or the last element is always an empty urlEncodedParams +watch(workingUrlEncodedParams, (urlEncodedParamList) => { if ( - headersList.length > 0 && - headersList[headersList.length - 1].key !== "" + urlEncodedParamList.length > 0 && + urlEncodedParamList[urlEncodedParamList.length - 1].key !== "" ) { workingUrlEncodedParams.value.push({ key: "", @@ -203,29 +201,31 @@ watch(workingUrlEncodedParams, (headersList) => { } }) -// Sync logic between headers and working headers +// Sync logic between urlEncodedParams and working urlEncodedParams watch( - headers, - (newHeadersList) => { - // Sync should overwrite working headers + urlEncodedParams, + (newurlEncodedParamList) => { + // Sync should overwrite working urlEncodedParams const filteredWorkingUrlEncodedParams = workingUrlEncodedParams.value.filter((e) => e.key !== "") - if (!isEqual(newHeadersList, filteredWorkingUrlEncodedParams)) { - workingUrlEncodedParams.value = newHeadersList + if (!isEqual(newurlEncodedParamList, filteredWorkingUrlEncodedParams)) { + workingUrlEncodedParams.value = newurlEncodedParamList } }, { immediate: true } ) watch(workingUrlEncodedParams, (newWorkingUrlEncodedParams) => { - const fixedHeaders = newWorkingUrlEncodedParams.filter((e) => e.key !== "") - if (!isEqual(headers.value, fixedHeaders)) { - headers.value = fixedHeaders + const fixedUrlEncodedParams = newWorkingUrlEncodedParams.filter( + (e) => e.key !== "" + ) + if (!isEqual(urlEncodedParams.value, fixedUrlEncodedParams)) { + urlEncodedParams.value = fixedUrlEncodedParams } }) -// Bulk Editor Syncing with Working Headers +// Bulk Editor Syncing with Working urlEncodedParams watch(bulkUrlEncodedParams, () => { try { const transformation = bulkUrlEncodedParams.value @@ -237,11 +237,11 @@ watch(bulkUrlEncodedParams, () => { active: !item.trim().startsWith("#"), })) - const filteredHeaders = workingUrlEncodedParams.value.filter( + const filteredUrlEncodedParams = workingUrlEncodedParams.value.filter( (x) => x.key !== "" ) - if (!isEqual(filteredHeaders, transformation)) { + if (!isEqual(filteredUrlEncodedParams, transformation)) { workingUrlEncodedParams.value = transformation } } catch (e) { @@ -250,7 +250,7 @@ watch(bulkUrlEncodedParams, () => { } }) -watch(workingUrlEncodedParams, (newHeadersList) => { +watch(workingUrlEncodedParams, (newurlEncodedParamList) => { // If we are in bulk mode, don't apply direct changes if (bulkMode.value) return @@ -263,12 +263,14 @@ watch(workingUrlEncodedParams, (newHeadersList) => { active: !item.trim().startsWith("#"), })) - const filteredHeaders = newHeadersList.filter((x) => x.key !== "") + const filteredUrlEncodedParams = newurlEncodedParamList.filter( + (x) => x.key !== "" + ) - if (!isEqual(currentBulkUrlEncodedParams, filteredHeaders)) { - bulkUrlEncodedParams.value = filteredHeaders - .map((header) => { - return `${header.active ? "" : "#"}${header.key}: ${header.value}` + if (!isEqual(currentBulkUrlEncodedParams, filteredUrlEncodedParams)) { + bulkUrlEncodedParams.value = filteredUrlEncodedParams + .map((param) => { + return `${param.active ? "" : "#"}${param.key}: ${param.value}` }) .join("\n") } @@ -278,7 +280,8 @@ watch(workingUrlEncodedParams, (newHeadersList) => { } }) -const addHeader = () => { +const addUrlEncodedParam = () => { + debugger workingUrlEncodedParams.value.push({ key: "", value: "", @@ -286,19 +289,19 @@ const addHeader = () => { }) } -const updateHeader = (index: number, header: HoppRESTHeader) => { - workingUrlEncodedParams.value = workingUrlEncodedParams.value.map((h, i) => - i === index ? header : h +const updateUrlEncodedParam = (index: number, param: RawKeyValueEntry) => { + workingUrlEncodedParams.value = workingUrlEncodedParams.value.map((p, i) => + i === index ? param : p ) } -const deleteHeader = (index: number) => { - const headersBeforeDeletion = clone(workingUrlEncodedParams.value) +const deleteUrlEncodedParam = (index: number) => { + const urlEncodedParamsBeforeDeletion = clone(workingUrlEncodedParams.value) if ( !( - headersBeforeDeletion.length > 0 && - index === headersBeforeDeletion.length - 1 + urlEncodedParamsBeforeDeletion.length > 0 && + index === urlEncodedParamsBeforeDeletion.length - 1 ) ) { if (deletionToast.value) { @@ -311,7 +314,7 @@ const deleteHeader = (index: number) => { { text: `${t("action.undo")}`, onClick: (_, toastObject) => { - workingUrlEncodedParams.value = headersBeforeDeletion + workingUrlEncodedParams.value = urlEncodedParamsBeforeDeletion toastObject.goAway(0) deletionToast.value = null }, @@ -328,7 +331,7 @@ const deleteHeader = (index: number) => { } const clearContent = () => { - // set headers list to the initial state + // set urlEncodedParams list to the initial state workingUrlEncodedParams.value = [ { key: "",