From 3533aa391ae482477c79468d0d47fafbcfa4464f Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Sat, 15 May 2021 12:43:31 +0000
Subject: [PATCH] chore: lint

---
 assets/css/fonts.css                        | 21 ++++++
 assets/md/folderBody.md                     |  4 +-
 components/app/Header.vue                   | 16 ++++-
 components/collections/graphql/index.vue    |  8 ++-
 components/collections/index.vue            | 10 ++-
 components/collections/my/Collection.vue    |  1 -
 components/collections/my/Folder.vue        |  1 -
 components/collections/my/Request.vue       |  3 +-
 components/collections/teams/Collection.vue |  2 -
 components/collections/teams/Folder.vue     |  1 -
 components/collections/teams/Request.vue    |  3 +-
 components/environments/Add.vue             |  2 +-
 components/environments/Edit.vue            | 11 ++-
 components/environments/Environment.vue     |  2 +-
 components/environments/ImportExport.vue    |  2 +-
 components/graphql/Field.vue                | 13 +++-
 components/http/BodyParameters.vue          | 75 ++++++++++++---------
 components/http/Headers.vue                 |  9 ++-
 components/http/Parameters.vue              |  9 ++-
 components/realtime/Socketio.vue            |  9 ++-
 components/smart/AccentModePicker.vue       | 15 ++++-
 components/smart/AutoComplete.vue           |  5 +-
 components/smart/ColorModePicker.vue        | 18 ++++-
 components/smart/Intersection.vue           |  2 +-
 helpers/migrations.ts                       |  6 +-
 helpers/syntax/gqlQueryLangMode.js          |  5 +-
 helpers/teams/TeamRequest.ts                |  8 +--
 newstore/DispatchingStore.ts                | 21 +++---
 newstore/__tests__/DispatchingStore.spec.js | 69 ++++++++++---------
 newstore/localpersistence.ts                |  8 +--
 newstore/settings.ts                        | 27 ++++----
 pages/graphql.vue                           |  9 ++-
 pages/index.vue                             |  7 +-
 plugins/vue-apollo.ts                       |  8 +--
 store/mutations.js                          |  2 +-
 tailwind.config.js                          |  1 +
 types/pw-ext-hook.d.ts                      |  2 +-
 types/ts-utils.d.ts                         |  2 +-
 vue-shim.d.ts                               |  2 +-
 39 files changed, 274 insertions(+), 145 deletions(-)

diff --git a/assets/css/fonts.css b/assets/css/fonts.css
index 035435e60..e9b5f4866 100644
--- a/assets/css/fonts.css
+++ b/assets/css/fonts.css
@@ -6,6 +6,7 @@
   font-display: swap;
   src: url('~assets/fonts/Material_Icons-400-fallback1.woff2') format('woff2');
 }
+
 /* devanagari */
 @font-face {
   font-family: 'Poppins';
@@ -15,6 +16,7 @@
   src: url('~assets/fonts/Poppins-400-devanagari2.woff2') format('woff2');
   unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Poppins';
@@ -24,6 +26,7 @@
   src: url('~assets/fonts/Poppins-400-latin-ext3.woff2') format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
 /* latin */
 @font-face {
   font-family: 'Poppins';
@@ -33,6 +36,7 @@
   src: url('~assets/fonts/Poppins-400-latin4.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
 /* devanagari */
 @font-face {
   font-family: 'Poppins';
@@ -42,6 +46,7 @@
   src: url('~assets/fonts/Poppins-500-devanagari5.woff2') format('woff2');
   unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Poppins';
@@ -51,6 +56,7 @@
   src: url('~assets/fonts/Poppins-500-latin-ext6.woff2') format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
 /* latin */
 @font-face {
   font-family: 'Poppins';
@@ -60,6 +66,7 @@
   src: url('~assets/fonts/Poppins-500-latin7.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
 /* devanagari */
 @font-face {
   font-family: 'Poppins';
@@ -69,6 +76,7 @@
   src: url('~assets/fonts/Poppins-600-devanagari8.woff2') format('woff2');
   unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Poppins';
@@ -78,6 +86,7 @@
   src: url('~assets/fonts/Poppins-600-latin-ext9.woff2') format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
 /* latin */
 @font-face {
   font-family: 'Poppins';
@@ -87,6 +96,7 @@
   src: url('~assets/fonts/Poppins-600-latin10.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
 /* devanagari */
 @font-face {
   font-family: 'Poppins';
@@ -96,6 +106,7 @@
   src: url('~assets/fonts/Poppins-700-devanagari11.woff2') format('woff2');
   unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Poppins';
@@ -105,6 +116,7 @@
   src: url('~assets/fonts/Poppins-700-latin-ext12.woff2') format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
 /* latin */
 @font-face {
   font-family: 'Poppins';
@@ -114,6 +126,7 @@
   src: url('~assets/fonts/Poppins-700-latin13.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
 /* devanagari */
 @font-face {
   font-family: 'Poppins';
@@ -123,6 +136,7 @@
   src: url('~assets/fonts/Poppins-800-devanagari14.woff2') format('woff2');
   unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Poppins';
@@ -132,6 +146,7 @@
   src: url('~assets/fonts/Poppins-800-latin-ext15.woff2') format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
 /* latin */
 @font-face {
   font-family: 'Poppins';
@@ -141,6 +156,7 @@
   src: url('~assets/fonts/Poppins-800-latin16.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
 /* cyrillic-ext */
 @font-face {
   font-family: 'Roboto Mono';
@@ -150,6 +166,7 @@
   src: url('~assets/fonts/Roboto_Mono-400-cyrillic-ext17.woff2') format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
+
 /* cyrillic */
 @font-face {
   font-family: 'Roboto Mono';
@@ -159,6 +176,7 @@
   src: url('~assets/fonts/Roboto_Mono-400-cyrillic18.woff2') format('woff2');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
+
 /* greek */
 @font-face {
   font-family: 'Roboto Mono';
@@ -168,6 +186,7 @@
   src: url('~assets/fonts/Roboto_Mono-400-greek19.woff2') format('woff2');
   unicode-range: U+0370-03FF;
 }
+
 /* vietnamese */
 @font-face {
   font-family: 'Roboto Mono';
@@ -177,6 +196,7 @@
   src: url('~assets/fonts/Roboto_Mono-400-vietnamese20.woff2') format('woff2');
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Roboto Mono';
@@ -186,6 +206,7 @@
   src: url('~assets/fonts/Roboto_Mono-400-latin-ext21.woff2') format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
 /* latin */
 @font-face {
   font-family: 'Roboto Mono';
diff --git a/assets/md/folderBody.md b/assets/md/folderBody.md
index 9646a84ab..3cd6afe02 100644
--- a/assets/md/folderBody.md
+++ b/assets/md/folderBody.md
@@ -49,7 +49,7 @@
 {{/isParams}}
 
 {{#isAuth}}
-**Authentication Type**: {{{auth}}}  
+**Authentication Type**: {{{auth}}}
 {{/isAuth}}
 
 {{#bearerToken}}
@@ -57,7 +57,7 @@
 {{/bearerToken}}
 
 {{#isAuthBasic}}
-Username: `{{{httpUser}}}`  
+Username: `{{{httpUser}}}`
 Password: `{{{httpPassword}}}`
 {{/isAuthBasic}}
 
diff --git a/components/app/Header.vue b/components/app/Header.vue
index b41bcc01e..5cd7bc6ff 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -22,7 +22,18 @@
           href="https://appwrite.io/?utm_source=hoppscotch&utm_medium=banner&utm_campaign=hello"
           target="_blank"
           rel="noopener"
-          class="inline-flex items-center px-4 py-2 mx-4 font-mono text-sm rounded-md bg-bgDarkColor hide-on-small-screen"
+          class="
+            inline-flex
+            items-center
+            px-4
+            py-2
+            mx-4
+            font-mono
+            text-sm
+            rounded-md
+            bg-bgDarkColor
+            hide-on-small-screen
+          "
         >
           Appwrite - Open-Source Backend as a Service
           <img class="w-8 ml-2" src="~assets/images/appwrite-icon.svg" alt="Appwrite" />
@@ -301,8 +312,7 @@ export default {
         navigator
           .share({
             title: "Hoppscotch",
-            text:
-              "Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.",
+            text: "Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.",
             url: "https://hoppscotch.io",
           })
           .then(() => {})
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index 2db4354ba..3dcbafb50 100644
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -162,7 +162,13 @@ export default {
     this._keyListener = function (e) {
       if (e.key === "Escape") {
         e.preventDefault()
-        this.showModalAdd = this.showModalEdit = this.showModalImportExport = this.showModalAddFolder = this.showModalEditFolder = this.showModalEditRequest = false
+        this.showModalAdd =
+          this.showModalEdit =
+          this.showModalImportExport =
+          this.showModalAddFolder =
+          this.showModalEditFolder =
+          this.showModalEditRequest =
+            false
       }
     }
     document.addEventListener("keydown", this._keyListener.bind(this))
diff --git a/components/collections/index.vue b/components/collections/index.vue
index f542f697b..b69cf358f 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -275,7 +275,13 @@ export default {
     this._keyListener = function (e) {
       if (e.key === "Escape") {
         e.preventDefault()
-        this.showModalAdd = this.showModalEdit = this.showModalImportExport = this.showModalAddFolder = this.showModalEditFolder = this.showModalEditRequest = false
+        this.showModalAdd =
+          this.showModalEdit =
+          this.showModalImportExport =
+          this.showModalAddFolder =
+          this.showModalEditFolder =
+          this.showModalEditRequest =
+            false
       }
     }
     document.addEventListener("keydown", this._keyListener.bind(this))
@@ -579,7 +585,7 @@ export default {
             .mutate({
               // Query
               mutation: gql`
-                mutation($collectionID: String!) {
+                mutation ($collectionID: String!) {
                   deleteCollection(collectionID: $collectionID)
                 }
               `,
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index 72e3c9da0..1d0d34a91 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -194,7 +194,6 @@ export default {
         this.$emit("select", {
           picked: {
             pickedType: "my-collection",
-
             collectionIndex: this.collectionIndex,
           },
         })
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index 4c1c0e1be..dc48ca50b 100644
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -176,7 +176,6 @@ export default {
         this.$emit("select", {
           picked: {
             pickedType: "my-folder",
-
             collectionIndex: this.collectionIndex,
             folderName: this.folder.name,
             folderPath: this.folderPath,
diff --git a/components/collections/my/Request.vue b/components/collections/my/Request.vue
index c29de89d0..ff7a435b8 100644
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -14,7 +14,7 @@
           @click="!doc ? selectRequest() : {}"
           v-tooltip="!doc ? $t('use_request') : ''"
         >
-          <i v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
+          <i v-if="isSelected" class="mx-3 text-green-400 material-icons">check_circle</i>
 
           <span v-else :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
           <span>{{ request.name }}</span>
@@ -104,7 +104,6 @@ export default {
         this.$emit("select", {
           picked: {
             pickedType: "my-request",
-
             collectionIndex: this.collectionIndex,
             folderPath: this.folderPath,
             folderName: this.folderName,
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index 2b5775e1e..ef8dc9f47 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -183,7 +183,6 @@ export default {
         this.$emit("select", {
           picked: {
             pickedType: "teams-collection",
-
             collectionID: this.collection.id,
           },
         })
@@ -193,7 +192,6 @@ export default {
         this.$emit("select", {
           picked: {
             pickedType: "teams-collection",
-
             collectionID: this.collection.id,
           },
         })
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index 023d5e978..855088b17 100644
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -164,7 +164,6 @@ export default {
         this.$emit("select", {
           picked: {
             pickedType: "teams-folder",
-
             folderID: this.folder.id,
           },
         })
diff --git a/components/collections/teams/Request.vue b/components/collections/teams/Request.vue
index c18a04730..f48df2e47 100644
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -7,7 +7,7 @@
           @click="!doc ? selectRequest() : {}"
           v-tooltip="!doc ? $t('use_request') : ''"
         >
-          <i v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
+          <i v-if="isSelected" class="mx-3 text-green-400 material-icons">check_circle</i>
 
           <span v-else :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
           <span>{{ request.name }}</span>
@@ -102,6 +102,7 @@ export default {
             requestID: this.requestIndex,
           },
         })
+      else this.$store.commit("postwoman/selectRequest", { request: this.request })
     },
     removeRequest() {
       this.$emit("remove-request", {
diff --git a/components/environments/Add.vue b/components/environments/Add.vue
index 979a35ce1..1598d1caf 100644
--- a/components/environments/Add.vue
+++ b/components/environments/Add.vue
@@ -51,7 +51,7 @@ export default {
   },
   subscriptions() {
     return {
-      SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments")
+      SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"),
     }
   },
   methods: {
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 2e598fbcb..4af1dd81e 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -30,7 +30,14 @@
       <ul
         v-for="(variable, index) in this.editingEnvCopy.variables"
         :key="index"
-        class="border-b border-dashed divide-y md:divide-x border-brdColor divide-dashed divide-brdColor md:divide-y-0"
+        class="
+          border-b border-dashed
+          divide-y
+          md:divide-x
+          border-brdColor
+          divide-dashed divide-brdColor
+          md:divide-y-0
+        "
         :class="{ 'border-t': index == 0 }"
       >
         <li>
@@ -118,7 +125,7 @@ export default {
   },
   subscriptions() {
     return {
-      SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments")
+      SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"),
     }
   },
   watch: {
diff --git a/components/environments/Environment.vue b/components/environments/Environment.vue
index d807ebef2..b41036577 100644
--- a/components/environments/Environment.vue
+++ b/components/environments/Environment.vue
@@ -52,7 +52,7 @@ export default {
   },
   subscriptions() {
     return {
-      SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments")
+      SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"),
     }
   },
   methods: {
diff --git a/components/environments/ImportExport.vue b/components/environments/ImportExport.vue
index 856817a84..586b0d3c2 100644
--- a/components/environments/ImportExport.vue
+++ b/components/environments/ImportExport.vue
@@ -124,7 +124,7 @@ export default {
   },
   subscriptions() {
     return {
-      SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments")
+      SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"),
     }
   },
   props: {
diff --git a/components/graphql/Field.vue b/components/graphql/Field.vue
index 98d90cb87..088365329 100644
--- a/components/graphql/Field.vue
+++ b/components/graphql/Field.vue
@@ -17,7 +17,18 @@
       {{ gqlField.description }}
     </div>
     <div
-      class="inline-block px-4 py-2 my-2 text-sm font-bold text-black bg-yellow-200 rounded-lg field-deprecated"
+      class="
+        inline-block
+        px-4
+        py-2
+        my-2
+        text-sm
+        font-bold
+        text-black
+        bg-yellow-200
+        rounded-lg
+        field-deprecated
+      "
       v-if="gqlField.isDeprecated"
     >
       {{ $t("deprecated") }}
diff --git a/components/http/BodyParameters.vue b/components/http/BodyParameters.vue
index be9c38c85..0bdebae34 100644
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -19,7 +19,14 @@
     <ul
       v-for="(param, index) in bodyParams"
       :key="index"
-      class="border-b border-dashed divide-y md:divide-x border-brdColor divide-dashed divide-brdColor md:divide-y-0"
+      class="
+        border-b border-dashed
+        divide-y
+        md:divide-x
+        border-brdColor
+        divide-dashed divide-brdColor
+        md:divide-y-0
+      "
       :class="{ 'border-t': index == 0 }"
     >
       <li>
@@ -60,7 +67,7 @@
         <li>
           <button
             class="icon"
-            @click="toggleActive(index,param)"
+            @click="toggleActive(index, param)"
             v-tooltip.bottom="{
               content: param.hasOwnProperty('active')
                 ? param.active
@@ -148,8 +155,10 @@ export default {
       this.$emit("set-route-query-state")
     },
     removeRequestBodyParam(index) {
-      const paramArr = this.$store.state.request.bodyParams
-        .filter((item, itemIndex) => itemIndex !== index && (item.hasOwnProperty("active") ? item.active == true : true))
+      const paramArr = this.$store.state.request.bodyParams.filter(
+        (item, itemIndex) =>
+          itemIndex !== index && (item.hasOwnProperty("active") ? item.active == true : true)
+      )
       this.setRawParams(paramArr)
       this.$emit("remove-request-body-param", index)
     },
@@ -174,44 +183,44 @@ export default {
         fileIndex,
       })
     },
-    updateBodyParams(event, index, type){
+    updateBodyParams(event, index, type) {
       this.$store.commit(type, {
         index,
         value: event.target.value,
       })
-      let paramArr = this.$store.state.request.bodyParams
-        .filter((item) => (item.hasOwnProperty("active") ? item.active == true : true))
-        
-        this.setRawParams(paramArr)
-    },
-    toggleActive(index, param){
-      let paramArr = this.$store.state.request.bodyParams
-      .filter((item, itemIndex) => {
-          if(index === itemIndex){
-              return !param.active
-          } else {
-              return item.hasOwnProperty("active") ? item.active == true : true
-          }
-      })
-        
-      this.setRawParams(paramArr)
+      let paramArr = this.$store.state.request.bodyParams.filter((item) =>
+        item.hasOwnProperty("active") ? item.active == true : true
+      )
 
-      this.$store.commit('setActiveBodyParams', {
-        index,
-        value: param.hasOwnProperty('active') ? !param.active : false,
-      })
+      this.setRawParams(paramArr)
     },
-    setRawParams(filteredParamArr){
-      let rawParams = {}
-      filteredParamArr.forEach(_param=>{
-        rawParams={
-          ...rawParams,
-          [_param.key]:_param.value
+    toggleActive(index, param) {
+      let paramArr = this.$store.state.request.bodyParams.filter((item, itemIndex) => {
+        if (index === itemIndex) {
+          return !param.active
+        } else {
+          return item.hasOwnProperty("active") ? item.active == true : true
         }
       })
-      const rawParamsStr = JSON.stringify(rawParams,null,2)
+
+      this.setRawParams(paramArr)
+
+      this.$store.commit("setActiveBodyParams", {
+        index,
+        value: param.hasOwnProperty("active") ? !param.active : false,
+      })
+    },
+    setRawParams(filteredParamArr) {
+      let rawParams = {}
+      filteredParamArr.forEach((_param) => {
+        rawParams = {
+          ...rawParams,
+          [_param.key]: _param.value,
+        }
+      })
+      const rawParamsStr = JSON.stringify(rawParams, null, 2)
       this.$store.commit("setState", { value: rawParamsStr, attribute: "rawParams" })
-    }
+    },
   },
   computed: {
     contentType() {
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index 31939ad98..4531fd4b9 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -19,7 +19,14 @@
     <ul
       v-for="(header, index) in headers"
       :key="`${header.value}_${index}`"
-      class="border-b border-dashed divide-y md:divide-x border-brdColor divide-dashed divide-brdColor md:divide-y-0"
+      class="
+        border-b border-dashed
+        divide-y
+        md:divide-x
+        border-brdColor
+        divide-dashed divide-brdColor
+        md:divide-y-0
+      "
       :class="{ 'border-t': index == 0 }"
     >
       <li>
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index 27aae87e5..85fb50788 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -19,7 +19,14 @@
     <ul
       v-for="(param, index) in params"
       :key="index"
-      class="border-b border-dashed divide-y md:divide-x border-brdColor divide-dashed divide-brdColor md:divide-y-0"
+      class="
+        border-b border-dashed
+        divide-y
+        md:divide-x
+        border-brdColor
+        divide-dashed divide-brdColor
+        md:divide-y-0
+      "
       :class="{ 'border-t': index == 0 }"
     >
       <li>
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index 4ca7d4bda..125fa84ae 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -71,7 +71,14 @@
       <ul
         v-for="(input, index) of communication.inputs"
         :key="`input-${index}`"
-        class="border-b border-dashed divide-y md:divide-x border-brdColor divide-dashed divide-brdColor md:divide-y-0"
+        class="
+          border-b border-dashed
+          divide-y
+          md:divide-x
+          border-brdColor
+          divide-dashed divide-brdColor
+          md:divide-y-0
+        "
         :class="{ 'border-t': index == 0 }"
       >
         <li>
diff --git a/components/smart/AccentModePicker.vue b/components/smart/AccentModePicker.vue
index 9fb0e8bf3..cf89f2c8d 100644
--- a/components/smart/AccentModePicker.vue
+++ b/components/smart/AccentModePicker.vue
@@ -15,7 +15,20 @@
         v-for="(color, index) of accentColors"
         :key="`color-${index}`"
         v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
-        class="inline-flex items-center justify-center p-3 m-2 transition duration-150 ease-in-out bg-transparent rounded-full cursor-pointer hover:shadow-none"
+        class="
+          inline-flex
+          items-center
+          justify-center
+          p-3
+          m-2
+          transition
+          duration-150
+          ease-in-out
+          bg-transparent
+          rounded-full
+          cursor-pointer
+          hover:shadow-none
+        "
         :class="[`text-${color}-400`, { 'bg-actColor': color === active }]"
         @click="setActiveColor(color)"
       >
diff --git a/components/smart/AutoComplete.vue b/components/smart/AutoComplete.vue
index ecde272f9..d3e8f480a 100644
--- a/components/smart/AutoComplete.vue
+++ b/components/smart/AutoComplete.vue
@@ -176,9 +176,8 @@ export default {
           break
 
         case "Tab":
-          let activeSuggestion = this.suggestions[
-            this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0
-          ]
+          let activeSuggestion =
+            this.suggestions[this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0]
 
           if (!activeSuggestion) {
             return
diff --git a/components/smart/ColorModePicker.vue b/components/smart/ColorModePicker.vue
index b98d35dce..4cc082341 100644
--- a/components/smart/ColorModePicker.vue
+++ b/components/smart/ColorModePicker.vue
@@ -14,7 +14,23 @@
         v-for="(color, index) of colors"
         :key="`color-${index}`"
         v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
-        class="inline-flex items-center justify-center p-3 m-2 transition duration-150 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 text-fgLightColor hover:text-fgColor hover:shadow-none"
+        class="
+          inline-flex
+          items-center
+          justify-center
+          p-3
+          m-2
+          transition
+          duration-150
+          ease-in-out
+          bg-transparent
+          rounded-full
+          cursor-pointer
+          border-collapseer-2
+          text-fgLightColor
+          hover:text-fgColor
+          hover:shadow-none
+        "
         :class="[
           { 'bg-actColor': color === $colorMode.preference },
           { 'text-acColor hover:text-acColor': color === $colorMode.value },
diff --git a/components/smart/Intersection.vue b/components/smart/Intersection.vue
index 047015bb7..bdf4d1b48 100644
--- a/components/smart/Intersection.vue
+++ b/components/smart/Intersection.vue
@@ -4,7 +4,7 @@
   </div>
 </template>
 <script lang="ts">
-/* 
+/*
   Implements a wrapper listening to viewport intersections via
   IntesectionObserver API
 
diff --git a/helpers/migrations.ts b/helpers/migrations.ts
index 0720e0511..5bab6f96d 100644
--- a/helpers/migrations.ts
+++ b/helpers/migrations.ts
@@ -6,12 +6,8 @@ import { settingsStore, applySetting } from "~/newstore/settings"
  */
 
 export function performMigrations(): void {
-
   // Migrate old default proxy URL to the new proxy URL (if not set / overridden)
-  if (
-    settingsStore.value.PROXY_URL === "https://hoppscotch.apollosoftware.xyz/"
-  ) {
+  if (settingsStore.value.PROXY_URL === "https://hoppscotch.apollosoftware.xyz/") {
     applySetting("PROXY_URL", "https://proxy.hoppscotch.io/")
   }
-
 }
diff --git a/helpers/syntax/gqlQueryLangMode.js b/helpers/syntax/gqlQueryLangMode.js
index 6fdb40f39..233561054 100644
--- a/helpers/syntax/gqlQueryLangMode.js
+++ b/helpers/syntax/gqlQueryLangMode.js
@@ -98,8 +98,9 @@ export function defineGQLLanguageMode(ace) {
     (aceRequire, exports) => {
       const oop = aceRequire("ace/lib/oop")
       const TextMode = aceRequire("ace/mode/text").Mode
-      const GQLQueryTextHighlightRules = aceRequire("ace/mode/gql-query-highlight")
-        .GQLQueryTextHighlightRules
+      const GQLQueryTextHighlightRules = aceRequire(
+        "ace/mode/gql-query-highlight"
+      ).GQLQueryTextHighlightRules
       const FoldMode = aceRequire("ace/mode/folding/cstyle").FoldMode
 
       const Mode = function () {
diff --git a/helpers/teams/TeamRequest.ts b/helpers/teams/TeamRequest.ts
index fdafb6e09..ccc04b235 100644
--- a/helpers/teams/TeamRequest.ts
+++ b/helpers/teams/TeamRequest.ts
@@ -2,8 +2,8 @@
  * Defines how a Teams request is represented in TeamCollectionAdapter
  */
 export interface TeamRequest {
-  id: string;
-  collectionID: string;
-  title: string;
-  request: any;
+  id: string
+  collectionID: string
+  title: string
+  request: any
 }
diff --git a/newstore/DispatchingStore.ts b/newstore/DispatchingStore.ts
index be49de836..6b450f5d5 100644
--- a/newstore/DispatchingStore.ts
+++ b/newstore/DispatchingStore.ts
@@ -3,18 +3,20 @@ import { map } from "rxjs/operators"
 import assign from "lodash/assign"
 import clone from "lodash/clone"
 
-
-type Dispatch<StoreType, DispatchersType extends Dispatchers<StoreType>, K extends keyof DispatchersType> = {
-  dispatcher: K & string,
+type Dispatch<
+  StoreType,
+  DispatchersType extends Dispatchers<StoreType>,
+  K extends keyof DispatchersType
+> = {
+  dispatcher: K & string
   payload: any
 }
 
-export type Dispatchers<StoreType> = { 
-  [ key: string ]: (currentVal: StoreType, payload: any) => Partial<StoreType> 
+export type Dispatchers<StoreType> = {
+  [key: string]: (currentVal: StoreType, payload: any) => Partial<StoreType>
 }
 
 export default class DispatchingStore<StoreType, DispatchersType extends Dispatchers<StoreType>> {
-
   #state$: BehaviorSubject<StoreType>
   #dispatchers: Dispatchers<StoreType>
   #dispatches$: Subject<Dispatch<StoreType, DispatchersType, keyof DispatchersType>> = new Subject()
@@ -24,11 +26,8 @@ export default class DispatchingStore<StoreType, DispatchersType extends Dispatc
     this.#dispatchers = dispatchers
 
     this.#dispatches$
-      .pipe(
-        map(
-          ({ dispatcher, payload }) => this.#dispatchers[dispatcher](this.value, payload)
-        )
-      ).subscribe(val => {
+      .pipe(map(({ dispatcher, payload }) => this.#dispatchers[dispatcher](this.value, payload)))
+      .subscribe((val) => {
         const data = clone(this.value)
         assign(data, val)
 
diff --git a/newstore/__tests__/DispatchingStore.spec.js b/newstore/__tests__/DispatchingStore.spec.js
index 342467993..d2a9812d9 100644
--- a/newstore/__tests__/DispatchingStore.spec.js
+++ b/newstore/__tests__/DispatchingStore.spec.js
@@ -3,7 +3,6 @@ import isEqual from "lodash/isEqual"
 import DispatchingStore from "~/newstore/DispatchingStore"
 
 describe("DispatchingStore", () => {
-
   test("'subject$' property properly returns an BehaviorSubject", () => {
     const store = new DispatchingStore({}, {})
 
@@ -28,22 +27,25 @@ describe("DispatchingStore", () => {
     expect(() => {
       store.dispatch({
         dispatcher: "non-existent",
-        payload: {}
+        payload: {},
       })
     }).toThrow()
   })
 
   test("valid dispatcher calls run without throwing", () => {
-    const store = new DispatchingStore({}, {
-      testDispatcher(_currentValue, _payload) {
-        // Nothing here
+    const store = new DispatchingStore(
+      {},
+      {
+        testDispatcher(_currentValue, _payload) {
+          // Nothing here
+        },
       }
-    })
+    )
 
     expect(() => {
       store.dispatch({
         dispatcher: "testDispatcher",
-        payload: {}
+        payload: {},
       })
     }).not.toThrow()
   })
@@ -52,14 +54,17 @@ describe("DispatchingStore", () => {
     const dispatchFn = jest.fn().mockReturnValue({})
     const dontCallDispatchFn = jest.fn().mockReturnValue({})
 
-    const store = new DispatchingStore({}, {
-      testDispatcher: dispatchFn,
-      dontCallDispatcher: dontCallDispatchFn
-    })
+    const store = new DispatchingStore(
+      {},
+      {
+        testDispatcher: dispatchFn,
+        dontCallDispatcher: dontCallDispatchFn,
+      }
+    )
 
     store.dispatch({
       dispatcher: "testDispatcher",
-      payload: {}
+      payload: {},
     })
 
     expect(dispatchFn).toHaveBeenCalledTimes(1)
@@ -73,17 +78,17 @@ describe("DispatchingStore", () => {
     const testDispatchFn = jest.fn().mockReturnValue({})
 
     const store = new DispatchingStore(testInitValue, {
-      testDispatcher: testDispatchFn
+      testDispatcher: testDispatchFn,
     })
 
     store.dispatch({
       dispatcher: "testDispatcher",
-      payload: testPayload
+      payload: testPayload,
     })
-    
+
     expect(testDispatchFn).toHaveBeenCalledWith(testInitValue, testPayload)
   })
-  
+
   test("dispatcher returns are used to update the store correctly", () => {
     const testInitValue = { name: "bob" }
     const testDispatchReturnVal = { name: "alice" }
@@ -91,12 +96,12 @@ describe("DispatchingStore", () => {
     const testDispatchFn = jest.fn().mockReturnValue(testDispatchReturnVal)
 
     const store = new DispatchingStore(testInitValue, {
-      testDispatcher: testDispatchFn
+      testDispatcher: testDispatchFn,
     })
 
     store.dispatch({
       dispatcher: "testDispatcher",
-      payload: {}         // Payload doesn't matter because the function is mocked
+      payload: {}, // Payload doesn't matter because the function is mocked
     })
 
     expect(store.value).toEqual(testDispatchReturnVal)
@@ -109,47 +114,47 @@ describe("DispatchingStore", () => {
     const testDispatchFn = jest.fn().mockReturnValue(testDispatchReturnVal)
 
     const store = new DispatchingStore(testInitValue, {
-      testDispatcher: testDispatchFn
+      testDispatcher: testDispatchFn,
     })
 
     store.dispatch({
       dispatcher: "testDispatcher",
-      payload: {}
+      payload: {},
     })
-    
+
     expect(store.value).toEqual({
       name: "bob",
-      age: 25
+      age: 25,
     })
   })
 
-  test("emits the current store value to the new subscribers", done => {
+  test("emits the current store value to the new subscribers", (done) => {
     const testInitValue = { name: "bob" }
 
     const testDispatchFn = jest.fn().mockReturnValue({})
 
     const store = new DispatchingStore(testInitValue, {
-      testDispatcher: testDispatchFn 
+      testDispatcher: testDispatchFn,
     })
 
-    store.subject$.subscribe(value => {
+    store.subject$.subscribe((value) => {
       if (value === testInitValue) {
         done()
       }
     })
   })
 
-  test("emits the dispatched store value to the subscribers", done => {
+  test("emits the dispatched store value to the subscribers", (done) => {
     const testInitValue = { name: "bob" }
     const testDispatchReturnVal = { age: 25 }
 
     const testDispatchFn = jest.fn().mockReturnValue(testDispatchReturnVal)
 
     const store = new DispatchingStore(testInitValue, {
-      testDispatcher: testDispatchFn 
+      testDispatcher: testDispatchFn,
     })
 
-    store.subject$.subscribe(value => {
+    store.subject$.subscribe((value) => {
       if (isEqual(value, { name: "bob", age: 25 })) {
         done()
       }
@@ -157,7 +162,7 @@ describe("DispatchingStore", () => {
 
     store.dispatch({
       dispatcher: "testDispatcher",
-      payload: {} 
+      payload: {},
     })
   })
 
@@ -168,10 +173,10 @@ describe("DispatchingStore", () => {
     const testDispatchFn = jest.fn().mockReturnValue({})
 
     const store = new DispatchingStore(testInitValue, {
-      testDispatcher: testDispatchFn 
+      testDispatcher: testDispatchFn,
     })
 
-    store.dispatches$.subscribe(value => {
+    store.dispatches$.subscribe((value) => {
       if (isEqual(value, { dispatcher: "testDispatcher", payload: testPayload })) {
         done()
       }
@@ -179,7 +184,7 @@ describe("DispatchingStore", () => {
 
     store.dispatch({
       dispatcher: "testDispatcher",
-      payload: {} 
+      payload: {},
     })
   })
 })
diff --git a/newstore/localpersistence.ts b/newstore/localpersistence.ts
index bdfb4a4a2..919050cf0 100644
--- a/newstore/localpersistence.ts
+++ b/newstore/localpersistence.ts
@@ -24,12 +24,10 @@ function setupSettingsPersistence() {
   if (settingsData) {
     bulkApplySettings(settingsData)
   }
-  
 
-  settingsStore.subject$
-    .subscribe(settings => {
-      window.localStorage.setItem("settings", JSON.stringify(settings))
-    })
+  settingsStore.subject$.subscribe((settings) => {
+    window.localStorage.setItem("settings", JSON.stringify(settings))
+  })
 }
 
 export function setupLocalPersistence() {
diff --git a/newstore/settings.ts b/newstore/settings.ts
index 4ea6503a7..ce2f9d174 100644
--- a/newstore/settings.ts
+++ b/newstore/settings.ts
@@ -5,7 +5,6 @@ import type { Dispatchers } from "./DispatchingStore"
 import { Observable } from "rxjs"
 import type { KeysMatching } from "~/types/ts-utils"
 
-
 export const defaultSettings = {
   syncCollections: true,
   syncHistory: true,
@@ -21,8 +20,8 @@ export const defaultSettings = {
     auth: true,
     httpUser: true,
     httpPassword: true,
-    bearerToken: true
-  }
+    bearerToken: true,
+  },
 }
 
 export type SettingsType = typeof defaultSettings
@@ -44,7 +43,10 @@ const dispatchers: Dispatchers<SettingsType> = {
 
     return result
   },
-  applySetting<K extends keyof SettingsType>(_currentState: SettingsType, { settingKey, value }: { settingKey: K, value: SettingsType[K] }) {
+  applySetting<K extends keyof SettingsType>(
+    _currentState: SettingsType,
+    { settingKey, value }: { settingKey: K; value: SettingsType[K] }
+  ) {
     if (!validKeys.includes(settingKey)) {
       console.log(`Ignoring non-existent setting key '${settingKey}' assignment`)
       return {}
@@ -54,20 +56,21 @@ const dispatchers: Dispatchers<SettingsType> = {
     result[settingKey] = value
 
     return result
-  }
+  },
 }
 
-
 export const settingsStore = new DispatchingStore(defaultSettings, dispatchers)
 
-export function getSettingSubject<K extends keyof SettingsType>(settingKey: K): Observable<SettingsType[K]> {
+export function getSettingSubject<K extends keyof SettingsType>(
+  settingKey: K
+): Observable<SettingsType[K]> {
   return settingsStore.subject$.pipe(pluck(settingKey), distinctUntilChanged())
 }
 
 export function bulkApplySettings(settingsObj: Partial<SettingsType>) {
   settingsStore.dispatch({
     dispatcher: "bulkApplySettings",
-    payload: settingsObj
+    payload: settingsObj,
   })
 }
 
@@ -75,8 +78,8 @@ export function toggleSetting(settingKey: KeysMatching<SettingsType, boolean>) {
   settingsStore.dispatch({
     dispatcher: "toggleSetting",
     payload: {
-      settingKey
-    }
+      settingKey,
+    },
   })
 }
 
@@ -85,7 +88,7 @@ export function applySetting<K extends keyof SettingsType>(settingKey: K, value:
     dispatcher: "applySetting",
     payload: {
       settingKey,
-      value
-    }
+      value,
+    },
   })
 }
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 9e7a41385..74d6097c1 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -55,7 +55,14 @@
             <ul
               v-for="(header, index) in headers"
               :key="`${header.value}_${index}`"
-              class="border-b border-dashed divide-y md:divide-x border-brdColor divide-dashed divide-brdColor md:divide-y-0"
+              class="
+                border-b border-dashed
+                divide-y
+                md:divide-x
+                border-brdColor
+                divide-dashed divide-brdColor
+                md:divide-y-0
+              "
               :class="{ 'border-t': index == 0 }"
             >
               <li>
diff --git a/pages/index.vue b/pages/index.vue
index cf8b6df46..24a8f9884 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1992,7 +1992,12 @@ export default {
       }
       if (e.key === "Escape") {
         e.preventDefault()
-        this.showCurlImportModal = this.showTokenListModal = this.showTokenRequestList = this.showSaveRequestModal = this.showCodegenModal = false
+        this.showCurlImportModal =
+          this.showTokenListModal =
+          this.showTokenRequestList =
+          this.showSaveRequestModal =
+          this.showCodegenModal =
+            false
       }
       if ((e.key === "g" || e.key === "G") && e.altKey) {
         this.method = "GET"
diff --git a/plugins/vue-apollo.ts b/plugins/vue-apollo.ts
index bce33962a..da6ce0529 100644
--- a/plugins/vue-apollo.ts
+++ b/plugins/vue-apollo.ts
@@ -1,12 +1,12 @@
 import Vue from "vue"
 import VueApollo from "vue-apollo"
-import { apolloClient } from "~/helpers/apollo";
+import { apolloClient } from "~/helpers/apollo"
 
 const vueApolloProvider = new VueApollo({
-  defaultClient: apolloClient as any
-});
+  defaultClient: apolloClient as any,
+})
 
-Vue.use(VueApollo);
+Vue.use(VueApollo)
 
 export default (ctx: any) => {
   const { app } = ctx
diff --git a/store/mutations.js b/store/mutations.js
index 04d08edc6..6b54efa21 100644
--- a/store/mutations.js
+++ b/store/mutations.js
@@ -107,7 +107,7 @@ export default {
     request.bodyParams[index].value = value
   },
 
-  setBodyParams({request},{params}){
+  setBodyParams({ request }, { params }) {
     request.bodyParams = params
   },
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 4b4f9caac..cb3c003fc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,7 @@
  ** Docs: https://tailwindcss.com/docs/configuration
  ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
  */
+
 import colors from "tailwindcss/colors"
 
 export default {
diff --git a/types/pw-ext-hook.d.ts b/types/pw-ext-hook.d.ts
index 17183a56a..3e54377a3 100644
--- a/types/pw-ext-hook.d.ts
+++ b/types/pw-ext-hook.d.ts
@@ -15,7 +15,7 @@ interface PWExtensionResponse {
 }
 
 interface PWExtensionHook {
-  getVersion: () => { major: number, minor: number }
+  getVersion: () => { major: number; minor: number }
   sendRequest: (req: PWExtensionRequestInfo) => Promise<PWExtensionResponse>
   cancelRunningRequest: () => void
 }
diff --git a/types/ts-utils.d.ts b/types/ts-utils.d.ts
index 704badee9..3589bd1bf 100644
--- a/types/ts-utils.d.ts
+++ b/types/ts-utils.d.ts
@@ -1 +1 @@
-export type KeysMatching<T, V> = {[K in keyof T]-?: T[K] extends V ? K : never}[keyof T];
+export type KeysMatching<T, V> = { [K in keyof T]-?: T[K] extends V ? K : never }[keyof T]
diff --git a/vue-shim.d.ts b/vue-shim.d.ts
index eb40980e5..b39982764 100644
--- a/vue-shim.d.ts
+++ b/vue-shim.d.ts
@@ -1,4 +1,4 @@
 declare module "*.vue" {
-  import Vue from 'vue'
+  import Vue from "vue"
   export default Vue
 }