From 4867df5fe844eebbd438277ffa3fafe7d830c828 Mon Sep 17 00:00:00 2001
From: Dmitry Yankowski <dmitry@snoculars.com>
Date: Tue, 25 Feb 2020 11:10:40 -0500
Subject: [PATCH] Push updated files

---
 components/section.vue |  29 ++-
 layouts/default.vue    |  21 +-
 pages/graphql.vue      | 424 +++++++++++++++++++----------------------
 pages/index.vue        |  36 ++--
 4 files changed, 226 insertions(+), 284 deletions(-)

diff --git a/components/section.vue b/components/section.vue
index 2c6e1082b..46aa973d6 100644
--- a/components/section.vue
+++ b/components/section.vue
@@ -6,10 +6,7 @@
         {{ isCollapsed(label) ? "expand_more" : "expand_less" }}
       </i>
     </legend>
-    <div
-      class="collapsible"
-      :class="{ hidden: isCollapsed(label.toLowerCase()) }"
-    >
+    <div class="collapsible" :class="{ hidden: isCollapsed(label.toLowerCase()) }">
       <slot />
     </div>
   </fieldset>
@@ -25,11 +22,11 @@ fieldset.no-colored-frames legend {
 export default {
   computed: {
     frameColorsEnabled() {
-      return this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false;
+      return this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false
     },
     sectionString() {
-      return `${this.$route.path}/${this.label}`;
-    }
+      return `${this.$route.path}/${this.label}`
+    },
   },
 
   props: {
@@ -44,18 +41,14 @@ export default {
 
   methods: {
     collapse({ target }) {
-      const parent = target.parentNode.parentNode;
-      parent.querySelector(".collapsible").classList.toggle("hidden");
+      const parent = target.parentNode.parentNode
+      parent.querySelector(".collapsible").classList.toggle("hidden")
       // Save collapsed section into the collapsedSections array
-      this.$store.commit("setCollapsedSection", this.sectionString);
+      this.$store.commit("setCollapsedSection", this.sectionString)
     },
     isCollapsed(label) {
-      return (
-        this.$store.state.theme.collapsedSections.includes(
-          this.sectionString
-        ) || false
-      );
-    }
-  }
-};
+      return this.$store.state.theme.collapsedSections.includes(this.sectionString) || false
+    },
+  },
+}
 </script>
diff --git a/layouts/default.vue b/layouts/default.vue
index d2af4f703..996759827 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -757,8 +757,7 @@ export default {
           ],
         })
       }
-      let showExtensionsToast =
-        localStorage.getItem("showExtensionsToast") === "yes";
+      let showExtensionsToast = localStorage.getItem("showExtensionsToast") === "yes"
 
       // Just return if showExtensionsToast is "no"
       if (!showExtensionsToast) return
@@ -783,15 +782,15 @@ export default {
                 onClick: (e, toastObject) => {
                   this.$store.commit("setMiscState", {
                     value: false,
-                    attribute: "showExtensionsToast"
-                  });
-                  localStorage.setItem("showExtensionsToast", "no");
-                  toastObject.goAway(0);
-                }
-              }
-            ]
-          });
-        }, 15000);
+                    attribute: "showExtensionsToast",
+                  })
+                  localStorage.setItem("showExtensionsToast", "no")
+                  toastObject.goAway(0)
+                },
+              },
+            ],
+          })
+        }, 15000)
       }
 
       this._keyListener = function(e) {
diff --git a/pages/graphql.vue b/pages/graphql.vue
index a811cc17a..5634bdc11 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -32,11 +32,7 @@
               <div class="flex-wrap">
                 <label for="headerList">{{ $t("header_list") }}</label>
                 <div>
-                  <button
-                    class="icon"
-                    @click="headers = []"
-                    v-tooltip.bottom="$t('clear')"
-                  >
+                  <button class="icon" @click="headers = []" v-tooltip.bottom="$t('clear')">
                     <i class="material-icons">clear_all</i>
                   </button>
                 </div>
@@ -61,7 +57,7 @@
                 @input="
                   $store.commit('setGQLHeaderKey', {
                     index,
-                    value: $event
+                    value: $event,
                   })
                 "
                 autofocus
@@ -75,7 +71,7 @@
                 @change="
                   $store.commit('setGQLHeaderValue', {
                     index,
-                    value: $event.target.value
+                    value: $event.target.value,
                   })
                 "
                 autofocus
@@ -113,9 +109,7 @@
                 @click="ToggleExpandResponse"
                 ref="ToggleExpandResponse"
                 v-tooltip="{
-                  content: !expandResponse
-                    ? $t('expand_response')
-                    : $t('collapse_response')
+                  content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
                 }"
               >
                 <i class="material-icons">
@@ -150,7 +144,7 @@
               autoScrollEditorIntoView: true,
               readOnly: true,
               showPrintMargin: false,
-              useWorker: false
+              useWorker: false,
             }"
           />
         </pw-section>
@@ -181,7 +175,7 @@
               fontSize: '16px',
               autoScrollEditorIntoView: true,
               showPrintMargin: false,
-              useWorker: false
+              useWorker: false,
             }"
           />
         </pw-section>
@@ -196,7 +190,7 @@
               fontSize: '16px',
               autoScrollEditorIntoView: true,
               showPrintMargin: false,
-              useWorker: false
+              useWorker: false,
             }"
           />
         </pw-section>
@@ -225,7 +219,7 @@
               autoScrollEditorIntoView: true,
               readOnly: true,
               showPrintMargin: false,
-              useWorker: false
+              useWorker: false,
             }"
           />
         </pw-section>
@@ -245,10 +239,7 @@
             </label>
             <div v-if="queryFields.length > 0" class="tab">
               <div v-for="field in queryFields" :key="field.name">
-                <gql-field
-                  :gqlField="field"
-                  :jumpTypeCallback="handleJumpToType"
-                />
+                <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
               </div>
             </div>
 
@@ -264,10 +255,7 @@
             </label>
             <div v-if="mutationFields.length > 0" class="tab">
               <div v-for="field in mutationFields" :key="field.name">
-                <gql-field
-                  :gqlField="field"
-                  :jumpTypeCallback="handleJumpToType"
-                />
+                <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
               </div>
             </div>
 
@@ -283,10 +271,7 @@
             </label>
             <div v-if="subscriptionFields.length > 0" class="tab">
               <div v-for="field in subscriptionFields" :key="field.name">
-                <gql-field
-                  :gqlField="field"
-                  :jumpTypeCallback="handleJumpToType"
-                />
+                <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
               </div>
             </div>
 
@@ -301,15 +286,8 @@
               {{ $t("types") }}
             </label>
             <div v-if="gqlTypes.length > 0" class="tab">
-              <div
-                v-for="type in gqlTypes"
-                :key="type.name"
-                :id="`type_${type.name}`"
-              >
-                <gql-type
-                  :gqlType="type"
-                  :jumpTypeCallback="handleJumpToType"
-                />
+              <div v-for="type in gqlTypes" :key="type.name" :id="`type_${type.name}`">
+                <gql-type :gqlType="type" :jumpTypeCallback="handleJumpToType" />
               </div>
             </div>
           </section>
@@ -342,17 +320,17 @@
 </style>
 
 <script>
-import axios from "axios";
-import * as gql from "graphql";
-import textareaAutoHeight from "../directives/textareaAutoHeight";
-import { commonHeaders } from "../functions/headers";
-import AceEditor from "../components/ace-editor";
-import QueryEditor from "../components/graphql/queryeditor";
-import { sendNetworkRequest } from "../functions/network";
+import axios from "axios"
+import * as gql from "graphql"
+import textareaAutoHeight from "../directives/textareaAutoHeight"
+import { commonHeaders } from "../functions/headers"
+import AceEditor from "../components/ace-editor"
+import QueryEditor from "../components/graphql/queryeditor"
+import { sendNetworkRequest } from "../functions/network"
 
 export default {
   directives: {
-    textareaAutoHeight
+    textareaAutoHeight,
   },
   components: {
     "pw-section": () => import("../components/section"),
@@ -360,7 +338,7 @@ export default {
     "gql-type": () => import("../components/graphql/type"),
     autocomplete: () => import("../components/autocomplete"),
     Editor: AceEditor,
-    QueryEditor: QueryEditor
+    QueryEditor: QueryEditor,
   },
   data() {
     return {
@@ -377,359 +355,339 @@ export default {
 
       settings: {
         SCROLL_INTO_ENABLED:
-          typeof this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED !==
-          "undefined"
+          typeof this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED !== "undefined"
             ? this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED
-            : true
-      }
-    };
+            : true,
+      },
+    }
   },
 
   computed: {
     url: {
       get() {
-        return this.$store.state.gql.url;
+        return this.$store.state.gql.url
       },
       set(value) {
-        this.$store.commit("setGQLState", { value, attribute: "url" });
-      }
+        this.$store.commit("setGQLState", { value, attribute: "url" })
+      },
     },
     headers: {
       get() {
-        return this.$store.state.gql.headers;
+        return this.$store.state.gql.headers
       },
       set(value) {
-        this.$store.commit("setGQLState", { value, attribute: "headers" });
-      }
+        this.$store.commit("setGQLState", { value, attribute: "headers" })
+      },
     },
     gqlQueryString: {
       get() {
-        return this.$store.state.gql.query;
+        return this.$store.state.gql.query
       },
       set(value) {
-        this.$store.commit("setGQLState", { value, attribute: "query" });
-      }
+        this.$store.commit("setGQLState", { value, attribute: "query" })
+      },
     },
     response: {
       get() {
-        return this.$store.state.gql.response;
+        return this.$store.state.gql.response
       },
       set(value) {
-        this.$store.commit("setGQLState", { value, attribute: "response" });
-      }
+        this.$store.commit("setGQLState", { value, attribute: "response" })
+      },
     },
     schema: {
       get() {
-        return this.$store.state.gql.schema;
+        return this.$store.state.gql.schema
       },
       set(value) {
-        this.$store.commit("setGQLState", { value, attribute: "schema" });
-      }
+        this.$store.commit("setGQLState", { value, attribute: "schema" })
+      },
     },
     variableString: {
       get() {
-        return this.$store.state.gql.variablesJSONString;
+        return this.$store.state.gql.variablesJSONString
       },
       set(value) {
         this.$store.commit("setGQLState", {
           value,
-          attribute: "variablesJSONString"
-        });
-      }
+          attribute: "variablesJSONString",
+        })
+      },
     },
     headerString() {
       const result = this.headers
         .filter(({ key }) => !!key)
         .map(({ key, value }) => `${key}: ${value}`)
-        .join(",\n");
-      return result === "" ? "" : `${result}`;
-    }
+        .join(",\n")
+      return result === "" ? "" : `${result}`
+    },
   },
   methods: {
     handleJumpToType(type) {
-      const typesTab = document.getElementById("gqltypes-tab");
-      typesTab.checked = true;
+      const typesTab = document.getElementById("gqltypes-tab")
+      typesTab.checked = true
 
-      const rootTypeName = this.resolveRootType(type).name;
+      const rootTypeName = this.resolveRootType(type).name
 
-      const target = document.getElementById(`type_${rootTypeName}`);
+      const target = document.getElementById(`type_${rootTypeName}`)
       if (target && this.settings.SCROLL_INTO_ENABLED) {
         target.scrollIntoView({
-          behavior: "smooth"
-        });
+          behavior: "smooth",
+        })
       }
     },
     resolveRootType(type) {
-      let t = type;
-      while (t.ofType != null) t = t.ofType;
-      return t;
+      let t = type
+      while (t.ofType != null) t = t.ofType
+      return t
     },
     copySchema() {
-      this.$refs.copySchemaCode.innerHTML = this.doneButton;
-      const aux = document.createElement("textarea");
-      aux.innerText = this.schema;
-      document.body.appendChild(aux);
-      aux.select();
-      document.execCommand("copy");
-      document.body.removeChild(aux);
+      this.$refs.copySchemaCode.innerHTML = this.doneButton
+      const aux = document.createElement("textarea")
+      aux.innerText = this.schema
+      document.body.appendChild(aux)
+      aux.select()
+      document.execCommand("copy")
+      document.body.removeChild(aux)
       this.$toast.success(this.$t("copied_to_clipboard"), {
-        icon: "done"
-      });
-      setTimeout(
-        () => (this.$refs.copySchemaCode.innerHTML = this.copyButton),
-        1000
-      );
+        icon: "done",
+      })
+      setTimeout(() => (this.$refs.copySchemaCode.innerHTML = this.copyButton), 1000)
     },
     copyQuery() {
-      this.$refs.copyQueryButton.innerHTML = this.doneButton;
-      const aux = document.createElement("textarea");
-      aux.innerText = this.gqlQueryString;
-      document.body.appendChild(aux);
-      aux.select();
-      document.execCommand("copy");
-      document.body.removeChild(aux);
+      this.$refs.copyQueryButton.innerHTML = this.doneButton
+      const aux = document.createElement("textarea")
+      aux.innerText = this.gqlQueryString
+      document.body.appendChild(aux)
+      aux.select()
+      document.execCommand("copy")
+      document.body.removeChild(aux)
       this.$toast.success(this.$t("copied_to_clipboard"), {
-        icon: "done"
-      });
-      setTimeout(
-        () => (this.$refs.copyQueryButton.innerHTML = this.copyButton),
-        1000
-      );
+        icon: "done",
+      })
+      setTimeout(() => (this.$refs.copyQueryButton.innerHTML = this.copyButton), 1000)
     },
     copyResponse() {
-      this.$refs.copyResponseButton.innerHTML = this.doneButton;
-      const aux = document.createElement("textarea");
-      aux.innerText = this.response;
-      document.body.appendChild(aux);
-      aux.select();
-      document.execCommand("copy");
-      document.body.removeChild(aux);
+      this.$refs.copyResponseButton.innerHTML = this.doneButton
+      const aux = document.createElement("textarea")
+      aux.innerText = this.response
+      document.body.appendChild(aux)
+      aux.select()
+      document.execCommand("copy")
+      document.body.removeChild(aux)
       this.$toast.success(this.$t("copied_to_clipboard"), {
-        icon: "done"
-      });
-      setTimeout(
-        () => (this.$refs.copyResponseButton.innerHTML = this.copyButton),
-        1000
-      );
+        icon: "done",
+      })
+      setTimeout(() => (this.$refs.copyResponseButton.innerHTML = this.copyButton), 1000)
     },
     async runQuery() {
-      const startTime = Date.now();
+      const startTime = Date.now()
 
       // Start showing the loading bar as soon as possible.
       // The nuxt axios module will hide it when the request is made.
-      this.$nuxt.$loading.start();
+      this.$nuxt.$loading.start()
 
-      this.response = this.$t("loading");
-      this.settings.SCROLL_INTO_ENABLED && this.scrollInto("response");
+      this.response = this.$t("loading")
+      this.settings.SCROLL_INTO_ENABLED && this.scrollInto("response")
 
       try {
-        let headers = {};
+        let headers = {}
         this.headers.forEach(header => {
-          headers[header.key] = header.value;
-        });
+          headers[header.key] = header.value
+        })
 
-        let variables = JSON.parse(this.variableString);
+        let variables = JSON.parse(this.variableString)
 
-        const gqlQueryString = this.gqlQueryString;
+        const gqlQueryString = this.gqlQueryString
 
         const reqOptions = {
           method: "post",
           url: this.url,
           headers: {
             ...headers,
-            "content-type": "application/json"
+            "content-type": "application/json",
           },
-          data: JSON.stringify({ query: gqlQueryString, variables })
-        };
+          data: JSON.stringify({ query: gqlQueryString, variables }),
+        }
 
-        const data = await sendNetworkRequest(reqOptions, this.$store);
+        const data = await sendNetworkRequest(reqOptions, this.$store)
 
-        this.response = JSON.stringify(data.data, null, 2);
+        this.response = JSON.stringify(data.data, null, 2)
 
-        this.$nuxt.$loading.finish();
-        const duration = Date.now() - startTime;
+        this.$nuxt.$loading.finish()
+        const duration = Date.now() - startTime
         this.$toast.info(this.$t("finished_in", { duration }), {
-          icon: "done"
-        });
+          icon: "done",
+        })
       } catch (error) {
-        this.$nuxt.$loading.finish();
+        this.$nuxt.$loading.finish()
 
         this.$toast.error(`${error} ${this.$t("f12_details")}`, {
-          icon: "error"
-        });
-        console.log("Error", error);
+          icon: "error",
+        })
+        console.log("Error", error)
       }
     },
     async getSchema() {
-      const startTime = Date.now();
+      const startTime = Date.now()
 
       // Start showing the loading bar as soon as possible.
       // The nuxt axios module will hide it when the request is made.
-      this.$nuxt.$loading.start();
+      this.$nuxt.$loading.start()
 
-      this.schema = this.$t("loading");
-      this.settings.SCROLL_INTO_ENABLED && this.scrollInto("schema");
+      this.schema = this.$t("loading")
+      this.settings.SCROLL_INTO_ENABLED && this.scrollInto("schema")
 
       try {
         const query = JSON.stringify({
-          query: gql.getIntrospectionQuery()
-        });
+          query: gql.getIntrospectionQuery(),
+        })
 
-        let headers = {};
+        let headers = {}
         this.headers.forEach(header => {
-          headers[header.key] = header.value;
-        });
+          headers[header.key] = header.value
+        })
 
         const reqOptions = {
           method: "post",
           url: this.url,
           headers: {
             ...headers,
-            "content-type": "application/json"
+            "content-type": "application/json",
           },
-          data: query
-        };
+          data: query,
+        }
 
         const reqConfig = this.$store.state.postwoman.settings.PROXY_ENABLED
           ? {
               method: "post",
               url:
-                this.$store.state.postwoman.settings.PROXY_URL ||
-                `https://postwoman.apollotv.xyz/`,
-              data: reqOptions
+                this.$store.state.postwoman.settings.PROXY_URL || `https://postwoman.apollotv.xyz/`,
+              data: reqOptions,
             }
-          : reqOptions;
+          : reqOptions
 
-        const res = await axios(reqConfig);
+        const res = await axios(reqConfig)
 
-        const data = this.$store.state.postwoman.settings.PROXY_ENABLED
-          ? res.data
-          : res;
-        const schema = gql.buildClientSchema(data.data.data);
+        const data = this.$store.state.postwoman.settings.PROXY_ENABLED ? res.data : res
+        const schema = gql.buildClientSchema(data.data.data)
         this.schema = gql.printSchema(schema, {
-          commentDescriptions: true
-        });
+          commentDescriptions: true,
+        })
 
         if (schema.getQueryType()) {
-          const fields = schema.getQueryType().getFields();
-          const qFields = [];
+          const fields = schema.getQueryType().getFields()
+          const qFields = []
           for (const field in fields) {
-            qFields.push(fields[field]);
+            qFields.push(fields[field])
           }
-          this.queryFields = qFields;
+          this.queryFields = qFields
         }
 
         if (schema.getMutationType()) {
-          const fields = schema.getMutationType().getFields();
-          const mFields = [];
+          const fields = schema.getMutationType().getFields()
+          const mFields = []
           for (const field in fields) {
-            mFields.push(fields[field]);
+            mFields.push(fields[field])
           }
-          this.mutationFields = mFields;
+          this.mutationFields = mFields
         }
 
         if (schema.getSubscriptionType()) {
-          const fields = schema.getSubscriptionType().getFields();
-          const sFields = [];
+          const fields = schema.getSubscriptionType().getFields()
+          const sFields = []
           for (const field in fields) {
-            sFields.push(fields[field]);
+            sFields.push(fields[field])
           }
-          this.subscriptionFields = sFields;
+          this.subscriptionFields = sFields
         }
 
-        const typeMap = schema.getTypeMap();
-        const types = [];
+        const typeMap = schema.getTypeMap()
+        const types = []
 
-        const queryTypeName = schema.getQueryType()
-          ? schema.getQueryType().name
-          : "";
-        const mutationTypeName = schema.getMutationType()
-          ? schema.getMutationType().name
-          : "";
+        const queryTypeName = schema.getQueryType() ? schema.getQueryType().name : ""
+        const mutationTypeName = schema.getMutationType() ? schema.getMutationType().name : ""
         const subscriptionTypeName = schema.getSubscriptionType()
           ? schema.getSubscriptionType().name
-          : "";
+          : ""
 
         for (const type in typeMap) {
           if (
             !typeMap[type].name.startsWith("__") &&
-            ![queryTypeName, mutationTypeName, subscriptionTypeName].includes(
-              typeMap[type].name
-            ) &&
+            ![queryTypeName, mutationTypeName, subscriptionTypeName].includes(typeMap[type].name) &&
             typeMap[type] instanceof gql.GraphQLObjectType
           ) {
-            types.push(typeMap[type]);
+            types.push(typeMap[type])
           }
         }
-        this.gqlTypes = types;
-        this.$refs.queryEditor.setValidationSchema(schema);
-        this.$nuxt.$loading.finish();
-        const duration = Date.now() - startTime;
+        this.gqlTypes = types
+        this.$refs.queryEditor.setValidationSchema(schema)
+        this.$nuxt.$loading.finish()
+        const duration = Date.now() - startTime
         this.$toast.info(this.$t("finished_in", { duration }), {
-          icon: "done"
-        });
+          icon: "done",
+        })
       } catch (error) {
-        this.$nuxt.$loading.finish();
-        this.schema = `${error}. ${this.$t("check_console_details")}`;
+        this.$nuxt.$loading.finish()
+        this.schema = `${error}. ${this.$t("check_console_details")}`
         this.$toast.error(`${error} ${this.$t("f12_details")}`, {
-          icon: "error"
-        });
-        console.log("Error", error);
+          icon: "error",
+        })
+        console.log("Error", error)
       }
     },
     ToggleExpandResponse() {
-      this.expandResponse = !this.expandResponse;
-      this.responseBodyMaxLines =
-        this.responseBodyMaxLines == Infinity ? 16 : Infinity;
+      this.expandResponse = !this.expandResponse
+      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
     },
     downloadResponse() {
-      const dataToWrite = JSON.stringify(this.schema, null, 2);
-      const file = new Blob([dataToWrite], { type: "application/json" });
-      const a = document.createElement("a");
-      const url = URL.createObjectURL(file);
-      a.href = url;
-      a.download = `${this.url} on ${Date()}.graphql`.replace(/\./g, "[dot]");
-      document.body.appendChild(a);
-      a.click();
-      this.$refs.downloadResponse.innerHTML = this.doneButton;
+      const dataToWrite = JSON.stringify(this.schema, null, 2)
+      const file = new Blob([dataToWrite], { type: "application/json" })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      a.download = `${this.url} on ${Date()}.graphql`.replace(/\./g, "[dot]")
+      document.body.appendChild(a)
+      a.click()
+      this.$refs.downloadResponse.innerHTML = this.doneButton
       this.$toast.success(this.$t("download_started"), {
-        icon: "done"
-      });
+        icon: "done",
+      })
       setTimeout(() => {
-        document.body.removeChild(a);
-        window.URL.revokeObjectURL(url);
-        this.$refs.downloadResponse.innerHTML = this.downloadButton;
-      }, 1000);
+        document.body.removeChild(a)
+        window.URL.revokeObjectURL(url)
+        this.$refs.downloadResponse.innerHTML = this.downloadButton
+      }, 1000)
     },
     addRequestHeader(index) {
       this.$store.commit("addGQLHeader", {
         key: "",
-        value: ""
-      });
-      return false;
+        value: "",
+      })
+      return false
     },
     removeRequestHeader(index) {
       // .slice() is used so we get a separate array, rather than just a reference
-      const oldHeaders = this.headers.slice();
+      const oldHeaders = this.headers.slice()
 
-      this.$store.commit("removeGQLHeader", index);
+      this.$store.commit("removeGQLHeader", index)
       this.$toast.error(this.$t("deleted"), {
         icon: "delete",
         action: {
           text: this.$t("undo"),
           duration: 4000,
           onClick: (e, toastObject) => {
-            this.headers = oldHeaders;
-            toastObject.remove();
-          }
-        }
-      });
+            this.headers = oldHeaders
+            toastObject.remove()
+          },
+        },
+      })
     },
     scrollInto(view) {
       this.$refs[view].$el.scrollIntoView({
-        behavior: "smooth"
-      });
-    }
-  }
-};
+        behavior: "smooth",
+      })
+    },
+  },
+}
 </script>
diff --git a/pages/index.vue b/pages/index.vue
index d2a46209c..9626c78cc 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1443,12 +1443,11 @@ export default {
 
       settings: {
         SCROLL_INTO_ENABLED:
-          typeof this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED !==
-          "undefined"
+          typeof this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED !== "undefined"
             ? this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED
-            : true
-      }
-    };
+            : true,
+      },
+    }
   },
   watch: {
     urlExcludes: {
@@ -1970,21 +1969,14 @@ export default {
         behavior: "smooth",
       })
     },
-    handleUseHistory({
-      label,
-      method,
-      url,
-      path,
-      usesScripts,
-      preRequestScript
-    }) {
-      this.label = label;
-      this.method = method;
-      this.url = url;
-      this.path = path;
-      this.showPreRequestScript = usesScripts;
-      this.preRequestScript = preRequestScript;
-      this.settings.SCROLL_INTO_ENABLED && this.scrollInto("request");
+    handleUseHistory({ label, method, url, path, usesScripts, preRequestScript }) {
+      this.label = label
+      this.method = method
+      this.url = url
+      this.path = path
+      this.showPreRequestScript = usesScripts
+      this.preRequestScript = preRequestScript
+      this.settings.SCROLL_INTO_ENABLED && this.scrollInto("request")
     },
     getVariablesFromPreRequestScript() {
       if (!this.preRequestScript) {
@@ -2019,8 +2011,8 @@ export default {
       return await sendNetworkRequest(requestOptions, this.$store)
     },
     async sendRequest() {
-      this.$toast.clear();
-      this.settings.SCROLL_INTO_ENABLED && this.scrollInto("response");
+      this.$toast.clear()
+      this.settings.SCROLL_INTO_ENABLED && this.scrollInto("response")
 
       if (!this.isValidURL) {
         this.$toast.error(this.$t("url_invalid_format"), {