From f49c2138de37af2923cda16a7d0dcac77ac52e02 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Wed, 21 Oct 2020 12:20:32 +0530
Subject: [PATCH] Lint + ES6

---
 assets/scss/styles.scss                       |  36 ++++--
 components/collections/add-folder.vue         |  15 +--
 components/collections/collection.vue         |  41 ++++---
 components/collections/folder.vue             |  42 +++----
 .../collections/import-export-collections.vue |  35 +++---
 components/collections/index.vue              |   2 +-
 components/collections/request.vue            |  34 +++---
 components/collections/save-request-as.vue    |  19 ++--
 components/environments/edit-environment.vue  |   8 +-
 .../import-export-environment.vue             |  16 ++-
 components/firebase/feeds.vue                 |   4 +-
 components/graphql/type.vue                   |   4 +-
 components/layout/history.vue                 |   4 +-
 components/layout/pw-header.vue               |   6 -
 .../lenses/renderers/HTMLLensRenderer.vue     |   1 +
 .../lenses/renderers/ImageLensRenderer.vue    |  11 +-
 .../lenses/renderers/RawLensRenderer.vue      |   1 +
 .../lenses/renderers/XMLLensRenderer.vue      |   1 +
 components/realtime/log.vue                   |   2 +-
 components/realtime/mqtt.vue                  |   2 +-
 components/ui/ace-editor.vue                  |   2 +-
 components/ui/autocomplete.vue                |   7 +-
 nuxt.config.js                                | 107 ++++++++++--------
 pages/index.vue                               |   2 +-
 store/postwoman.js                            |  73 +++++++-----
 25 files changed, 263 insertions(+), 212 deletions(-)

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 90c98aea8..c3ddab7fa 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -8,6 +8,7 @@ $responsiveWidth: 768px;
 
 :root {
   @apply antialiased;
+
   font-variant-ligatures: common-ligatures;
 }
 
@@ -54,6 +55,7 @@ body {
   @apply transition;
   @apply ease-in-out;
   @apply duration-200;
+
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
 }
@@ -211,6 +213,7 @@ hr {
     .tooltip-arrow {
       @apply mt-0;
       @apply mb-0;
+
       border-width: 5px 5px 0 5px;
       border-left-color: transparent !important;
       border-right-color: transparent !important;
@@ -226,6 +229,7 @@ hr {
     .tooltip-arrow {
       @apply mt-0;
       @apply mb-0;
+
       border-width: 0 5px 5px 5px;
       border-left-color: transparent !important;
       border-right-color: transparent !important;
@@ -241,6 +245,7 @@ hr {
     .tooltip-arrow {
       @apply ml-0;
       @apply mr-0;
+
       border-width: 5px 5px 5px 0;
       border-left-color: transparent !important;
       border-top-color: transparent !important;
@@ -256,6 +261,7 @@ hr {
     .tooltip-arrow {
       @apply ml-0;
       @apply mr-0;
+
       border-width: 5px 0 5px 5px;
       border-top-color: transparent !important;
       border-right-color: transparent !important;
@@ -278,11 +284,14 @@ hr {
       @apply rounded-lg;
       @apply overflow-auto;
       @apply shadow-lg;
+
       max-height: 256px;
 
       button {
         @apply flex-1;
         @apply m-0;
+        @apply justify-start;
+        @apply text-left;
       }
 
       div {
@@ -290,11 +299,6 @@ hr {
         @apply items-stretch;
         @apply flex-col;
       }
-
-      button {
-        @apply justify-start;
-        @apply text-left;
-      }
     }
 
     .popover-arrow {
@@ -362,6 +366,7 @@ button {
     @apply text-actColor;
     @apply fill-current;
     @apply outline-none;
+
     box-shadow: inset 0 0 0 2px var(--fg-color);
   }
 
@@ -423,6 +428,7 @@ button {
   @apply tracking-normal;
   @apply whitespace-no-wrap;
   @apply antialiased;
+
   word-wrap: normal;
   direction: ltr;
   text-rendering: optimizeLegibility;
@@ -481,6 +487,7 @@ code {
   @apply select-text;
   @apply resize-y;
   @apply outline-none;
+
   width: calc(100% - 16px);
 
   &:not([readonly]):not(.ace_editor):hover,
@@ -493,6 +500,7 @@ code {
 .method {
   @apply cursor-pointer;
   @apply uppercase;
+
   min-width: 128px;
 
   &:hover,
@@ -530,11 +538,12 @@ pre {
     @apply w-full;
   }
 
-  &:after {
+  &::after {
     @apply inline-block;
     @apply absolute;
     @apply pointer-events-none;
     @apply font-icon;
+
     content: "\e313";
     top: 16px;
     right: 16px;
@@ -544,6 +553,7 @@ pre {
 select {
   @apply cursor-pointer;
   @apply appearance-none;
+
   height: 40px;
 
   &::-ms-expand {
@@ -563,7 +573,7 @@ input[type="checkbox"] {
     @apply align-middle;
     @apply cursor-pointer;
 
-    &:before {
+    &::before {
       @apply border;
       @apply border-fgColor;
       @apply rounded-lg;
@@ -574,6 +584,7 @@ input[type="checkbox"] {
       @apply transition;
       @apply ease-in-out;
       @apply duration-200;
+
       content: "\2714";
       height: 16px;
       width: 16px;
@@ -581,7 +592,7 @@ input[type="checkbox"] {
     }
   }
 
-  &:checked + label:before {
+  &:checked + label::before {
     @apply bg-acColor;
     @apply border-acColor;
     @apply text-actColor;
@@ -616,6 +627,7 @@ ol {
   @apply flex;
   @apply p-0;
   @apply list-none;
+
   margin: 4px 0 4px;
 
   ul,
@@ -684,6 +696,7 @@ ol li {
   textarea {
     @apply m-0;
     @apply w-full;
+
     line-height: 1;
   }
 
@@ -708,6 +721,7 @@ ol li {
     @apply ease-in-out;
     @apply duration-200;
     @apply shadow-lg;
+
     bottom: 86px;
     left: 50%;
     z-index: 10001;
@@ -753,6 +767,7 @@ section {
   @apply flex;
   @apply order-2;
   @apply ml-4;
+
   width: 33%;
 }
 
@@ -807,16 +822,17 @@ section {
   @apply text-sm;
   @apply rounded-lg;
   @apply shadow-lg;
+
   padding: 16px !important;
 
   .action {
     @apply bg-gray-50;
     @apply text-gray-900;
     @apply rounded-lg;
+    @apply font-bold;
+
     text-transform: none !important;
     padding: 12px 16px !important;
-    // font-weight: 500 !important;
-    @apply font-bold;
     font-size: 16px !important;
     margin: 0 !important;
     margin-left: 8px !important;
diff --git a/components/collections/add-folder.vue b/components/collections/add-folder.vue
index 28aca4a0d..588239074 100644
--- a/components/collections/add-folder.vue
+++ b/components/collections/add-folder.vue
@@ -45,6 +45,7 @@
 <script>
 import { fb } from "~/helpers/fb"
 import closeIcon from "~/static/icons/close-24px.svg?inline"
+
 export default {
   components: {
     closeIcon,
@@ -60,6 +61,13 @@ export default {
     }
   },
   methods: {
+    syncCollections() {
+      if (fb.currentUser !== null) {
+        if (fb.currentSettings[0].value) {
+          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
+        }
+      }
+    },
     addFolder() {
       this.$store.commit("postwoman/addFolder", {
         name: this.$data.name,
@@ -68,13 +76,6 @@ export default {
       this.hideModal()
       this.syncCollections()
     },
-    syncCollections() {
-      if (fb.currentUser !== null) {
-        if (fb.currentSettings[0].value) {
-          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
-        }
-      }
-    },
     hideModal() {
       this.$emit("hide-modal")
     },
diff --git a/components/collections/collection.vue b/components/collections/collection.vue
index 22afbcbf5..b1912bd3a 100644
--- a/components/collections/collection.vue
+++ b/components/collections/collection.vue
@@ -1,12 +1,13 @@
 <template>
   <div>
-    <div :class="['row-wrapper', dragging ? 'drop-zone':'' ]"
-         @dragover.prevent
-         @drop.prevent="dropEvent"
-         @dragover="dragging=true"
-         @drop="dragging=false"
-         @dragleave="dragging=false"
-         @dragend="dragging=false"
+    <div
+      :class="['row-wrapper', dragging ? 'drop-zone' : '']"
+      @dragover.prevent
+      @drop.prevent="dropEvent"
+      @dragover="dragging = true"
+      @drop="dragging = false"
+      @dragleave="dragging = false"
+      @dragend="dragging = false"
     >
       <button class="icon" @click="toggleShowChildren">
         <i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
@@ -29,7 +30,11 @@
           </button>
           <template slot="popover">
             <div>
-              <button class="icon" @click="$emit('add-folder', {folder: collection})" v-close-popover>
+              <button
+                class="icon"
+                @click="$emit('add-folder', { folder: collection })"
+                v-close-popover
+              >
                 <i class="material-icons">create_new_folder</i>
                 <span>{{ $t("new_folder") }}</span>
               </button>
@@ -135,20 +140,20 @@ export default {
       })
       this.syncCollections()
     },
-    dropEvent(event) {
-      this.dragging = !this.dragging;
-      const oldCollectionIndex = event.dataTransfer.getData('oldCollectionIndex');
-      const oldFolderIndex = event.dataTransfer.getData('oldFolderIndex');
-      const oldFolderName = event.dataTransfer.getData('oldFolderName');
-      const requestIndex = event.dataTransfer.getData('requestIndex');
+    dropEvent({ dataTransfer }) {
+      this.dragging = !this.dragging
+      const oldCollectionIndex = dataTransfer.getData("oldCollectionIndex")
+      const oldFolderIndex = dataTransfer.getData("oldFolderIndex")
+      const oldFolderName = dataTransfer.getData("oldFolderName")
+      const requestIndex = dataTransfer.getData("requestIndex")
       this.$store.commit("postwoman/moveRequest", {
-        oldCollectionIndex: oldCollectionIndex,
+        oldCollectionIndex,
         newCollectionIndex: this.$props.collectionIndex,
         newFolderIndex: -1,
         newFolderName: this.$props.collection.name,
-        oldFolderIndex: oldFolderIndex,
-        oldFolderName: oldFolderName,
-        requestIndex: requestIndex
+        oldFolderIndex,
+        oldFolderName,
+        requestIndex,
       })
       this.syncCollections()
     },
diff --git a/components/collections/folder.vue b/components/collections/folder.vue
index 014973792..12b07d9e2 100644
--- a/components/collections/folder.vue
+++ b/components/collections/folder.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     <div
-      :class="['row-wrapper', dragging ? 'drop-zone':'' ]"
+      :class="['row-wrapper', dragging ? 'drop-zone' : '']"
       @dragover.prevent
       @drop.prevent="dropEvent"
-      @dragover="dragging=true"
-      @drop="dragging=false"
-      @dragleave="dragging=false"
-      @dragend="dragging=false"
+      @dragover="dragging = true"
+      @drop="dragging = false"
+      @dragleave="dragging = false"
+      @dragend="dragging = false"
     >
       <div>
         <button class="icon" @click="toggleShowChildren">
@@ -29,7 +29,11 @@
             </button>
           </div>
           <div>
-            <button class="icon"  @click="$emit('edit-folder', { folder, folderIndex, collectionIndex })"  v-close-popover>
+            <button
+              class="icon"
+              @click="$emit('edit-folder', { folder, folderIndex, collectionIndex })"
+              v-close-popover
+            >
               <i class="material-icons">edit</i>
               <span>{{ $t("edit") }}</span>
             </button>
@@ -63,7 +67,7 @@
         </li>
       </ul>
       <ul v-if="folder.folders && folder.folders.length" class="flex-col">
-        <li v-for="(subFolder, subFolderIndex) in folder.folders" :key="subFolder.name" >
+        <li v-for="(subFolder, subFolderIndex) in folder.folders" :key="subFolder.name">
           <folder
             :folder="subFolder"
             :folder-index="subFolderIndex"
@@ -115,31 +119,31 @@ export default {
       this.$store.commit("postwoman/removeFolder", {
         collectionIndex: this.$props.collectionIndex,
         folderName: this.$props.folder.name,
-        folderIndex: this.$props.folderIndex
+        folderIndex: this.$props.folderIndex,
       })
       this.syncCollections()
       this.$toast.error(this.$t("deleted"), {
         icon: "delete",
       })
     },
-    dropEvent(event) {
-      this.dragging = !this.dragging;
-      const oldCollectionIndex = event.dataTransfer.getData('oldCollectionIndex');
-      const oldFolderIndex = event.dataTransfer.getData('oldFolderIndex');
-      const oldFolderName = event.dataTransfer.getData('oldFolderName');
-      const requestIndex = event.dataTransfer.getData('requestIndex');
+    dropEvent({ dataTransfer }) {
+      this.dragging = !this.dragging
+      const oldCollectionIndex = dataTransfer.getData("oldCollectionIndex")
+      const oldFolderIndex = dataTransfer.getData("oldFolderIndex")
+      const oldFolderName = dataTransfer.getData("oldFolderName")
+      const requestIndex = dataTransfer.getData("requestIndex")
 
       this.$store.commit("postwoman/moveRequest", {
-        oldCollectionIndex: oldCollectionIndex,
+        oldCollectionIndex,
         newCollectionIndex: this.$props.collectionIndex,
         newFolderIndex: this.$props.folderIndex,
         newFolderName: this.$props.folder.name,
-        oldFolderIndex: oldFolderIndex,
-        oldFolderName: oldFolderName,
-        requestIndex: requestIndex
+        oldFolderIndex,
+        oldFolderName,
+        requestIndex,
       })
       this.syncCollections()
     },
-  }
+  },
 }
 </script>
diff --git a/components/collections/import-export-collections.vue b/components/collections/import-export-collections.vue
index cbab58714..20d583c90 100644
--- a/components/collections/import-export-collections.vue
+++ b/components/collections/import-export-collections.vue
@@ -108,8 +108,8 @@ export default {
     },
     replaceWithJSON() {
       let reader = new FileReader()
-      reader.onload = (event) => {
-        let content = event.target.result
+      reader.onload = ({ target }) => {
+        let content = target.result
         let collections = JSON.parse(content)
         if (collections[0]) {
           let [name, folders, requests] = Object.keys(collections[0])
@@ -130,8 +130,8 @@ export default {
     },
     importFromJSON() {
       let reader = new FileReader()
-      reader.onload = (event) => {
-        let content = event.target.result
+      reader.onload = ({ target }) => {
+        let content = target.result
         let collections = JSON.parse(content)
         if (collections[0]) {
           let [name, folders, requests] = Object.keys(collections[0])
@@ -191,24 +191,23 @@ export default {
         icon: "error",
       })
     },
-    parsePostmanCollection(collection) {
-      let postwomanCollection =
-        {
-          name: "",
-          folders: [],
-          requests: [],
-        }
+    parsePostmanCollection({ info, name, item }) {
+      let postwomanCollection = {
+        name: "",
+        folders: [],
+        requests: [],
+      }
 
-      postwomanCollection.name = collection.info ? collection.info.name : collection.name
+      postwomanCollection.name = info ? info.name : name
 
-      if (collection.item && collection.item.length > 0) {
-        for (let collectionItem of collection.item) {
+      if (item && item.length > 0) {
+        for (let collectionItem of item) {
           if (collectionItem.request) {
-            if (postwomanCollection.hasOwnProperty('folders')) {
-              postwomanCollection.name = collection.info ? collection.info.name : collection.name
+            if (postwomanCollection.hasOwnProperty("folders")) {
+              postwomanCollection.name = info ? info.name : name
               postwomanCollection.requests.push(this.parsePostmanRequest(collectionItem))
             } else {
-              postwomanCollection.name = collection.name ? collection.name : ""
+              postwomanCollection.name = name ? name : ""
               postwomanCollection.requests.push(this.parsePostmanRequest(collectionItem))
             }
           } else if (this.hasFolder(collectionItem)) {
@@ -295,7 +294,7 @@ export default {
       return pwRequest
     },
     hasFolder(item) {
-      return item.hasOwnProperty('item')
+      return item.hasOwnProperty("item")
     },
   },
 }
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 9406983e5..b7b583358 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -119,7 +119,7 @@ export default {
       editingCollection: undefined,
       editingCollectionIndex: undefined,
       editingFolder: undefined,
-      editingFolderName:undefined,
+      editingFolderName: undefined,
       editingFolderIndex: undefined,
       editingRequest: undefined,
       editingRequestIndex: undefined,
diff --git a/components/collections/request.vue b/components/collections/request.vue
index c302cb452..b2b5e50d8 100644
--- a/components/collections/request.vue
+++ b/components/collections/request.vue
@@ -4,8 +4,8 @@
     draggable="true"
     @dragstart="dragStart"
     @dragover.stop
-    @dragleave="dragging=false"
-    @dragend="dragging=false"
+    @dragleave="dragging = false"
+    @dragend="dragging = false"
   >
     <div>
       <button
@@ -23,11 +23,19 @@
       </button>
       <template slot="popover">
         <div>
-          <button class="icon" @click="$emit('edit-request',{ collectionIndex,
-                                                              folderIndex,
-                                                              folderName,
-                                                              request,
-                                                              requestIndex } )" v-close-popover>
+          <button
+            class="icon"
+            @click="
+              $emit('edit-request', {
+                collectionIndex,
+                folderIndex,
+                folderName,
+                request,
+                requestIndex,
+              })
+            "
+            v-close-popover
+          >
             <i class="material-icons">edit</i>
             <span>{{ $t("edit") }}</span>
           </button>
@@ -73,12 +81,12 @@ export default {
     selectRequest() {
       this.$store.commit("postwoman/selectRequest", { request: this.request })
     },
-    dragStart(event) {
-      this.dragging = !this.dragging;
-      event.dataTransfer.setData('oldCollectionIndex', this.$props.collectionIndex);
-      event.dataTransfer.setData('oldFolderIndex', this.$props.folderIndex)
-      event.dataTransfer.setData('oldFolderName', this.$props.folderName);
-      event.dataTransfer.setData('requestIndex', this.$props.requestIndex);
+    dragStart({ dataTransfer }) {
+      this.dragging = !this.dragging
+      dataTransfer.setData("oldCollectionIndex", this.$props.collectionIndex)
+      dataTransfer.setData("oldFolderIndex", this.$props.folderIndex)
+      dataTransfer.setData("oldFolderName", this.$props.folderName)
+      dataTransfer.setData("requestIndex", this.$props.requestIndex)
     },
     removeRequest() {
       if (!confirm(this.$t("are_you_sure_remove_request"))) return
diff --git a/components/collections/save-request-as.vue b/components/collections/save-request-as.vue
index fb7bce10e..c61d61f9c 100644
--- a/components/collections/save-request-as.vue
+++ b/components/collections/save-request-as.vue
@@ -108,13 +108,13 @@ export default {
     "requestData.folderName": function resetRequestIndex() {
       this.$data.requestData.requestIndex = undefined
     },
-    editingRequest(request) {
-      this.defaultRequestName = request.label || "My Request"
+    editingRequest({ label }) {
+      this.defaultRequestName = label || "My Request"
     },
   },
   computed: {
     folders() {
-      const collections =  this.$store.state.postwoman.collections
+      const collections = this.$store.state.postwoman.collections
       const collectionIndex = this.$data.requestData.collectionIndex
       const userSelectedAnyCollection = collectionIndex !== undefined
       if (!userSelectedAnyCollection) return []
@@ -134,7 +134,7 @@ export default {
         return []
       }
 
-      const userSelectedAnyFolder = folderName !== undefined && folderName !== ''
+      const userSelectedAnyFolder = folderName !== undefined && folderName !== ""
 
       if (userSelectedAnyFolder) {
         const collection = collections[collectionIndex]
@@ -144,7 +144,7 @@ export default {
         const collection = collections[collectionIndex]
         const noCollectionAvailable = collection !== undefined
 
-        if (!noCollectionAvailable){
+        if (!noCollectionAvailable) {
           return []
         }
 
@@ -194,7 +194,7 @@ export default {
 
 function getFolderNames(folders, namesList) {
   if (folders.length) {
-    folders.forEach(folder => {
+    folders.forEach((folder) => {
       namesList.push(folder.name)
       if (folder.folders && folder.folders.length) {
         getFolderNames(folder.folders, namesList)
@@ -205,14 +205,15 @@ function getFolderNames(folders, namesList) {
 }
 
 function findFolder(folderName, currentFolder) {
-  let selectedFolder, result;
+  let selectedFolder
+  let result
 
-  if (folderName === currentFolder.name){
+  if (folderName === currentFolder.name) {
     return currentFolder
   }
 
   for (let i = 0; i < currentFolder.folders.length; i++) {
-    selectedFolder = currentFolder.folders[i];
+    selectedFolder = currentFolder.folders[i]
 
     result = findFolder(folderName, selectedFolder)
 
diff --git a/components/environments/edit-environment.vue b/components/environments/edit-environment.vue
index b96ce2078..31674ba6c 100644
--- a/components/environments/edit-environment.vue
+++ b/components/environments/edit-environment.vue
@@ -126,7 +126,7 @@ export default {
     }
   },
   watch: {
-    editingEnvironment: function (update) {
+    editingEnvironment(update) {
       this.name =
         this.$props.editingEnvironment && this.$props.editingEnvironment.name
           ? this.$props.editingEnvironment.name
@@ -151,13 +151,13 @@ export default {
         }
       }
     },
-    clearContent(e) {
+    clearContent({ target }) {
       this.$store.commit("postwoman/removeVariables", [])
-      e.target.innerHTML = this.doneButton
+      target.innerHTML = this.doneButton
       this.$toast.info(this.$t("cleared"), {
         icon: "clear_all",
       })
-      setTimeout(() => (e.target.innerHTML = '<i class="material-icons">clear_all</i>'), 1000)
+      setTimeout(() => (target.innerHTML = '<i class="material-icons">clear_all</i>'), 1000)
     },
     addEnvironmentVariable() {
       let value = { key: "", value: "" }
diff --git a/components/environments/import-export-environment.vue b/components/environments/import-export-environment.vue
index 4c76133eb..0068f6a21 100644
--- a/components/environments/import-export-environment.vue
+++ b/components/environments/import-export-environment.vue
@@ -108,8 +108,8 @@ export default {
     },
     replaceWithJSON() {
       let reader = new FileReader()
-      reader.onload = (event) => {
-        let content = event.target.result
+      reader.onload = ({ target }) => {
+        let content = target.result
         let environments = JSON.parse(content)
         this.$store.commit("postwoman/replaceEnvironments", environments)
       }
@@ -120,8 +120,8 @@ export default {
     },
     importFromJSON() {
       let reader = new FileReader()
-      reader.onload = (event) => {
-        let content = event.target.result
+      reader.onload = ({ target }) => {
+        let content = target.result
         let importFileObj = JSON.parse(content)
         if (
           importFileObj["_postman_variable_scope"] === "environment" ||
@@ -143,11 +143,9 @@ export default {
         confirmation,
       })
     },
-    importFromPostman(importFileObj) {
-      let environment = { name: importFileObj.name, variables: [] }
-      importFileObj.values.forEach((element) =>
-        environment.variables.push({ key: element.key, value: element.value })
-      )
+    importFromPostman({ name, values }) {
+      let environment = { name: name, variables: [] }
+      values.forEach(({ key, value }) => environment.variables.push({ key: key, value: value }))
       let environments = [environment]
       this.importFromPostwoman(environments)
     },
diff --git a/components/firebase/feeds.vue b/components/firebase/feeds.vue
index 81c13e4c5..846a2b9ec 100644
--- a/components/firebase/feeds.vue
+++ b/components/firebase/feeds.vue
@@ -54,8 +54,8 @@ export default {
     }
   },
   methods: {
-    async deleteFeed(feed) {
-      await fb.deleteFeed(feed.id)
+    async deleteFeed({ id }) {
+      await fb.deleteFeed(id)
       this.$toast.error(this.$t("deleted"), {
         icon: "delete",
       })
diff --git a/components/graphql/type.vue b/components/graphql/type.vue
index 146d2ad49..5efe72411 100644
--- a/components/graphql/type.vue
+++ b/components/graphql/type.vue
@@ -35,9 +35,7 @@ export default {
   },
   methods: {
     isFieldHighlighted({ field }) {
-      return !!this.highlightedFields.find(
-        (highlightedField) => highlightedField.name === field.name
-      )
+      return !!this.highlightedFields.find(({ name }) => name === field.name)
     },
   },
 }
diff --git a/components/layout/history.vue b/components/layout/history.vue
index 494466784..f835feb36 100644
--- a/components/layout/history.vue
+++ b/components/layout/history.vue
@@ -368,8 +368,8 @@ export default {
     useHistory(entry) {
       this.$emit("useHistory", entry)
     },
-    findEntryStatus(entry) {
-      const foundStatusGroup = findStatusGroup(entry.status)
+    findEntryStatus({ status }) {
+      const foundStatusGroup = findStatusGroup(status)
       return (
         foundStatusGroup || {
           className: "",
diff --git a/components/layout/pw-header.vue b/components/layout/pw-header.vue
index d802ea101..45517b1d9 100644
--- a/components/layout/pw-header.vue
+++ b/components/layout/pw-header.vue
@@ -452,11 +452,5 @@ export default {
       }
     },
   },
-
-  computed: {
-    availableLocales() {
-      return this.$i18n.locales.filter((i) => i.code !== this.$i18n.locale)
-    },
-  },
 }
 </script>
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index 7199d84eb..2a0106810 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -73,6 +73,7 @@
     </li>
   </ul>
 </template>
+
 <script>
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 
diff --git a/components/lenses/renderers/ImageLensRenderer.vue b/components/lenses/renderers/ImageLensRenderer.vue
index 2f0e09474..fe93d22ef 100644
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -50,8 +50,8 @@ export default {
         const blob = new Blob([bytes.buffer])
 
         const reader = new FileReader()
-        reader.onload = (e) => {
-          this.imageSource = e.target.result
+        reader.onload = ({ target }) => {
+          this.imageSource = target.result
         }
         reader.readAsDataURL(blob)
       },
@@ -65,8 +65,8 @@ export default {
     const blob = new Blob([bytes.buffer])
 
     const reader = new FileReader()
-    reader.onload = (e) => {
-      this.imageSource = e.target.result
+    reader.onload = ({ target }) => {
+      this.imageSource = target.result
     }
     reader.readAsDataURL(blob)
   },
@@ -78,7 +78,8 @@ export default {
       const url = URL.createObjectURL(file)
       a.href = url
       // TODO get uri from meta
-      a.download = `response on ${Date()}`.replace(/\./g, "[dot]")
+      a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}.${this.responseType}`
+      // `response on ${Date()}`.replace(/\./g, "[dot]")
       document.body.appendChild(a)
       a.click()
       this.$refs.downloadResponse.innerHTML = this.doneButton
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index a22142e50..6c256a3ab 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -55,6 +55,7 @@
     </li>
   </ul>
 </template>
+
 <script>
 import { isJSONContentType } from "~/helpers/utils/contenttypes"
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
index 171131739..364424116 100644
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -55,6 +55,7 @@
     </li>
   </ul>
 </template>
+
 <script>
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 
diff --git a/components/realtime/log.vue b/components/realtime/log.vue
index 1ca07d928..3f74594f4 100644
--- a/components/realtime/log.vue
+++ b/components/realtime/log.vue
@@ -47,7 +47,7 @@ export default {
   methods: {
     getSourcePrefix,
   },
-  updated: function () {
+  updated() {
     this.$nextTick(function () {
       if (this.$refs.log) {
         this.$refs.log.scrollBy(0, this.$refs.log.scrollHeight + 100)
diff --git a/components/realtime/mqtt.vue b/components/realtime/mqtt.vue
index 6373bdc50..6303cd1ec 100644
--- a/components/realtime/mqtt.vue
+++ b/components/realtime/mqtt.vue
@@ -73,7 +73,7 @@ import Paho from "paho-mqtt"
 import { wsValid } from "~/helpers/utils/valid"
 
 export default {
-  data: function () {
+  data() {
     return {
       url: "wss://test.mosquitto.org:8081",
       client: null,
diff --git a/components/ui/ace-editor.vue b/components/ui/ace-editor.vue
index 618c1ce5f..89b6ca5f1 100644
--- a/components/ui/ace-editor.vue
+++ b/components/ui/ace-editor.vue
@@ -75,7 +75,7 @@ export default {
       })
     },
     lang(value) {
-      this.editor.getSession().setMode("ace/mode/" + value)
+      this.editor.getSession().setMode(`ace/mode/${value}`)
     },
     options(value) {
       this.editor.setOptions(value)
diff --git a/components/ui/autocomplete.vue b/components/ui/autocomplete.vue
index 1ac80e0a0..1bf613206 100644
--- a/components/ui/autocomplete.vue
+++ b/components/ui/autocomplete.vue
@@ -196,12 +196,11 @@ export default {
 
       return (
         this.source
-          .filter((entry) => {
-            return (
+          .filter(
+            (entry) =>
               entry.toLowerCase().startsWith(input.toLowerCase()) &&
               input.toLowerCase() !== entry.toLowerCase()
-            )
-          })
+          )
           // Cut off the part that's already been typed.
           .map((entry) => entry.substring(this.selectionStart))
           // We only want the top 6 suggestions.
diff --git a/nuxt.config.js b/nuxt.config.js
index 2b2e5171c..549373edd 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,5 +1,4 @@
-// Some helpful application constants.
-// TODO: Use these when rendering the pages (rather than just for head/meta tags...)
+// Common options
 export const options = {
   name: "Hoppscotch",
   shortDescription: "A free, fast and beautiful API request builder",
@@ -15,14 +14,20 @@ export const options = {
     twitter: "@liyasthomas",
   },
 }
+
 export default {
+  // Disable server-side rendering (https://go.nuxtjs.dev/ssr-mode)
   ssr: false,
+
+  // Target (https://go.nuxtjs.dev/config-target)
+  target: "static",
+
+  // Default: localhost
   server: {
-    host: "0.0.0.0", // default: localhost
+    host: "0.0.0.0",
   },
-  /*
-   ** Headers of the page
-   */
+
+  // Global page headers (https://go.nuxtjs.dev/config-head)
   head: {
     title: `${options.name} • ${options.shortDescription}`,
     meta: [
@@ -81,66 +86,60 @@ export default {
       },
     ],
   },
-  /*
-   ** Customize the progress-bar color
-   */
+
+  // Customize the progress-bar color (https://nuxtjs.org/api/configuration-loading/#customizing-the-progress-bar)
   loading: {
     color: options.loading.color,
     continuous: true,
   },
-  /*
-   ** Customize the loading indicator
-   */
+
+  // Customize the loading indicator (https://nuxtjs.org/api/configuration-loading-indicator)
   loadingIndicator: {
     name: "pulse",
     color: options.loading.color,
     background: options.loading.background,
   },
-  /*
-   ** Global CSS
-   */
+
+  // Global CSS (https://go.nuxtjs.dev/config-css)
   css: ["~/assets/scss/styles.scss", "~/assets/scss/themes.scss", "~/assets/scss/fonts.scss"],
-  /*
-   ** Plugins to load before mounting the App
-   */
+
+  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
   plugins: ["~/plugins/vuex-persist", "~/plugins/v-tooltip"],
-  /*
-   ** Auto import components
-   ** See https://nuxtjs.org/api/configuration-components
-   */
+
+  // Auto import components (https://go.nuxtjs.dev/config-components)
   components: true,
-  /*
-   ** Nuxt.js dev-modules
-   */
+
+  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
   buildModules: [
-    // https://pwa.nuxtjs.org
+    // https://github.com/nuxt-community/pwa-module
     "@nuxtjs/pwa",
-    // Doc: https://github.com/nuxt-community/analytics-module
+    // https://github.com/nuxt-community/analytics-module
     "@nuxtjs/google-analytics",
-    // Doc: https://github.com/nuxt-community/gtm-module
+    // https://github.com/nuxt-community/gtm-module
     "@nuxtjs/gtm",
-    // Doc: https://github.com/nuxt-community/svg-module
+    // https://github.com/nuxt-community/svg-module
     "@nuxtjs/svg",
-    // Doc: https://tailwindcss.nuxtjs.org
+    // https://github.com/nuxt-community/nuxt-tailwindcss
     "@nuxtjs/tailwindcss",
-    // Doc: https://color-mode.nuxtjs.org
+    // https://github.com/nuxt-community/color-mode-module
     "@nuxtjs/color-mode",
   ],
-  /*
-   ** Nuxt.js modules
-   */
+
+  // Modules (https://go.nuxtjs.dev/config-modules)
   modules: [
-    // https://axios.nuxtjs.org
+    // https://github.com/nuxt-community/axios-module
     "@nuxtjs/axios",
     // https://github.com/nuxt-community/modules/tree/master/packages/toast
     "@nuxtjs/toast",
-    // Doc: https://github.com/nuxt-community/nuxt-i18n
+    // https://github.com/nuxt-community/i18n-module
     "nuxt-i18n",
-    // Doc: https://github.com/nuxt-community/robots-module
+    // https://github.com/nuxt-community/robots-module
     "@nuxtjs/robots",
-    // Doc: https://github.com/nuxt-community/sitemap-module
+    // https://github.com/nuxt-community/sitemap-module
     "@nuxtjs/sitemap",
   ],
+
+  // PWA module configuration (https://pwa.nuxtjs.org/setup)
   pwa: {
     meta: {
       ogHost: process.env.BASE_URL,
@@ -160,32 +159,46 @@ export default {
     },
     workbox: false,
   },
+
+  // Toast module configuration (https://github.com/nuxt-community/modules/tree/master/packages/toast)
   toast: {
     position: "bottom-center",
     duration: 3000,
     theme: "bubble",
     keepOnHover: true,
   },
+
+  // Google Analytics module configuration (https://github.com/nuxt-community/analytics-module)
   googleAnalytics: {
     id: process.env.GA_ID,
   },
+
+  // Google Tag Manager module configuration (https://github.com/nuxt-community/gtm-module)
   gtm: {
     id: process.env.GTM_ID,
   },
+
+  // Sitemap module configuration (https://github.com/nuxt-community/sitemap-module)
   sitemap: {
     hostname: process.env.BASE_URL || "https://hoppscotch.io/",
   },
+
+  // Robots module configuration (https://github.com/nuxt-community/robots-module)
   robots: {
     UserAgent: "*",
     Disallow: "",
     Allow: "/",
     Sitemap: `${process.env.BASE_URL}sitemap.xml`,
   },
+
+  // Color Mode module configuration (https://github.com/nuxt-community/color-mode-module)
   colorMode: {
     classSuffix: "",
     preference: "dark",
     fallback: "dark",
   },
+
+  // i18n module configuration (https://github.com/nuxt-community/i18n-module)
   i18n: {
     locales: [
       {
@@ -296,13 +309,10 @@ export default {
       fallbackLocale: "en",
     },
   },
-  /*
-   ** Build configuration
-   */
+
+  // Build Configuration (https://go.nuxtjs.dev/config-build)
   build: {
-    /*
-     ** You can extend webpack config here
-     */
+    // You can extend webpack config here
     extend(config, ctx) {
       // Sets webpack's mode to development if `isDev` is true.
       if (ctx.isDev) {
@@ -316,17 +326,20 @@ export default {
     cache: true,
     // hardSource: true,
   },
-  /*
-   ** Generate configuration
-   */
+
+  // Generate configuration (https://nuxtjs.org/api/configuration-generate)
   generate: {
     fallback: true,
   },
+
+  // Public runtime configuration (https://nuxtjs.org/guide/runtime-config)
   publicRuntimeConfig: {
     GA_ID: process.env.GA_ID || "UA-61422507-4",
     GTM_ID: process.env.GTM_ID || "GTM-NMKVBMV",
     BASE_URL: process.env.BASE_URL || "https://hoppscotch.io/",
   },
+
+  // Private runtime configuration (https://nuxtjs.org/guide/runtime-config)
   privateRuntimeConfig: {
     API_KEY: process.env.API_KEY,
     AUTH_DOMAIN: process.env.AUTH_DOMAIN,
diff --git a/pages/index.vue b/pages/index.vue
index 3ed8e5c14..0805ebf45 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2390,6 +2390,7 @@ export default {
       switch (name) {
         case "bodyParams":
           this.bodyParams = []
+          this.files = []
           break
         case "rawParams":
           this.rawParams = "{}"
@@ -2518,7 +2519,6 @@ export default {
           icon: "attach_file",
         })
       }
-      this.$refs.attachment.value = ""
     },
     uploadPayload() {
       this.rawInput = true
diff --git a/store/postwoman.js b/store/postwoman.js
index dec635c2f..ced4a63a8 100644
--- a/store/postwoman.js
+++ b/store/postwoman.js
@@ -205,8 +205,8 @@ export const mutations = {
     collections[collectionIndex] = collection
   },
 
-  addFolder({collections}, payload) {
-    const {name, folder} = payload;
+  addFolder({ collections }, payload) {
+    const { name, folder } = payload
 
     const newFolder = {
       name: name,
@@ -218,28 +218,34 @@ export const mutations = {
 
   editFolder({ collections }, payload) {
     const { collectionIndex, folder, folderIndex, folderName } = payload
-    const collection = collections[collectionIndex];
+    const collection = collections[collectionIndex]
 
-    let parentFolder = findFolder(folderName, collection, true);
+    let parentFolder = findFolder(folderName, collection, true)
     if (parentFolder && parentFolder.folders) {
-      Vue.set(parentFolder.folders, folderIndex, folder);
+      Vue.set(parentFolder.folders, folderIndex, folder)
     }
   },
 
   removeFolder({ collections }, payload) {
     const { collectionIndex, folderIndex, folderName } = payload
-    const collection = collections[collectionIndex];
+    const collection = collections[collectionIndex]
 
-    let parentFolder = findFolder(folderName, collection, true);
+    let parentFolder = findFolder(folderName, collection, true)
     if (parentFolder && parentFolder.folders) {
       parentFolder.folders.splice(folderIndex, 1)
     }
   },
 
   editRequest({ collections }, payload) {
-    const { requestCollectionIndex, requestFolderName, requestFolderIndex, requestNew, requestIndex } = payload
+    const {
+      requestCollectionIndex,
+      requestFolderName,
+      requestFolderIndex,
+      requestNew,
+      requestIndex,
+    } = payload
 
-    let collection = collections[requestCollectionIndex];
+    let collection = collections[requestCollectionIndex]
 
     if (requestFolderIndex === -1) {
       Vue.set(collection.requests, requestIndex, requestNew)
@@ -277,7 +283,7 @@ export const mutations = {
 
   removeRequest({ collections }, payload) {
     const { collectionIndex, folderName, requestIndex } = payload
-    let collection = collections[collectionIndex];
+    let collection = collections[collectionIndex]
 
     if (collection.name === folderName) {
       collection.requests.splice(requestIndex, 1)
@@ -295,11 +301,18 @@ export const mutations = {
   },
 
   moveRequest({ collections }, payload) {
-    const { oldCollectionIndex, newCollectionIndex, newFolderIndex, newFolderName, oldFolderName, requestIndex } = payload;
+    const {
+      oldCollectionIndex,
+      newCollectionIndex,
+      newFolderIndex,
+      newFolderName,
+      oldFolderName,
+      requestIndex,
+    } = payload
 
-    const isCollection = newFolderIndex === -1;
-    const oldCollection = collections[oldCollectionIndex];
-    const newCollection = collections[newCollectionIndex];
+    const isCollection = newFolderIndex === -1
+    const oldCollection = collections[oldCollectionIndex]
+    const newCollection = collections[newCollectionIndex]
     const request = findRequest(oldFolderName, oldCollection, requestIndex)
 
     if (isCollection) {
@@ -308,7 +321,7 @@ export const mutations = {
     }
 
     if (!isCollection) {
-      const folder = findFolder(newFolderName, newCollection, false);
+      const folder = findFolder(newFolderName, newCollection, false)
       if (folder) {
         folder.requests.push(request)
         return
@@ -327,45 +340,43 @@ function testValue(myValue) {
 }
 
 function findRequest(folderName, currentFolder, requestIndex) {
-  let selectedFolder, result;
+  let selectedFolder, result
 
   if (folderName === currentFolder.name) {
-    let request = currentFolder.requests[requestIndex];
+    let request = currentFolder.requests[requestIndex]
     currentFolder.requests.splice(requestIndex, 1)
-    return request;
+    return request
   } else {
-
     for (let i = 0; i < currentFolder.folders.length; i += 1) {
-      selectedFolder = currentFolder.folders[i];
+      selectedFolder = currentFolder.folders[i]
 
-      result = findRequest(folderName, selectedFolder, requestIndex);
+      result = findRequest(folderName, selectedFolder, requestIndex)
 
       if (result !== false) {
-        return result;
+        return result
       }
     }
-    return false;
+    return false
   }
 }
 
 function findFolder(folderName, currentFolder, returnParent, parentFolder) {
-  let selectedFolder, result;
+  let selectedFolder, result
 
   if (folderName === currentFolder.name && returnParent) {
-    return parentFolder;
+    return parentFolder
   } else if (folderName === currentFolder.name && !returnParent) {
-    return currentFolder;
+    return currentFolder
   } else {
-
     for (let i = 0; i < currentFolder.folders.length; i++) {
-      selectedFolder = currentFolder.folders[i];
+      selectedFolder = currentFolder.folders[i]
 
-      result = findFolder(folderName, selectedFolder, returnParent, currentFolder);
+      result = findFolder(folderName, selectedFolder, returnParent, currentFolder)
 
       if (result !== false) {
-        return result;
+        return result
       }
     }
-    return false;
+    return false
   }
 }