From c3ba45f8756f4f87f7f5da8a1b0fb5f44925446f Mon Sep 17 00:00:00 2001
From: isaiM6 <98564922+isaiM6@users.noreply.github.com>
Date: Mon, 25 Jul 2022 13:56:15 -0700
Subject: [PATCH] changes to variables.vue

---
 .../components/http/Variables.vue             | 33 ++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/hoppscotch-app/components/http/Variables.vue b/packages/hoppscotch-app/components/http/Variables.vue
index f768f4302..f76594fc7 100644
--- a/packages/hoppscotch-app/components/http/Variables.vue
+++ b/packages/hoppscotch-app/components/http/Variables.vue
@@ -92,7 +92,7 @@ const toast = useToast()
 
 const emptyVars: string = "Add a new variable"
 
-const idTickerV = ref(0)
+const idTicker = ref(0)
 
 const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
 
@@ -101,7 +101,7 @@ const vars = useStream(restVars$, [], setRESTVars) as Ref<HoppRESTVar[]>
 // The UI representation of the variables list (has the empty end variable)
 const workingVars = ref<Array<HoppRESTVar & { id: number }>>([
   {
-    id: idTickerV.value++,
+    id: idTicker.value++,
     key: "",
     value: "",
   },
@@ -111,13 +111,38 @@ const workingVars = ref<Array<HoppRESTVar & { id: number }>>([
 watch(workingVars, (varsList) => {
   if (varsList.length > 0 && varsList[varsList.length - 1].key !== "") {
     workingVars.value.push({
-      id: idTickerV.value++,
+      id: idTicker.value++,
       key: "",
       value: "",
     })
   }
 })
 
+// Sync logic between params and working/bulk params
+watch(
+  vars,
+  (newVarsList) => {
+    // Sync should overwrite working params
+    const filteredWorkingVars: HoppRESTVar[] = pipe(
+      workingVars.value,
+      A.filterMap(
+        flow(
+          O.fromPredicate((e) => e.key !== ""),
+          O.map(objRemoveKey("id"))
+        )
+      )
+    )
+
+    if (!isEqual(newVarsList, filteredWorkingVars)) {
+      workingVars.value = pipe(
+        newVarsList,
+        A.map((x) => ({ id: idTicker.value++, ...x }))
+      )
+    }
+  },
+  { immediate: true }
+)
+
 watch(workingVars, (newWorkingVars) => {
   const fixedVars = pipe(
     newWorkingVars,
@@ -136,7 +161,7 @@ watch(workingVars, (newWorkingVars) => {
 
 const addVar = () => {
   workingVars.value.push({
-    id: idTickerV.value++,
+    id: idTicker.value++,
     key: "",
     value: "",
   })