From 93ea80a3e3c4f5466b89e9a154e865d7873f0518 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 12 Jul 2021 09:11:55 +0530
Subject: [PATCH] feat: init request state management

---
 components/http/Parameters.vue   | 141 +++++----
 helpers/types/HoppRESTRequest.ts |   1 +
 newstore/RESTSession.ts          | 191 ++++++++++++
 package-lock.json                | 510 ++++++++++++++++++-------------
 pages/index.vue                  |  39 ++-
 5 files changed, 584 insertions(+), 298 deletions(-)

diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index 5c7ecc5c0..725ea8de6 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -1,21 +1,26 @@
 <template>
   <AppSection label="parameters">
-    <div
-      v-if="params.length !== 0"
-      class="flex flex-1 items-center justify-between pl-4"
-    >
+    <div class="flex flex-1 items-center justify-between pl-4">
       <label for="paramList" class="font-semibold text-xs">
         {{ $t("parameter_list") }}
       </label>
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="$t('clear_all')"
-        icon="clear_all"
-        @click.native="clearContent('parameters', $event)"
-      />
+      <div>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('clear_all')"
+          icon="clear_all"
+          @click.native="clearContent"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('add_new')"
+          icon="add"
+          @click.native="addParam"
+        />
+      </div>
     </div>
     <div
-      v-for="(param, index) in params"
+      v-for="(param, index) in params$"
       :key="index"
       class="
         flex
@@ -41,9 +46,10 @@
         :value="param.key"
         autofocus
         @change="
-          $store.commit('setKeyParams', {
-            index,
-            value: $event.target.value,
+          updateParam(index, {
+            key: $event.target.value,
+            value: param.value,
+            active: param.active,
           })
         "
       />
@@ -61,43 +67,13 @@
         :name="'value' + index"
         :value="param.value"
         @change="
-          $store.commit('setValueParams', {
-            index,
+          updateParam(index, {
+            key: param.key,
             value: $event.target.value,
+            active: param.active,
           })
         "
       />
-      <div class="flex relative">
-        <span class="select-wrapper">
-          <select
-            class="
-              flex
-              w-full
-              px-4
-              text-xs
-              py-3
-              mr-8
-              focus:outline-none
-              font-medium
-              bg-primaryLight
-            "
-            :name="'type' + index"
-            @change="
-              $store.commit('setTypeParams', {
-                index,
-                value: $event.target.value,
-              })
-            "
-          >
-            <option value="query" :selected="param.type === 'query'">
-              {{ $t("query") }}
-            </option>
-            <option value="path" :selected="param.type === 'path'">
-              {{ $t("path") }}
-            </option>
-          </select>
-        </span>
-      </div>
       <div>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
@@ -116,9 +92,10 @@
               : 'check_box'
           "
           @click.native="
-            $store.commit('setActiveParams', {
-              index,
-              value: param.hasOwnProperty('active') ? !param.active : false,
+            updateParam(index, {
+              key: param.key,
+              value: param.value,
+              active: param.hasOwnProperty('active') ? !param.active : false,
             })
           "
         />
@@ -128,7 +105,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('delete')"
           icon="delete"
-          @click.native="removeRequestParam(index)"
+          @click.native="deleteParam(index)"
         />
       </div>
     </div>
@@ -136,36 +113,56 @@
 </template>
 
 <script>
+import {
+  restParams$,
+  addRESTParam,
+  updateRESTParam,
+  deleteRESTParam,
+  deleteAllRESTParams,
+} from "~/newstore/RESTSession"
+
 export default {
-  props: {
-    params: { type: Array, default: () => [] },
+  data() {
+    return {
+      params$: [],
+    }
   },
-  watch: {
-    params: {
-      handler(newValue) {
-        if (
-          newValue[newValue.length - 1]?.key !== "" ||
-          newValue[newValue.length - 1]?.value !== ""
-        )
-          this.addRequestParam()
-      },
-      deep: true,
-    },
+  subscriptions() {
+    return {
+      params$: restParams$,
+    }
   },
+  // watch: {
+  //   params$: {
+  //     handler(newValue) {
+  //       if (
+  //         newValue[newValue.length - 1]?.key !== "" ||
+  //         newValue[newValue.length - 1]?.value !== ""
+  //       )
+  //         this.addParam()
+  //     },
+  //     deep: true,
+  //   },
+  // },
   mounted() {
-    if (!this.params?.length) {
-      this.addRequestParam()
+    if (!this.params$?.length) {
+      this.addParam()
     }
   },
   methods: {
-    clearContent(parameters, $event) {
-      this.$emit("clear-content", parameters, $event)
+    addParam() {
+      addRESTParam({ key: "", value: "", active: true })
     },
-    removeRequestParam(index) {
-      this.$emit("remove-request-param", index)
+    updateParam(index, item) {
+      console.log(index, item)
+      updateRESTParam(index, item)
     },
-    addRequestParam() {
-      this.$emit("add-request-param")
+    deleteParam(index) {
+      console.log(index)
+      deleteRESTParam(index)
+    },
+    clearContent() {
+      deleteAllRESTParams()
     },
   },
 }
diff --git a/helpers/types/HoppRESTRequest.ts b/helpers/types/HoppRESTRequest.ts
index 02355ee5e..f0ceced5f 100644
--- a/helpers/types/HoppRESTRequest.ts
+++ b/helpers/types/HoppRESTRequest.ts
@@ -5,6 +5,7 @@ export type HoppRESTParam = {
 }
 
 export interface HoppRESTRequest {
+  method: string
   endpoint: string
   params: HoppRESTParam[]
 }
diff --git a/newstore/RESTSession.ts b/newstore/RESTSession.ts
index b9e85b6e5..bd33e4f38 100644
--- a/newstore/RESTSession.ts
+++ b/newstore/RESTSession.ts
@@ -39,6 +39,9 @@ function recalculateParams(
     if (!currentParam) {
       addedKeys.push(key)
       result.push({ key, value, active: true })
+    } else {
+      addedKeys.push(key)
+      result.push({ key, value, active: currentParam.active })
     }
   })
 
@@ -47,6 +50,59 @@ function recalculateParams(
   return result
 }
 
+function removeParamFromURL(url: string, param: string): string {
+  try {
+    const urlObj = new URL(url)
+    urlObj.searchParams.delete(param)
+    return urlObj.toString()
+  } catch (e) {
+    return url
+  }
+}
+
+function removeAllParamsFromURL(url: string): string {
+  try {
+    const urlObj = new URL(url)
+    const params: string[] = []
+
+    urlObj.searchParams.forEach((_value, key) => params.push(key))
+
+    params.forEach((key) => urlObj.searchParams.delete(key))
+
+    return urlObj.toString()
+  } catch (e) {
+    return url
+  }
+}
+
+function updateURLParam(
+  url: string,
+  currKey: string,
+  newKey: string,
+  newValue: string
+): string {
+  try {
+    const urlObj = new URL(url)
+
+    let params: { key: string; value: string }[] = []
+
+    urlObj.searchParams.forEach((value, key) => params.push({ key, value }))
+
+    params.forEach((x) => urlObj.searchParams.delete(x.key))
+
+    params = params.map((x) => {
+      if (x.key === currKey) return { key: newKey, value: newValue }
+      else return x
+    })
+
+    params.forEach((x) => urlObj.searchParams.append(x.key, x.value))
+
+    return urlObj.toString()
+  } catch (e) {
+    return url
+  }
+}
+
 type RESTSession = {
   request: HoppRESTRequest
 }
@@ -55,6 +111,7 @@ const defaultRESTSession: RESTSession = {
   request: {
     endpoint: "https://httpbin.org/",
     params: [],
+    method: "GET",
   },
 }
 
@@ -83,6 +140,100 @@ const dispatchers = defineDispatchers({
       },
     }
   },
+  updateParam(
+    curr: RESTSession,
+    { index, updatedParam }: { index: number; updatedParam: HoppRESTParam }
+  ) {
+    const paramsInURL = getParamsInURL(curr.request.endpoint).map((x) => x.key)
+
+    if (paramsInURL.includes(curr.request.params[index].key)) {
+      const updatedURL = updateURLParam(
+        curr.request.endpoint,
+        curr.request.params[index].key,
+        updatedParam.key,
+        updatedParam.value
+      )
+
+      const newParams = curr.request.params.map((param, i) => {
+        if (i === index) return updatedParam
+        else return param
+      })
+
+      return {
+        request: {
+          ...curr.request,
+          endpoint: updatedURL,
+          params: newParams,
+        },
+      }
+    } else {
+      const newParams = curr.request.params.map((param, i) => {
+        if (i === index) return updatedParam
+        else return param
+      })
+
+      return {
+        request: {
+          ...curr.request,
+          params: newParams,
+        },
+      }
+    }
+  },
+  deleteParam(curr: RESTSession, { index }: { index: number }) {
+    const paramsFromURL = getParamsInURL(curr.request.endpoint).map(
+      (x) => x.key
+    )
+    if (paramsFromURL.includes(curr.request.params[index].key)) {
+      const newURL = removeParamFromURL(
+        curr.request.endpoint,
+        curr.request.params[index].key
+      )
+
+      const newParams = getParamsInURL(newURL)
+
+      const recalculatedParams = recalculateParams(
+        curr.request.endpoint,
+        curr.request.params,
+        newParams
+      )
+      return {
+        request: {
+          ...curr.request,
+          endpoint: newURL,
+          params: recalculatedParams,
+        },
+      }
+    } else {
+      const newParams = curr.request.params.filter((_x, i) => i !== index)
+
+      return {
+        request: {
+          ...curr.request,
+          params: newParams,
+        },
+      }
+    }
+  },
+  deleteAllParams(curr: RESTSession) {
+    const newURL = removeAllParamsFromURL(curr.request.endpoint)
+
+    return {
+      request: {
+        ...curr.request,
+        endpoint: newURL,
+        params: [],
+      },
+    }
+  },
+  updateMethod(curr: RESTSession, { newMethod }: { newMethod: string }) {
+    return {
+      request: {
+        ...curr.request,
+        method: newMethod,
+      },
+    }
+  },
 })
 
 const restSessionStore = new DispatchingStore(defaultRESTSession, dispatchers)
@@ -105,6 +256,41 @@ export function addRESTParam(newParam: HoppRESTParam) {
   })
 }
 
+export function updateRESTParam(index: number, updatedParam: HoppRESTParam) {
+  restSessionStore.dispatch({
+    dispatcher: "updateParam",
+    payload: {
+      updatedParam,
+      index,
+    },
+  })
+}
+
+export function deleteRESTParam(index: number) {
+  restSessionStore.dispatch({
+    dispatcher: "deleteParam",
+    payload: {
+      index,
+    },
+  })
+}
+
+export function deleteAllRESTParams() {
+  restSessionStore.dispatch({
+    dispatcher: "deleteAllParams",
+    payload: {},
+  })
+}
+
+export function updateRESTMethod(newMethod: string) {
+  restSessionStore.dispatch({
+    dispatcher: "updateMethod",
+    payload: {
+      newMethod,
+    },
+  })
+}
+
 export const restRequest$ = restSessionStore.subject$.pipe(
   pluck("request"),
   distinctUntilChanged()
@@ -119,3 +305,8 @@ export const restParams$ = restSessionStore.subject$.pipe(
   pluck("request", "params"),
   distinctUntilChanged()
 )
+
+export const restMethod$ = restSessionStore.subject$.pipe(
+  pluck("request", "method"),
+  distinctUntilChanged()
+)
diff --git a/package-lock.json b/package-lock.json
index 61421f478..e86cd945a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,13 @@
 {
   "name": "hoppscotch",
   "version": "1.12.0",
-  "lockfileVersion": 1,
+  "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "version": "1.12.0",
       "dependencies": {
-        "@apollo/client": "^3.3.20",
+        "@apollo/client": "^3.3.21",
         "@nuxtjs/axios": "^5.13.6",
         "@nuxtjs/gtm": "^2.4.0",
         "@nuxtjs/robots": "^2.5.0",
@@ -18,7 +18,7 @@
         "acorn-walk": "^8.1.1",
         "core-js": "^3.15.2",
         "esprima": "^4.0.1",
-        "firebase": "^8.7.0",
+        "firebase": "^8.7.1",
         "graphql": "^15.5.1",
         "graphql-language-service-interface": "^2.8.4",
         "json-loader": "^0.5.7",
@@ -26,10 +26,10 @@
         "mustache": "^4.2.0",
         "node-interval-tree": "^1.3.3",
         "nuxt": "^2.15.7",
-        "nuxt-i18n": "^6.27.2",
+        "nuxt-i18n": "^6.27.3",
         "paho-mqtt": "^1.1.0",
-        "rxjs": "^7.1.0",
-        "socket.io-client": "^4.1.2",
+        "rxjs": "^7.2.0",
+        "socket.io-client": "^4.1.3",
         "socketio-wildcard": "^2.0.0",
         "splitpanes": "^2.3.6",
         "tern": "^0.24.3",
@@ -63,7 +63,7 @@
         "@nuxtjs/stylelint-module": "^4.0.0",
         "@nuxtjs/svg": "^0.1.12",
         "@testing-library/jest-dom": "^5.14.1",
-        "@types/lodash": "^4.14.170",
+        "@types/lodash": "^4.14.171",
         "@vue/test-utils": "^1.2.1",
         "babel-core": "^7.0.0-bridge.0",
         "babel-jest": "^27.0.6",
@@ -71,16 +71,16 @@
         "eslint-config-prettier": "^8.1.0",
         "eslint-plugin-nuxt": ">=2.0.0",
         "eslint-plugin-prettier": "^3.3.1",
-        "eslint-plugin-vue": "^7.12.1",
-        "husky": "^7.0.0",
+        "eslint-plugin-vue": "^7.13.0",
+        "husky": "^7.0.1",
         "jest": "^27.0.6",
         "jest-serializer-vue": "^2.0.2",
         "lint-staged": "^11.0.0",
-        "nuxt-windicss": "^1.1.2",
+        "nuxt-windicss": "^1.1.3",
         "prettier": "^2.3.2",
         "pretty-quick": "^3.1.1",
         "raw-loader": "^4.0.2",
-        "sass": "^1.35.1",
+        "sass": "^1.35.2",
         "sass-loader": "^10.2.0",
         "stylelint": "^13.12.0",
         "stylelint-config-prettier": "^8.0.2",
@@ -97,12 +97,15 @@
       "dev": true,
       "dependencies": {
         "@types/throttle-debounce": "^2.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@apollo/client": {
-      "version": "3.3.20",
-      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.3.20.tgz",
-      "integrity": "sha512-hS7UmBwJweudw/J3M0RAcusMHNiRuGqkRH6g91PM2ev8cXScIMdXr/++9jo7wD1nAITMCMF4HQQ3LFaw/Or0Bw==",
+      "version": "3.3.21",
+      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.3.21.tgz",
+      "integrity": "sha512-RAmZReFuKCKx0Rs5C0nVJwKomAHUHn+gGP/YvbEsXQWu0sXoncEUZa71UqlfCPVXa/0MkYOIbCXSQdOcuRrHgw==",
       "dependencies": {
         "@graphql-typed-document-node/core": "^3.0.0",
         "@types/zen-observable": "^0.8.0",
@@ -114,9 +117,22 @@
         "optimism": "^0.16.0",
         "prop-types": "^15.7.2",
         "symbol-observable": "^4.0.0",
-        "ts-invariant": "^0.7.0",
+        "ts-invariant": "^0.8.0",
         "tslib": "^1.10.0",
         "zen-observable": "^0.8.14"
+      },
+      "peerDependencies": {
+        "graphql": "^14.0.0 || ^15.0.0",
+        "react": "^16.8.0 || ^17.0.0",
+        "subscriptions-transport-ws": "^0.9.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "subscriptions-transport-ws": {
+          "optional": true
+        }
       }
     },
     "node_modules/@apollo/federation": {
@@ -2513,9 +2529,9 @@
       "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     },
     "node_modules/@firebase/database": {
-      "version": "0.10.6",
-      "resolved": "https://registry.npmjs.org/@firebase/database/-/database-0.10.6.tgz",
-      "integrity": "sha512-AGxRnKaJQd4Pq7sblrWI39XM5N2u/pZOeopMxVRja38Cubxp6P5T7lzpp0xNSOQ/RszAoHskGIlCfIz+teaXSQ==",
+      "version": "0.10.7",
+      "resolved": "https://registry.npmjs.org/@firebase/database/-/database-0.10.7.tgz",
+      "integrity": "sha512-7BFj8LFhGL+TmLiPOffOVfkrO2wm44mGcT0jqrkTkt1KydapmjABFJBRvONvlLij5LoWrJK1cSuE8wYDQrDq2Q==",
       "dependencies": {
         "@firebase/auth-interop-types": "0.1.6",
         "@firebase/component": "0.5.4",
@@ -7239,9 +7255,9 @@
       "dev": true
     },
     "node_modules/@types/lodash": {
-      "version": "4.14.170",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.170.tgz",
-      "integrity": "sha512-bpcvu/MKHHeYX+qeEN8GE7DIravODWdACVA1ctevD8CN24RhPZIKMn9ntfAsrvLfSX3cR5RrBKAbYm9bGs0A+Q==",
+      "version": "4.14.171",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.171.tgz",
+      "integrity": "sha512-7eQ2xYLLI/LsicL2nejW9Wyko3lcpN6O/z0ZLHrEQsg280zIdCv1t/0m6UtBjUHokCGBQ3gYTbHzDkZ1xOBwwg==",
       "dev": true
     },
     "node_modules/@types/long": {
@@ -8008,9 +8024,9 @@
       }
     },
     "node_modules/@windicss/plugin-utils": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-1.1.1.tgz",
-      "integrity": "sha512-niKEDyUpOfCGemFHopI9fxdWPpJQIZ/jmaU4spQXsGc1oEts164P8LUJPQmXc8C6vjKwkrH7KA+lxYNG5LmlDA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-1.2.0.tgz",
+      "integrity": "sha512-6OAsyz2yI0VKNHACT35FjWWzMZlMEF7Z0pIiNUd9+R9jc73+qJcK1DRCZ3YxnjuGk0G76b542uXQEJgv2jL3vA==",
       "dev": true,
       "dependencies": {
         "@antfu/utils": "^0.2.3",
@@ -8020,6 +8036,9 @@
         "magic-string": "^0.25.7",
         "micromatch": "^4.0.4",
         "windicss": "^3.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@wry/context": {
@@ -11857,7 +11876,8 @@
     "node_modules/core-js-pure": {
       "version": "3.12.1",
       "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.12.1.tgz",
-      "integrity": "sha512-1cch+qads4JnDSWsvc7d6nzlKAippwjUlf6vykkTLW53VSV+NkE6muGBToAjEA8pG90cSfcud3JgVmW2ds5TaQ=="
+      "integrity": "sha512-1cch+qads4JnDSWsvc7d6nzlKAippwjUlf6vykkTLW53VSV+NkE6muGBToAjEA8pG90cSfcud3JgVmW2ds5TaQ==",
+      "hasInstallScript": true
     },
     "node_modules/core-util-is": {
       "version": "1.0.2",
@@ -13149,9 +13169,6 @@
         "lru-cache": "^4.1.5",
         "semver": "^5.6.0",
         "sigmund": "^1.0.1"
-      },
-      "bin": {
-        "editorconfig": "bin/editorconfig"
       }
     },
     "node_modules/editorconfig/node_modules/lru-cache": {
@@ -13255,9 +13272,9 @@
       }
     },
     "node_modules/engine.io-client": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-5.1.1.tgz",
-      "integrity": "sha512-jPFpw2HLL0lhZ2KY0BpZhIJdleQcUO9W1xkIpo0h3d6s+5D6+EV/xgQw9qWOmymszv2WXef/6KUUehyxEKomlQ==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-5.1.2.tgz",
+      "integrity": "sha512-blRrgXIE0A/eurWXRzvfCLG7uUFJqfTGFsyJzXSK71srMMGJ2VraBLg8Mdw28uUxSpVicepBN9X7asqpD1mZcQ==",
       "dependencies": {
         "base64-arraybuffer": "0.1.4",
         "component-emitter": "~1.3.0",
@@ -13432,6 +13449,17 @@
       "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
       "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg=="
     },
+    "node_modules/esbuild": {
+      "version": "0.12.15",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.15.tgz",
+      "integrity": "sha512-72V4JNd2+48eOVCXx49xoSWHgC3/cCy96e7mbXKY+WOWghN00cCmlGnwVLRhRHorvv0dgCyuMYBZlM2xDM5OQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "peer": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -14063,18 +14091,21 @@
       }
     },
     "node_modules/eslint-plugin-vue": {
-      "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.12.1.tgz",
-      "integrity": "sha512-xHf/wCt88qmzqQerjaSteUFGASj7fPreglKD4ijnvoKRkoSJ3/H3kuJE8QFFtc+2wjw6hRDs834HH7vpuTJQzg==",
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.13.0.tgz",
+      "integrity": "sha512-u0+jL8h2MshRuMTCLslktxRsPTjlENNcNufhgHu01N982DmHVdeFniyMPoVLLRjACQOwdz3FdlsgYGBMBG+AKg==",
       "dev": true,
       "dependencies": {
         "eslint-utils": "^2.1.0",
         "natural-compare": "^1.4.0",
         "semver": "^7.3.2",
-        "vue-eslint-parser": "^7.6.0"
+        "vue-eslint-parser": "^7.8.0"
       },
       "engines": {
         "node": ">=8.10"
+      },
+      "peerDependencies": {
+        "eslint": "^6.2.0 || ^7.0.0"
       }
     },
     "node_modules/eslint-scope": {
@@ -15109,16 +15140,16 @@
       }
     },
     "node_modules/firebase": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/firebase/-/firebase-8.7.0.tgz",
-      "integrity": "sha512-eBth95zArEIGn0HGJfRuhtM68Ucs6bN0diPzX9BnqbwvngEe9iksr/u6wBL9/61CBhGc/+k+m9QJREQuqUbG7Q==",
+      "version": "8.7.1",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-8.7.1.tgz",
+      "integrity": "sha512-OM+pUxIAqd5+XQMGux8InhhWmHDqlzQij67ljomMNblrxGiFOh8bMe+DGU9r8dh7CDaBYNtT6L0KR859BqhkDQ==",
       "dependencies": {
         "@firebase/analytics": "0.6.14",
         "@firebase/app": "0.6.28",
         "@firebase/app-check": "0.2.0",
         "@firebase/app-types": "0.6.2",
         "@firebase/auth": "0.16.8",
-        "@firebase/database": "0.10.6",
+        "@firebase/database": "0.10.7",
         "@firebase/firestore": "2.3.8",
         "@firebase/functions": "0.6.13",
         "@firebase/installations": "0.4.30",
@@ -17030,9 +17061,9 @@
       "integrity": "sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao="
     },
     "node_modules/husky": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-7.0.0.tgz",
-      "integrity": "sha512-xK7lO0EtSzfFPiw+oQncQVy/XqV7UVVjxBByc+Iv5iK3yhW9boDoWgvZy3OGo48QKg/hUtZkzz0hi2HXa0kn7w==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-7.0.1.tgz",
+      "integrity": "sha512-gceRaITVZ+cJH9sNHqx5tFwbzlLCVxtVZcusME8JYQ8Edy5mpGDOqD8QBCdMhpyo9a+JXddnujQ4rpY2Ff9SJA==",
       "dev": true,
       "bin": {
         "husky": "lib/bin.js"
@@ -22094,6 +22125,7 @@
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.7.tgz",
       "integrity": "sha512-XHzK69Awgnec9UzHr1kc8EomQh4sjTQ8oRf8TsGrSmHDx9/UmiGG9E/mM3BuTfNeFwdNBvrqQq/RHL0xIeyFOA==",
+      "hasInstallScript": true,
       "dependencies": {
         "chokidar": "^3.2.2",
         "debug": "^3.2.6",
@@ -22273,9 +22305,9 @@
       }
     },
     "node_modules/nuxt-i18n": {
-      "version": "6.27.2",
-      "resolved": "https://registry.npmjs.org/nuxt-i18n/-/nuxt-i18n-6.27.2.tgz",
-      "integrity": "sha512-9L2Wfokm2iLWJi5coh9xzGvy9ipX2Fb/5hyIY0pnim87MpL6M5bxIkuEo34NkU0IvxeMkfEqYjxQh0E9Do8S9A==",
+      "version": "6.27.3",
+      "resolved": "https://registry.npmjs.org/nuxt-i18n/-/nuxt-i18n-6.27.3.tgz",
+      "integrity": "sha512-7+UeMM5hHZ7TGsU+t9DFsRSEgAh9FGN2DG10d/uF+l6ziie6XrlA4lTXD6aeE9i07vjt7Ifoz36r0gSuapullg==",
       "dependencies": {
         "@babel/parser": "^7.14.7",
         "@babel/traverse": "^7.14.7",
@@ -22287,7 +22319,7 @@
         "js-cookie": "^2.2.1",
         "klona": "^2.0.4",
         "lodash.merge": "^4.6.2",
-        "ufo": "^0.7.5",
+        "ufo": "^0.7.7",
         "vue-i18n": "^8.24.5"
       }
     },
@@ -22335,9 +22367,9 @@
       "integrity": "sha512-FeMLiqf8E5g6SdiVJsPcNZX8k4h2fBs1wp5Bb6uaNxn58ufK1axBqQZdmAQsqh0t9BuwFObybrdVJh6MKyPlyg=="
     },
     "node_modules/nuxt-windicss": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/nuxt-windicss/-/nuxt-windicss-1.1.2.tgz",
-      "integrity": "sha512-kdx6Rsstil1AsEgXMvIPBOggxQajUJkhIVD41R6xJ+yrd5XW4J5cTZntYypn3gALj33CZGhmAlIhXLYP3vIKfg==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/nuxt-windicss/-/nuxt-windicss-1.1.3.tgz",
+      "integrity": "sha512-9LKng04V4eZm4dv+Ur0YCax7IIlJRJT0BuOhyS01fORTM3hkH5edsUZJtP+EU2Da+AncPW8FDeL/OIJ+DsCyfw==",
       "dev": true,
       "dependencies": {
         "clear-module": "^4.1.1",
@@ -22346,8 +22378,8 @@
         "rimraf": "^3.0.2",
         "semver": "^7.3.5",
         "upath": "^2.0.1",
-        "vite-plugin-windicss": "1.1.1",
-        "windicss-webpack-plugin": "1.2.1"
+        "vite-plugin-windicss": "1.2.0",
+        "windicss-webpack-plugin": "1.2.4"
       }
     },
     "node_modules/nuxt-windicss/node_modules/defu": {
@@ -25771,6 +25803,22 @@
       "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.1.tgz",
       "integrity": "sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g=="
     },
+    "node_modules/rollup": {
+      "version": "2.53.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.53.1.tgz",
+      "integrity": "sha512-yiTCvcYXZEulNWNlEONOQVlhXA/hgxjelFSjNcrwAAIfYx/xqjSHwqg/cCaWOyFRKr+IQBaXwt723m8tCaIUiw==",
+      "dev": true,
+      "peer": true,
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -25796,9 +25844,9 @@
       }
     },
     "node_modules/rxjs": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.1.0.tgz",
-      "integrity": "sha512-gCFO5iHIbRPwznl6hAYuwNFld8W4S2shtSJIqG27ReWXo9IWrCyEICxUA+6vJHwSR/OakoenC4QsDxq50tzYmw==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.2.0.tgz",
+      "integrity": "sha512-aX8w9OpKrQmiPKfT1bqETtUr9JygIz6GZ+gql8v7CijClsP0laoFUdKzxFAoWuRdSlOdU2+crss+cMf+cqMTnw==",
       "dependencies": {
         "tslib": "~2.1.0"
       }
@@ -25827,9 +25875,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sass": {
-      "version": "1.35.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.35.1.tgz",
-      "integrity": "sha512-oCisuQJstxMcacOPmxLNiLlj4cUyN2+8xJnG7VanRoh2GOLr9RqkvI4AxA4a6LHVg/rsu+PmxXeGhrdSF9jCiQ==",
+      "version": "1.35.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.35.2.tgz",
+      "integrity": "sha512-jhO5KAR+AMxCEwIH3v+4zbB2WB0z67V1X0jbapfVwQQdjHZUGUyukpnoM6+iCMfsIUC016w9OPKQ5jrNOS9uXw==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0"
@@ -26418,15 +26466,15 @@
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
     "node_modules/socket.io-client": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.1.2.tgz",
-      "integrity": "sha512-RDpWJP4DQT1XeexmeDyDkm0vrFc0+bUsHDKiVGaNISJvJonhQQOMqV9Vwfg0ZpPJ27LCdan7iqTI92FRSOkFWQ==",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.1.3.tgz",
+      "integrity": "sha512-hISFn6PDpgDifVUiNklLHVPTMv1LAk8poHArfIUdXa+gKgbr0MZbAlquDFqCqsF30yBqa+jg42wgos2FK50BHA==",
       "dependencies": {
         "@types/component-emitter": "^1.2.10",
         "backo2": "~1.0.2",
         "component-emitter": "~1.3.0",
         "debug": "~4.3.1",
-        "engine.io-client": "~5.1.1",
+        "engine.io-client": "~5.1.2",
         "parseuri": "0.0.6",
         "socket.io-parser": "~4.0.4"
       },
@@ -26484,6 +26532,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
+      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-resolve": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
@@ -28295,9 +28353,9 @@
       "dev": true
     },
     "node_modules/ts-invariant": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.7.3.tgz",
-      "integrity": "sha512-UWDDeovyUTIMWj+45g5nhnl+8oo+GhxL5leTaHn5c8FkQWfh8v66gccLd2/YzVmV5hoQUjCEjhrXnQqVDJdvKA==",
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.8.2.tgz",
+      "integrity": "sha512-VI1ZSMW8soizP5dU8DsMbj/TncHf7bIUqavuE7FTeYeQat454HHurJ8wbfCnVWcDOMkyiBUWOW2ytew3xUxlRw==",
       "dependencies": {
         "tslib": "^2.1.0"
       },
@@ -28306,9 +28364,9 @@
       }
     },
     "node_modules/ts-invariant/node_modules/tslib": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
-      "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     },
     "node_modules/ts-jest": {
       "version": "27.0.3",
@@ -28555,9 +28613,9 @@
       }
     },
     "node_modules/ufo": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-0.7.5.tgz",
-      "integrity": "sha512-FGG+EgguC1oz5dTE1JptPWCyj6Z9mYpwvZY8PTu9Vh/Aoy+Mj9cpeQ3gg4kyEMDbMrH+lTYiw7bomG58B8X7Kg=="
+      "version": "0.7.7",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-0.7.7.tgz",
+      "integrity": "sha512-N25aY3HBkJBnahm+2l4JRBBrX5I+JPakF/tDHYDTjd3wUR7iFLdyiPhj8mBwBz21v728BKwM9L9tgBfCntgdlw=="
     },
     "node_modules/uglify-js": {
       "version": "3.13.10",
@@ -29138,16 +29196,63 @@
         "node": ">=4"
       }
     },
+    "node_modules/vite": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.4.1.tgz",
+      "integrity": "sha512-4BpKRis9uxIqPfIEcJ18LTBsamqnDFxTx45CXwagHjNltHa6PFEvf8Pe6OpgIHb0OyWT30OXOSSQvdOaX4OBiQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "esbuild": "^0.12.8",
+        "postcss": "^8.3.5",
+        "resolve": "^1.20.0",
+        "rollup": "^2.38.5"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/vite-plugin-windicss": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-1.1.1.tgz",
-      "integrity": "sha512-J1n3DoSg8BkQ42HDNzh+FqPhvBgCRgQ0Nvp2HLvb5FVl8FKEPw26Frc/oLaC1g9ypSlvkSM8011gHi+c+pxsRQ==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-1.2.0.tgz",
+      "integrity": "sha512-3teAmQHCDDDcy7On5fOj1sYTRVo8zAwJJd4SOapeGI7EuEzO2fHy6oDS6sPXVUnstbfoPbvrng1xvc3VAqI+sg==",
       "dev": true,
       "dependencies": {
-        "@windicss/plugin-utils": "1.1.1",
+        "@windicss/plugin-utils": "1.2.0",
         "chalk": "^4.1.1",
         "debug": "^4.3.2",
         "windicss": "^3.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^2.0.1"
+      }
+    },
+    "node_modules/vite/node_modules/postcss": {
+      "version": "8.3.5",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.5.tgz",
+      "integrity": "sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "colorette": "^1.2.2",
+        "nanoid": "^3.1.23",
+        "source-map-js": "^0.6.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/vm-browserify": {
@@ -29393,20 +29498,27 @@
       "integrity": "sha512-vKl1skEKn8EK9f8P2ZzhRnuaRHLHrlt1sbRmazlvsx6EiC3A8oWF8YCBrMJzoN+W3OnElwIGbVjsx6/xelY1AA=="
     },
     "node_modules/vue-eslint-parser": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.6.0.tgz",
-      "integrity": "sha512-QXxqH8ZevBrtiZMZK0LpwaMfevQi9UL7lY6Kcp+ogWHC88AuwUPwwCIzkOUc1LR4XsYAt/F9yHXAB/QoD17QXA==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.8.0.tgz",
+      "integrity": "sha512-ehmmrLZNYLUoKayvVW8l8HyPQIfuYZHiJoQLRP3dapDlTU7bGs4tqIKVGdAEpMuXS/b4R/PImCt7Tkj4UhX1SQ==",
       "dev": true,
       "dependencies": {
         "debug": "^4.1.1",
-        "eslint-scope": "^5.0.0",
+        "eslint-scope": "^5.1.1",
         "eslint-visitor-keys": "^1.1.0",
         "espree": "^6.2.1",
         "esquery": "^1.4.0",
-        "lodash": "^4.17.15"
+        "lodash": "^4.17.21",
+        "semver": "^6.3.0"
       },
       "engines": {
         "node": ">=8.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      },
+      "peerDependencies": {
+        "eslint": ">=5.0.0"
       }
     },
     "node_modules/vue-eslint-parser/node_modules/acorn": {
@@ -29457,6 +29569,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/vue-eslint-parser/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/vue-functional-data-merge": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
@@ -30863,9 +30984,9 @@
       }
     },
     "node_modules/windicss": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/windicss/-/windicss-3.1.3.tgz",
-      "integrity": "sha512-l7fpoba2LY9AYRy4UgcuOpbPsed8UsbpEQYUVWRR1wdAwiKxK6bGIMfpiKJtjPAPdh0GOGUqr6KJar0EDZSxzg==",
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/windicss/-/windicss-3.1.4.tgz",
+      "integrity": "sha512-3RBcANxdOy/n4dLVT8+0X409sGI+piO06ARbQ8RncxGuYgdw5Ip3hrhGIYajH67lV+tHc7xNVGxj73amOC9N0g==",
       "dev": true,
       "bin": {
         "windicss": "cli/index.js"
@@ -30875,33 +30996,18 @@
       }
     },
     "node_modules/windicss-webpack-plugin": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/windicss-webpack-plugin/-/windicss-webpack-plugin-1.2.1.tgz",
-      "integrity": "sha512-wvMjr7cD9adVdttizDGndTon6Jpm8efn0CWLagd6L2E1cQZ36jM7f5QbvsUh+N1mR/7aDfQqg55ndxc45L1+hA==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/windicss-webpack-plugin/-/windicss-webpack-plugin-1.2.4.tgz",
+      "integrity": "sha512-pARSqzaQUTVuG2Rj2zRuILTZ/KYiOvDNyHuG2/8H5/110QnmVItMqGbfRfuJp7nZVDSivKzOkfeYxgOYCZVSpg==",
       "dev": true,
       "dependencies": {
-        "@windicss/plugin-utils": "1.1.0",
+        "@windicss/plugin-utils": "1.2.0",
         "debug": "^4.3.1",
         "loader-utils": "^2.0.0",
         "magic-string": "^0.25.7",
         "upath": "^2.0.1",
         "webpack-virtual-modules": "^0.4.3",
-        "windicss": "3.1.3"
-      }
-    },
-    "node_modules/windicss-webpack-plugin/node_modules/@windicss/plugin-utils": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-1.1.0.tgz",
-      "integrity": "sha512-v9WhtcGKRehsbY2Omd9m+Jd0IsjbKJmRSa712BuPLZ+fZuCSomne9twjqtPn29IGqS6T/9lM8aOjW7mRMU1x/g==",
-      "dev": true,
-      "dependencies": {
-        "@antfu/utils": "^0.2.2",
-        "debug": "^4.3.2",
-        "fast-glob": "^3.2.5",
-        "jiti": "^1.10.1",
-        "magic-string": "^0.25.7",
-        "micromatch": "^4.0.4",
-        "windicss": "^3.1.3"
+        "windicss": "3.1.4"
       }
     },
     "node_modules/windicss-webpack-plugin/node_modules/loader-utils": {
@@ -33278,12 +33384,14 @@
     "@firebase/auth-interop-types": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.1.6.tgz",
-      "integrity": "sha512-etIi92fW3CctsmR9e3sYM3Uqnoq861M0Id9mdOPF6PWIg38BXL5k4upCNBggGUpLIS0H1grMOvy/wn1xymwe2g=="
+      "integrity": "sha512-etIi92fW3CctsmR9e3sYM3Uqnoq861M0Id9mdOPF6PWIg38BXL5k4upCNBggGUpLIS0H1grMOvy/wn1xymwe2g==",
+      "requires": {}
     },
     "@firebase/auth-types": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.10.3.tgz",
-      "integrity": "sha512-zExrThRqyqGUbXOFrH/sowuh2rRtfKHp9SBVY2vOqKWdCX1Ztn682n9WLtlUDsiYVIbBcwautYWk2HyCGFv0OA=="
+      "integrity": "sha512-zExrThRqyqGUbXOFrH/sowuh2rRtfKHp9SBVY2vOqKWdCX1Ztn682n9WLtlUDsiYVIbBcwautYWk2HyCGFv0OA==",
+      "requires": {}
     },
     "@firebase/component": {
       "version": "0.5.4",
@@ -33356,7 +33464,8 @@
     "@firebase/firestore-types": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-2.3.0.tgz",
-      "integrity": "sha512-QTW7NP7nDL0pgT/X53lyj+mIMh4nRQBBTBlRNQBt7eSyeqBf3ag3bxdQhCg358+5KbjYTC2/O6QtX9DlJZmh1A=="
+      "integrity": "sha512-QTW7NP7nDL0pgT/X53lyj+mIMh4nRQBBTBlRNQBt7eSyeqBf3ag3bxdQhCg358+5KbjYTC2/O6QtX9DlJZmh1A==",
+      "requires": {}
     },
     "@firebase/functions": {
       "version": "0.6.13",
@@ -33404,7 +33513,8 @@
     "@firebase/installations-types": {
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/@firebase/installations-types/-/installations-types-0.3.4.tgz",
-      "integrity": "sha512-RfePJFovmdIXb6rYwtngyxuEcWnOrzdZd9m7xAW0gRxDIjBT20n3BOhjpmgRWXo/DAxRmS7bRjWAyTHY9cqN7Q=="
+      "integrity": "sha512-RfePJFovmdIXb6rYwtngyxuEcWnOrzdZd9m7xAW0gRxDIjBT20n3BOhjpmgRWXo/DAxRmS7bRjWAyTHY9cqN7Q==",
+      "requires": {}
     },
     "@firebase/logger": {
       "version": "0.2.6",
@@ -33434,7 +33544,8 @@
     "@firebase/messaging-types": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@firebase/messaging-types/-/messaging-types-0.5.0.tgz",
-      "integrity": "sha512-QaaBswrU6umJYb/ZYvjR5JDSslCGOH6D9P136PhabFAHLTR4TWjsaACvbBXuvwrfCXu10DtcjMxqfhdNIB1Xfg=="
+      "integrity": "sha512-QaaBswrU6umJYb/ZYvjR5JDSslCGOH6D9P136PhabFAHLTR4TWjsaACvbBXuvwrfCXu10DtcjMxqfhdNIB1Xfg==",
+      "requires": {}
     },
     "@firebase/performance": {
       "version": "0.4.16",
@@ -33525,7 +33636,8 @@
     "@firebase/storage-types": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.4.1.tgz",
-      "integrity": "sha512-IM4cRzAnQ6QZoaxVZ5MatBzqXVcp47hOlE28jd9xXw1M9V7gfjhmW0PALGFQx58tPVmuUwIKyoEbHZjV4qRJwQ=="
+      "integrity": "sha512-IM4cRzAnQ6QZoaxVZ5MatBzqXVcp47hOlE28jd9xXw1M9V7gfjhmW0PALGFQx58tPVmuUwIKyoEbHZjV4qRJwQ==",
+      "requires": {}
     },
     "@firebase/util": {
       "version": "1.1.0",
@@ -38317,9 +38429,9 @@
       },
       "dependencies": {
         "tslib": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
         }
       }
     },
@@ -38347,9 +38459,9 @@
       },
       "dependencies": {
         "tslib": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
         }
       }
     },
@@ -38363,16 +38475,6 @@
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
-    "JSONStream": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz",
-      "integrity": "sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==",
-      "dev": true,
-      "requires": {
-        "jsonparse": "^1.2.0",
-        "through": ">=2.2.7 <3"
-      }
-    },
     "abab": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
@@ -40042,6 +40144,7 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
       "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "devOptional": true,
       "requires": {
         "file-uri-to-path": "1.0.0"
       }
@@ -41480,8 +41583,8 @@
       "integrity": "sha512-OG9kQtmMZBJD/32NEw5IhN5+HnBqVjy03eC+I71I0oQRFA5rOgA4OtPOYG7mz1GkCfCNxn3gKIX8EiHJYuf1cA==",
       "dev": true,
       "requires": {
-        "JSONStream": "^1.0.4",
         "is-text-path": "^1.0.1",
+        "JSONStream": "^1.0.4",
         "lodash": "^4.17.15",
         "meow": "^8.0.0",
         "split2": "^3.0.0",
@@ -42961,6 +43064,13 @@
       "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
       "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg=="
     },
+    "esbuild": {
+      "version": "0.12.15",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.15.tgz",
+      "integrity": "sha512-72V4JNd2+48eOVCXx49xoSWHgC3/cCy96e7mbXKY+WOWghN00cCmlGnwVLRhRHorvv0dgCyuMYBZlM2xDM5OQw==",
+      "dev": true,
+      "peer": true
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -43566,64 +43676,6 @@
         "natural-compare": "^1.4.0",
         "semver": "^7.3.2",
         "vue-eslint-parser": "^7.8.0"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "7.4.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-          "dev": true
-        },
-        "eslint-scope": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-          "dev": true,
-          "requires": {
-            "esrecurse": "^4.3.0",
-            "estraverse": "^4.1.1"
-          }
-        },
-        "eslint-visitor-keys": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-          "dev": true
-        },
-        "espree": {
-          "version": "6.2.1",
-          "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
-          "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
-          "dev": true,
-          "requires": {
-            "acorn": "^7.1.1",
-            "acorn-jsx": "^5.2.0",
-            "eslint-visitor-keys": "^1.1.0"
-          }
-        },
-        "vue-eslint-parser": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.8.0.tgz",
-          "integrity": "sha512-ehmmrLZNYLUoKayvVW8l8HyPQIfuYZHiJoQLRP3dapDlTU7bGs4tqIKVGdAEpMuXS/b4R/PImCt7Tkj4UhX1SQ==",
-          "dev": true,
-          "requires": {
-            "debug": "^4.1.1",
-            "eslint-scope": "^5.1.1",
-            "eslint-visitor-keys": "^1.1.0",
-            "espree": "^6.2.1",
-            "esquery": "^1.4.0",
-            "lodash": "^4.17.21",
-            "semver": "^6.3.0"
-          },
-          "dependencies": {
-            "semver": {
-              "version": "6.3.0",
-              "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-              "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-              "dev": true
-            }
-          }
-        }
       }
     },
     "eslint-scope": {
@@ -44290,7 +44342,8 @@
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw=="
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "devOptional": true
     },
     "fill-range": {
       "version": "7.0.1",
@@ -50326,11 +50379,6 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/is-https/-/is-https-4.0.0.tgz",
           "integrity": "sha512-FeMLiqf8E5g6SdiVJsPcNZX8k4h2fBs1wp5Bb6uaNxn58ufK1axBqQZdmAQsqh0t9BuwFObybrdVJh6MKyPlyg=="
-        },
-        "ufo": {
-          "version": "0.7.7",
-          "resolved": "https://registry.npmjs.org/ufo/-/ufo-0.7.7.tgz",
-          "integrity": "sha512-N25aY3HBkJBnahm+2l4JRBBrX5I+JPakF/tDHYDTjd3wUR7iFLdyiPhj8mBwBz21v728BKwM9L9tgBfCntgdlw=="
         }
       }
     },
@@ -53204,6 +53252,16 @@
       "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.1.tgz",
       "integrity": "sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g=="
     },
+    "rollup": {
+      "version": "2.53.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.53.1.tgz",
+      "integrity": "sha512-yiTCvcYXZEulNWNlEONOQVlhXA/hgxjelFSjNcrwAAIfYx/xqjSHwqg/cCaWOyFRKr+IQBaXwt723m8tCaIUiw==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "fsevents": "~2.3.2"
+      }
+    },
     "run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -53812,6 +53870,13 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
     },
+    "source-map-js": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
+      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+      "dev": true,
+      "peer": true
+    },
     "source-map-resolve": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
@@ -54115,6 +54180,14 @@
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
+    "string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "string-argv": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz",
@@ -54175,14 +54248,6 @@
         "define-properties": "^1.1.3"
       }
     },
-    "string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "requires": {
-        "safe-buffer": "~5.2.0"
-      }
-    },
     "stringify-object": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
@@ -55516,9 +55581,9 @@
       "integrity": "sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g=="
     },
     "ufo": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-0.7.5.tgz",
-      "integrity": "sha512-FGG+EgguC1oz5dTE1JptPWCyj6Z9mYpwvZY8PTu9Vh/Aoy+Mj9cpeQ3gg4kyEMDbMrH+lTYiw7bomG58B8X7Kg=="
+      "version": "0.7.7",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-0.7.7.tgz",
+      "integrity": "sha512-N25aY3HBkJBnahm+2l4JRBBrX5I+JPakF/tDHYDTjd3wUR7iFLdyiPhj8mBwBz21v728BKwM9L9tgBfCntgdlw=="
     },
     "uglify-js": {
       "version": "3.13.10",
@@ -56022,6 +56087,34 @@
         "unist-util-stringify-position": "^2.0.0"
       }
     },
+    "vite": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.4.1.tgz",
+      "integrity": "sha512-4BpKRis9uxIqPfIEcJ18LTBsamqnDFxTx45CXwagHjNltHa6PFEvf8Pe6OpgIHb0OyWT30OXOSSQvdOaX4OBiQ==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "esbuild": "^0.12.8",
+        "fsevents": "~2.3.2",
+        "postcss": "^8.3.5",
+        "resolve": "^1.20.0",
+        "rollup": "^2.38.5"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "8.3.5",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.5.tgz",
+          "integrity": "sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA==",
+          "dev": true,
+          "peer": true,
+          "requires": {
+            "colorette": "^1.2.2",
+            "nanoid": "^3.1.23",
+            "source-map-js": "^0.6.2"
+          }
+        }
+      }
+    },
     "vite-plugin-windicss": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-1.2.0.tgz",
@@ -56247,17 +56340,18 @@
       "integrity": "sha512-vKl1skEKn8EK9f8P2ZzhRnuaRHLHrlt1sbRmazlvsx6EiC3A8oWF8YCBrMJzoN+W3OnElwIGbVjsx6/xelY1AA=="
     },
     "vue-eslint-parser": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.6.0.tgz",
-      "integrity": "sha512-QXxqH8ZevBrtiZMZK0LpwaMfevQi9UL7lY6Kcp+ogWHC88AuwUPwwCIzkOUc1LR4XsYAt/F9yHXAB/QoD17QXA==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.8.0.tgz",
+      "integrity": "sha512-ehmmrLZNYLUoKayvVW8l8HyPQIfuYZHiJoQLRP3dapDlTU7bGs4tqIKVGdAEpMuXS/b4R/PImCt7Tkj4UhX1SQ==",
       "dev": true,
       "requires": {
         "debug": "^4.1.1",
-        "eslint-scope": "^5.0.0",
+        "eslint-scope": "^5.1.1",
         "eslint-visitor-keys": "^1.1.0",
         "espree": "^6.2.1",
         "esquery": "^1.4.0",
-        "lodash": "^4.17.15"
+        "lodash": "^4.17.21",
+        "semver": "^6.3.0"
       },
       "dependencies": {
         "acorn": {
@@ -56292,6 +56386,12 @@
             "acorn-jsx": "^5.2.0",
             "eslint-visitor-keys": "^1.1.0"
           }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
         }
       }
     },
diff --git a/pages/index.vue b/pages/index.vue
index c7d810661..ecf46ed1a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -33,8 +33,9 @@
                           border border-divider
                           transition
                           focus:outline-none focus:border-accent
+                          pointer-cursor
                         "
-                        v-model="method"
+                        :value="newMethod$"
                         :readonly="!customMethod"
                         autofocus
                       />
@@ -44,7 +45,7 @@
                       :key="`method-${index}`"
                       @click.native="
                         customMethod = methodMenuItem == 'CUSTOM' ? true : false
-                        method = methodMenuItem
+                        updateMethod(methodMenuItem)
                         $refs.options.tippy().hide()
                       "
                       :label="methodMenuItem"
@@ -96,6 +97,7 @@
                     font-semibold
                     bg-accent
                     text-white
+                    cursor-pointer
                   "
                 >
                   {{ $t("send") }}
@@ -115,6 +117,7 @@
                     font-semibold
                     bg-accent
                     text-white
+                    cursor-pointer
                   "
                 >
                   {{ $t("cancel") }}
@@ -187,7 +190,9 @@
                     truncate
                     font-semibold
                     rounded-l-lg
+                    cursor-pointer
                   "
+                  @click="saveRequest"
                 >
                   Save
                 </span>
@@ -227,7 +232,7 @@
                   />
                   <SmartItem
                     @click.native="
-                      copyRequest
+                      copyRequest()
                       $refs.saveOptions.tippy().hide()
                     "
                     ref="copyRequest"
@@ -237,7 +242,7 @@
                   />
                   <SmartItem
                     @click.native="
-                      saveRequest
+                      saveRequest()
                       $refs.saveOptions.tippy().hide()
                     "
                     ref="saveRequest"
@@ -251,22 +256,10 @@
             <SmartTabs styles="sticky top-70px z-10">
               <SmartTab
                 :id="'params'"
-                :label="
-                  $t('parameters') +
-                  `${
-                    newParams$.length !== 0
-                      ? ' \xA0 • \xA0 ' + newParams$.length
-                      : ''
-                  }`
-                "
+                :label="$t('parameters')"
                 :selected="true"
               >
-                <HttpParameters
-                  :params="newParams$"
-                  @clear-content="clearContent"
-                  @remove-request-param="removeRequestParam"
-                  @add-request-param="addRequestParam"
-                />
+                <HttpParameters />
               </SmartTab>
 
               <SmartTab
@@ -867,10 +860,11 @@ import { getSettingSubject, applySetting } from "~/newstore/settings"
 import { addRESTHistoryEntry } from "~/newstore/history"
 import clone from "lodash/clone"
 import {
+  restMethod$,
   restEndpoint$,
-  restParams$,
   restRequest$,
   setRESTEndpoint,
+  updateRESTMethod,
 } from "~/newstore/RESTSession"
 
 export default {
@@ -922,7 +916,7 @@ export default {
       ],
 
       newEndpoint$: "",
-      newParams$: [],
+      newMethod$: "",
     }
   },
   subscriptions() {
@@ -934,7 +928,7 @@ export default {
         "EXPERIMENTAL_URL_BAR_ENABLED"
       ),
       newEndpoint$: restEndpoint$,
-      newParams$: restParams$,
+      newMethod$: restMethod$,
     }
   },
   watch: {
@@ -1406,6 +1400,9 @@ export default {
     },
   },
   methods: {
+    updateMethod(method) {
+      updateRESTMethod(method)
+    },
     scrollInto(view) {
       this.$refs[view].$el.scrollIntoView({
         behavior: "smooth",