feat: init request state management

2021-07-12 09:11:55 +05:30
parent 68ff422a5f
commit 93ea80a3e3
5 changed files with 584 additions and 298 deletions
--- 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()
    },
  },
 }
--- 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[]
 }
--- 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()
+)
--- 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
        }
      }
    },
--- 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",