localy stored variable data

packages/hoppscotch-app/components/http/Variables.vue

@@ -9,37 +9,35 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="t('add.new')"
           svg="plus"
-          @click.native="addParamV"
+          @click.native="addVar"
         />
       </div>
     </div>
     <div>
       <div
-        v-for="(param, index) in workingParamsV"
-        :key="`param-${param.id}-${index}`"
+        v-for="(vari, index) in workingVars"
+        :key="`vari-${vari.id}-${index}`"
         class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
       >
         <SmartEnvInput
-          v-model="param.key"
+          v-model="vari.key"
           :placeholder="`${t('count.parameter', { count: index + 1 })}`"
           @change="
-            updateParamV(index, {
-              id: param.id,
+            updateVar(index, {
+              id: vari.id,
               key: $event,
-              value: param.value,
-              active: param.active,
+              value: vari.value,
             })
           "
         />
         <SmartEnvInput
-          v-model="param.value"
+          v-model="vari.value"
           :placeholder="`${t('count.value', { count: index + 1 })}`"
           @change="
-            updateParamV(index, {
-              id: param.id,
-              key: param.key,
+            updateVar(index, {
+              id: vari.id,
+              key: vari.key,
               value: $event,
-              active: param.active,
             })
           "
         />
@@ -49,12 +47,12 @@
             :title="t('action.remove')"
             svg="trash"
             color="red"
-            @click.native="deleteParamV(index)"
+            @click.native="deleteVar(index)"
           />
         </span>
       </div>
       <div
-        v-if="workingParamsV.length === 0"
+        v-if="workingVars.length === 0"
         class="flex flex-col items-center justify-center p-4 text-secondaryLight"
       >
         <img
@@ -69,7 +67,7 @@
           svg="plus"
           filled
           class="mb-4"
-          @click.native="addParamV"
+          @click.native="addVar"
         />
       </div>
     </div>
@@ -77,14 +75,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from "@nuxtjs/composition-api"
-import { pipe } from "fp-ts/function"
+import { Ref, ref, watch } from "@nuxtjs/composition-api"
+import { flow, pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
 import * as A from "fp-ts/Array"
-import { HoppRESTParam } from "@hoppscotch/data"
+import { HoppRESTVar } from "@hoppscotch/data"
 import cloneDeep from "lodash/cloneDeep"
-import { useI18n, useToast } from "~/helpers/utils/composables"
+import isEqual from "lodash/isEqual"
+import { useI18n, useStream, useToast } from "~/helpers/utils/composables"
 import { throwError } from "~/helpers/functional/error"
+import { restVars$, setRESTVars } from "~/newstore/RESTSession"
+import { objRemoveKey } from "~/helpers/functional/object"
 
 const t = useI18n()
 const toast = useToast()
@@ -95,49 +96,60 @@ const idTickerV = ref(0)
 
 const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
 
-const workingParamsV = ref<Array<HoppRESTParam & { id: number }>>([
+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++,
     key: "",
     value: "",
-    active: true,
   },
 ])
 
-watch(workingParamsV, (paramsList) => {
-  if (paramsList.length > 0 && paramsList[paramsList.length - 1].key !== "") {
-    workingParamsV.value.push({
+// Rule: Working vars always have last element is always an empty var
+watch(workingVars, (varsList) => {
+  if (varsList.length > 0 && varsList[varsList.length - 1].key !== "") {
+    workingVars.value.push({
       id: idTickerV.value++,
       key: "",
       value: "",
-      active: true,
     })
   }
 })
 
-const addParamV = () => {
-  workingParamsV.value.push({
+watch(workingVars, (newWorkingVars) => {
+  const fixedVars = pipe(
+    newWorkingVars,
+    A.filterMap(
+      flow(
+        O.fromPredicate((e) => e.key !== ""),
+        O.map(objRemoveKey("id"))
+      )
+    )
+  )
+
+  if (!isEqual(vars.value, fixedVars)) {
+    vars.value = cloneDeep(fixedVars)
+  }
+})
+
+const addVar = () => {
+  workingVars.value.push({
     id: idTickerV.value++,
     key: "",
     value: "",
-    active: true,
   })
 }
 
-const updateParamV = (index: number, param: HoppRESTParam & { id: number }) => {
-  workingParamsV.value = workingParamsV.value.map((h, i) =>
-    i === index ? param : h
-  )
+const updateVar = (index: number, vari: HoppRESTVar & { id: number }) => {
+  workingVars.value = workingVars.value.map((h, i) => (i === index ? vari : h))
 }
 
-const deleteParamV = (index: number) => {
-  const paramsBeforeDeletion = cloneDeep(workingParamsV.value)
-
+const deleteVar = (index: number) => {
+  const varsBeforeDeletion = cloneDeep(workingVars.value)
   if (
-    !(
-      paramsBeforeDeletion.length > 0 &&
-      index === paramsBeforeDeletion.length - 1
-    )
+    !(varsBeforeDeletion.length > 0 && index === varsBeforeDeletion.length - 1)
   ) {
     if (deletionToast.value) {
       deletionToast.value.goAway(0)
@@ -149,7 +161,7 @@ const deleteParamV = (index: number) => {
         {
           text: `${t("action.undo")}`,
           onClick: (_, toastObject) => {
-            workingParamsV.value = paramsBeforeDeletion
+            workingVars.value = varsBeforeDeletion
             toastObject.goAway(0)
             deletionToast.value = null
           },
@@ -162,8 +174,8 @@ const deleteParamV = (index: number) => {
     })
   }
 
-  workingParamsV.value = pipe(
-    workingParamsV.value,
+  workingVars.value = pipe(
+    workingVars.value,
     A.deleteAt(index),
     O.getOrElseW(() => throwError("Working Params Deletion Out of Bounds"))
   )

packages/hoppscotch-app/newstore/RESTSession.ts

@@ -9,6 +9,7 @@ import {
   RESTReqSchemaVersion,
   HoppRESTAuth,
   ValidContentTypes,
+  HoppRESTVar,
 } from "@hoppscotch/data"
 import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
@@ -29,6 +30,7 @@ export const getDefaultRESTRequest = (): HoppRESTRequest => ({
   endpoint: "https://echo.hoppscotch.io",
   name: "Untitled request",
   params: [],
+  vars: [],
   headers: [],
   method: "GET",
   auth: {
@@ -80,6 +82,14 @@ const dispatchers = defineDispatchers({
       },
     }
   },
+  setVars(curr: RESTSession, { entries }: { entries: HoppRESTVar[] }) {
+    return {
+      request: {
+        ...curr.request,
+        vars: entries,
+      },
+    }
+  },
   addParam(curr: RESTSession, { newParam }: { newParam: HoppRESTParam }) {
     return {
       request: {
@@ -88,6 +98,14 @@ const dispatchers = defineDispatchers({
       },
     }
   },
+  addVar(curr: RESTSession, { newVar }: { newVar: HoppRESTVar }) {
+    return {
+      request: {
+        ...curr.request,
+        vars: [...curr.request.vars, newVar],
+      },
+    }
+  },
   updateParam(
     curr: RESTSession,
     { index, updatedParam }: { index: number; updatedParam: HoppRESTParam }
@@ -104,6 +122,22 @@ const dispatchers = defineDispatchers({
       },
     }
   },
+  updateVar(
+    curr: RESTSession,
+    { index, updatedVar }: { index: number; updatedVar: HoppRESTVar }
+  ) {
+    const newVars = curr.request.vars.map((vari, i) => {
+      if (i === index) return updatedVar
+      else return vari
+    })
+
+    return {
+      request: {
+        ...curr.request,
+        vars: newVars,
+      },
+    }
+  },
   deleteParam(curr: RESTSession, { index }: { index: number }) {
     const newParams = curr.request.params.filter((_x, i) => i !== index)
 
@@ -373,6 +407,14 @@ export function setRESTParams(entries: HoppRESTParam[]) {
     },
   })
 }
+export function setRESTVars(entries: HoppRESTVar[]) {
+  restSessionStore.dispatch({
+    dispatcher: "setVars",
+    payload: {
+      entries,
+    },
+  })
+}
 
 export function addRESTParam(newParam: HoppRESTParam) {
   restSessionStore.dispatch({
@@ -382,6 +424,14 @@ export function addRESTParam(newParam: HoppRESTParam) {
     },
   })
 }
+export function addRESTVar(newVar: HoppRESTVar) {
+  restSessionStore.dispatch({
+    dispatcher: "addVar",
+    payload: {
+      newVar,
+    },
+  })
+}
 
 export function updateRESTParam(index: number, updatedParam: HoppRESTParam) {
   restSessionStore.dispatch({
@@ -392,6 +442,15 @@ export function updateRESTParam(index: number, updatedParam: HoppRESTParam) {
     },
   })
 }
+export function updateRESTVar(index: number, updatedVar: HoppRESTVar) {
+  restSessionStore.dispatch({
+    dispatcher: "updateVar",
+    payload: {
+      updatedVar,
+      index,
+    },
+  })
+}
 
 export function deleteRESTParam(index: number) {
   restSessionStore.dispatch({
@@ -592,12 +651,20 @@ export const restParams$ = restSessionStore.subject$.pipe(
   distinctUntilChanged()
 )
 
+export const restVars$ = restSessionStore.subject$.pipe(
+  pluck("request", "vars"),
+  distinctUntilChanged()
+)
+
 export const restActiveParamsCount$ = restParams$.pipe(
   map(
     (params) =>
       params.filter((x) => x.active && (x.key !== "" || x.value !== "")).length
   )
 )
+export const restActiveVarsCount$ = restVars$.pipe(
+  map((vars) => vars.filter((x) => x.key !== "" || x.value !== "").length)
+)
 
 export const restMethod$ = restSessionStore.subject$.pipe(
   pluck("request", "method"),

packages/hoppscotch-data/src/rest/index.ts

@@ -81,7 +81,7 @@ export const HoppRESTRequestEq = Eq.struct<HoppRESTRequest>({
     lodashIsEqualEq
   ),
   vars: mapThenEq(
-    (arr) => arr.filter((p) => p.key !== "" && p.value !== ""),
+    (arr) => arr.filter((v) => v.key !== "" && v.value !== ""),
     lodashIsEqualEq
   ),
   method: S.Eq,