From 136b1ff63b5bef7d958530358b976ac3cdb58b41 Mon Sep 17 00:00:00 2001
From: 0xc0Der <59133155+0xc0Der@users.noreply.github.com>
Date: Thu, 4 Nov 2021 17:13:21 +0200
Subject: [PATCH] fix: bind key-value with bulk editor at startup. (#1936)

---
 .../components/graphql/RequestOptions.vue     | 18 ++++++-------
 .../components/http/Headers.vue               | 26 +++++++++++--------
 .../components/http/Parameters.vue            | 24 +++++++++--------
 3 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/packages/hoppscotch-app/components/graphql/RequestOptions.vue b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
index 07308358d..782a6158b 100644
--- a/packages/hoppscotch-app/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
@@ -397,15 +397,15 @@ const editBulkHeadersLine = (
     active: boolean
   }
 ) => {
-  const headers = bulkHeaders.value.split("\n")
-  if (item !== null)
-    headers.splice(
-      index,
-      1,
-      `${item.active ? "" : "//"}${item.key}: ${item.value}`
-    )
-  else headers.splice(index, 1)
-  bulkHeaders.value = headers.join("\n")
+  bulkHeaders.value = headers.value
+    .reduce((all, header, pIndex) => {
+      const current =
+        index === pIndex && item !== null
+          ? `${item.active ? "" : "//"}${item.key}: ${item.value}`
+          : `${header.active ? "" : "//"}${header.key}: ${header.value}`
+      return [...all, current]
+    }, [])
+    .join("\n")
 }
 
 const clearBulkEditor = () => {
diff --git a/packages/hoppscotch-app/components/http/Headers.vue b/packages/hoppscotch-app/components/http/Headers.vue
index 8ccf4e262..60f6dcf36 100644
--- a/packages/hoppscotch-app/components/http/Headers.vue
+++ b/packages/hoppscotch-app/components/http/Headers.vue
@@ -170,7 +170,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useContext, watch } from "@nuxtjs/composition-api"
+import { ref, useContext, watch, onMounted } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import {
   addRESTHeader,
@@ -221,16 +221,20 @@ watch(bulkHeaders, () => {
 
 const headers$ = useReadonlyStream(restHeaders$, [])
 
-const editBulkHeadersLine = (index: number, item?: HoppRESTHeader) => {
-  const headers = bulkHeaders.value.split("\n")
-  if (item !== null)
-    headers.splice(
-      index,
-      1,
-      `${item.active ? "" : "//"}${item.key}: ${item.value}`
-    )
-  else headers.splice(index, 1)
-  bulkHeaders.value = headers.join("\n")
+onMounted(() => editBulkHeadersLine(-1, null))
+
+const editBulkHeadersLine = (index: number, item?: HoppRESTParam) => {
+  const headers = headers$.value
+
+  bulkHeaders.value = headers
+    .reduce((all, header, pIndex) => {
+      const current =
+        index === pIndex && item !== null
+          ? `${item.active ? "" : "//"}${item.key}: ${item.value}`
+          : `${header.active ? "" : "//"}${header.key}: ${header.value}`
+      return [...all, current]
+    }, [])
+    .join("\n")
 }
 
 const clearBulkEditor = () => {
diff --git a/packages/hoppscotch-app/components/http/Parameters.vue b/packages/hoppscotch-app/components/http/Parameters.vue
index cacbd79a3..a6cc22265 100644
--- a/packages/hoppscotch-app/components/http/Parameters.vue
+++ b/packages/hoppscotch-app/components/http/Parameters.vue
@@ -163,7 +163,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useContext, watch } from "@nuxtjs/composition-api"
+import { ref, useContext, watch, onMounted } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { HoppRESTParam } from "~/helpers/types/HoppRESTRequest"
 import { useReadonlyStream } from "~/helpers/utils/composables"
@@ -215,18 +215,20 @@ useCodemirror(bulkEditor, bulkParams, {
 
 const params$ = useReadonlyStream(restParams$, [])
 
+onMounted(() => editBulkParamsLine(-1, null))
+
 const editBulkParamsLine = (index: number, item?: HoppRESTParam) => {
-  const params = bulkParams.value.split("\n")
+  const params = params$.value
 
-  if (item !== null)
-    params.splice(
-      index,
-      1,
-      `${item.active ? "" : "//"}${item.key}: ${item.value}`
-    )
-  else params.splice(index, 1)
-
-  bulkParams.value = params.join("\n")
+  bulkParams.value = params
+    .reduce((all, param, pIndex) => {
+      const current =
+        index === pIndex && item !== null
+          ? `${item.active ? "" : "//"}${item.key}: ${item.value}`
+          : `${param.active ? "" : "//"}${param.key}: ${param.value}`
+      return [...all, current]
+    }, [])
+    .join("\n")
 }
 
 const clearBulkEditor = () => {