refactor: lint

components/http/BodyParameters.vue

@@ -6,9 +6,9 @@
           <label for="reqParamList">{{ $t("request_body") }}</label>
           <div>
             <button
+              v-tooltip.bottom="$t('clear')"
               class="icon"
               @click="clearContent('bodyParams', $event)"
-              v-tooltip.bottom="$t('clear')"
             >
               <i class="material-icons">clear_all</i>
             </button>
@@ -34,9 +34,9 @@
           :placeholder="`key ${index + 1}`"
           :name="`bparam ${index}`"
           :value="param.key"
+          autofocus
           @change="updateBodyParams($event, index, `setKeyBodyParams`)"
           @keyup.prevent="setRouteQueryState"
-          autofocus
         />
       </li>
       <li>
@@ -66,8 +66,6 @@
       <div>
         <li>
           <button
-            class="icon"
-            @click="toggleActive(index, param)"
             v-tooltip.bottom="{
               content: param.hasOwnProperty('active')
                 ? param.active
@@ -75,6 +73,8 @@
                   : $t('turn_on')
                 : $t('turn_off'),
             }"
+            class="icon"
+            @click="toggleActive(index, param)"
           >
             <i class="material-icons">
               {{
@@ -91,7 +91,10 @@
       <div v-if="contentType === 'multipart/form-data'">
         <li>
           <label for="attachment" class="p-0">
-            <button class="w-full icon" @click="$refs.attachment[index].click()">
+            <button
+              class="w-full icon"
+              @click="$refs.attachment[index].click()"
+            >
               <i class="material-icons">attach_file</i>
             </button>
           </label>
@@ -99,17 +102,17 @@
             ref="attachment"
             name="attachment"
             type="file"
-            @change="setRequestAttachment($event, index)"
             multiple
+            @change="setRequestAttachment($event, index)"
           />
         </li>
       </div>
       <div>
         <li>
           <button
+            v-tooltip.bottom="$t('delete')"
             class="icon"
             @click="removeRequestBodyParam(index)"
-            v-tooltip.bottom="$t('delete')"
           >
             <i class="material-icons">delete</i>
           </button>
@@ -118,7 +121,7 @@
     </ul>
     <ul>
       <li>
-        <button class="icon" @click="addRequestBodyParam" name="addrequest">
+        <button class="icon" name="addrequest" @click="addRequestBodyParam">
           <i class="material-icons">add</i>
           <span>{{ $t("add_new") }}</span>
         </button>
@@ -127,26 +130,16 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-.file-chips-container {
-  @apply flex;
-  @apply flex-1;
-  @apply whitespace-nowrap;
-  @apply overflow-auto;
-  @apply bg-bgDarkColor;
-
-  .file-chips-wrapper {
-    @apply flex;
-    @apply w-0;
-  }
-}
-</style>
-
 <script>
 export default {
   props: {
     bodyParams: { type: Array, default: () => [] },
   },
+  computed: {
+    contentType() {
+      return this.$store.state.request.contentType
+    },
+  },
   methods: {
     clearContent(bodyParams, $event) {
       this.$emit("clear-content", bodyParams, $event)
@@ -157,7 +150,10 @@ export default {
     removeRequestBodyParam(index) {
       const paramArr = this.$store.state.request.bodyParams.filter(
         (item, itemIndex) =>
-          itemIndex !== index && (item.hasOwnProperty("active") ? item.active == true : true)
+          itemIndex !== index &&
+          (Object.prototype.hasOwnProperty.call(item, "active")
+            ? item.active === true
+            : true)
       )
       this.setRawParams(paramArr)
       this.$emit("remove-request-body-param", index)
@@ -188,26 +184,34 @@ export default {
         index,
         value: event.target.value,
       })
-      let paramArr = this.$store.state.request.bodyParams.filter((item) =>
-        item.hasOwnProperty("active") ? item.active == true : true
+      const paramArr = this.$store.state.request.bodyParams.filter((item) =>
+        Object.prototype.hasOwnProperty.call(item, "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
+      const paramArr = this.$store.state.request.bodyParams.filter(
+        (item, itemIndex) => {
+          if (index === itemIndex) {
+            return !param.active
+          } else {
+            return Object.prototype.hasOwnProperty.call(item, "active")
+              ? item.active === true
+              : true
+          }
         }
-      })
+      )
 
       this.setRawParams(paramArr)
 
       this.$store.commit("setActiveBodyParams", {
         index,
-        value: param.hasOwnProperty("active") ? !param.active : false,
+        value: Object.prototype.hasOwnProperty.call(param, "active")
+          ? !param.active
+          : false,
       })
     },
     setRawParams(filteredParamArr) {
@@ -219,13 +223,26 @@ export default {
         }
       })
       const rawParamsStr = JSON.stringify(rawParams, null, 2)
-      this.$store.commit("setState", { value: rawParamsStr, attribute: "rawParams" })
-    },
-  },
-  computed: {
-    contentType() {
-      return this.$store.state.request.contentType
+      this.$store.commit("setState", {
+        value: rawParamsStr,
+        attribute: "rawParams",
+      })
     },
   },
 }
 </script>
+
+<style scoped lang="scss">
+.file-chips-container {
+  @apply flex;
+  @apply flex-1;
+  @apply whitespace-nowrap;
+  @apply overflow-auto;
+  @apply bg-bgDarkColor;
+
+  .file-chips-wrapper {
+    @apply flex;
+    @apply w-0;
+  }
+}
+</style>

components/http/CodegenModal.vue

@@ -14,7 +14,9 @@
       <label for="requestType">{{ $t("choose_language") }}</label>
       <span class="select-wrapper">
         <v-popover>
-          <pre v-if="requestType">{{ codegens.find((x) => x.id === requestType).name }}</pre>
+          <pre v-if="requestType">{{
+            codegens.find((x) => x.id === requestType).name
+          }}</pre>
           <input
             v-else
             id="requestType"
@@ -26,7 +28,11 @@
           />
           <template slot="popover">
             <div v-for="gen in codegens" :key="gen.id">
-              <button class="icon" @click="requestType = gen.id" v-close-popover>
+              <button
+                v-close-popover
+                class="icon"
+                @click="requestType = gen.id"
+              >
                 {{ gen.name }}
               </button>
             </div>
@@ -37,10 +43,10 @@
         <label for="generatedCode">{{ $t("generated_code") }}</label>
         <div>
           <button
-            class="icon"
-            @click="copyRequestCode"
             ref="copyRequestCode"
             v-tooltip="$t('copy_code')"
+            class="icon"
+            @click="copyRequestCode"
           >
             <i class="material-icons">content_copy</i>
           </button>
@@ -48,6 +54,7 @@
       </div>
       <SmartAceEditor
         v-if="requestType"
+        ref="generatedCode"
         :value="requestCode"
         :lang="codegens.find((x) => x.id === requestType).language"
         :options="{
@@ -60,7 +67,6 @@
           useWorker: false,
         }"
         styles="rounded-b-lg"
-        ref="generatedCode"
       />
     </div>
   </SmartModal>
@@ -72,7 +78,7 @@ import { codegens } from "~/helpers/codegen/codegen"
 export default {
   props: {
     show: Boolean,
-    requestCode: String,
+    requestCode: { type: String, default: "" },
     requestTypeProp: { type: String, default: "curl" },
   },
   data() {
@@ -107,7 +113,10 @@ export default {
       this.$refs.generatedCode.editor.selectAll()
       this.$refs.generatedCode.editor.focus()
       document.execCommand("copy")
-      setTimeout(() => (this.$refs.copyRequestCode.innerHTML = this.copyButton), 1000)
+      setTimeout(
+        () => (this.$refs.copyRequestCode.innerHTML = this.copyButton),
+        1000
+      )
     },
   },
 }

components/http/Headers.vue

@@ -1,14 +1,14 @@
 <template>
-  <AppSection label="Headers" ref="headers" no-legend>
+  <AppSection ref="headers" label="Headers" no-legend>
     <ul v-if="headers.length !== 0">
       <li>
         <div class="row-wrapper">
           <label for="headerList">{{ $t("header_list") }}</label>
           <div>
             <button
+              v-tooltip.bottom="$t('clear')"
               class="icon"
               @click="clearContent('headers', $event)"
-              v-tooltip.bottom="$t('clear')"
             >
               <i class="material-icons">clear_all</i>
             </button>
@@ -35,6 +35,7 @@
           :source="commonHeaders"
           :spellcheck="false"
           :value="header.key"
+          autofocus
           @input="
             $store.commit('setKeyHeader', {
               index,
@@ -42,7 +43,6 @@
             })
           "
           @keyup.prevent="setRouteQueryState"
-          autofocus
         />
       </li>
       <li>
@@ -62,13 +62,6 @@
       <div>
         <li>
           <button
-            class="icon"
-            @click="
-              $store.commit('setActiveHeader', {
-                index,
-                value: header.hasOwnProperty('active') ? !header.active : false,
-              })
-            "
             v-tooltip.bottom="{
               content: header.hasOwnProperty('active')
                 ? header.active
@@ -76,6 +69,13 @@
                   : $t('turn_on')
                 : $t('turn_off'),
             }"
+            class="icon"
+            @click="
+              $store.commit('setActiveHeader', {
+                index,
+                value: header.hasOwnProperty('active') ? !header.active : false,
+              })
+            "
           >
             <i class="material-icons">
               {{
@@ -91,7 +91,11 @@
       </div>
       <div>
         <li>
-          <button class="icon" @click="removeRequestHeader(index)" v-tooltip.bottom="$t('delete')">
+          <button
+            v-tooltip.bottom="$t('delete')"
+            class="icon"
+            @click="removeRequestHeader(index)"
+          >
             <i class="material-icons">delete</i>
           </button>
         </li>

components/http/ImportCurl.vue

@@ -11,7 +11,12 @@
       </div>
     </div>
     <div slot="body" class="flex flex-col">
-      <textarea id="import-curl" autofocus rows="8" :placeholder="$t('enter_curl')"></textarea>
+      <textarea
+        id="import-curl"
+        autofocus
+        rows="8"
+        :placeholder="$t('enter_curl')"
+      ></textarea>
     </div>
     <div slot="footer">
       <div class="row-wrapper">

components/http/Notes.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppSection :label="$t('notes')" ref="sync" no-legend>
+  <AppSection ref="sync" :label="$t('notes')" no-legend>
     <div v-if="fb.currentUser">
       <FirebaseInputform />
       <FirebaseFeeds />

components/http/Parameters.vue

@@ -1,14 +1,14 @@
 <template>
-  <AppSection label="Parameters" ref="parameters" no-legend>
+  <AppSection ref="parameters" label="Parameters" no-legend>
     <ul v-if="params.length !== 0">
       <li>
         <div class="row-wrapper">
           <label for="paramList">{{ $t("parameter_list") }}</label>
           <div>
             <button
+              v-tooltip.bottom="$t('clear')"
               class="icon"
               @click="clearContent('parameters', $event)"
-              v-tooltip.bottom="$t('clear')"
             >
               <i class="material-icons">clear_all</i>
             </button>
@@ -34,13 +34,13 @@
           :placeholder="$t('parameter_count', { count: index + 1 })"
           :name="'param' + index"
           :value="param.key"
+          autofocus
           @change="
             $store.commit('setKeyParams', {
               index,
               value: $event.target.value,
             })
           "
-          autofocus
         />
       </li>
       <li>
@@ -79,13 +79,6 @@
       <div>
         <li>
           <button
-            class="icon"
-            @click="
-              $store.commit('setActiveParams', {
-                index,
-                value: param.hasOwnProperty('active') ? !param.active : false,
-              })
-            "
             v-tooltip.bottom="{
               content: param.hasOwnProperty('active')
                 ? param.active
@@ -93,6 +86,13 @@
                   : $t('turn_on')
                 : $t('turn_off'),
             }"
+            class="icon"
+            @click="
+              $store.commit('setActiveParams', {
+                index,
+                value: param.hasOwnProperty('active') ? !param.active : false,
+              })
+            "
           >
             <i class="material-icons">
               {{
@@ -108,7 +108,11 @@
       </div>
       <div>
         <li>
-          <button class="icon" @click="removeRequestParam(index)" v-tooltip.bottom="$t('delete')">
+          <button
+            v-tooltip.bottom="$t('delete')"
+            class="icon"
+            @click="removeRequestParam(index)"
+          >
             <i class="material-icons">delete</i>
           </button>
         </li>

components/http/RawBody.vue

@@ -6,24 +6,33 @@
           <label for="rawBody">{{ $t("raw_request_body") }}</label>
           <div>
             <button
-              class="icon"
-              ref="prettifyRequest"
-              @click="prettifyRequestBody"
-              v-tooltip="$t('prettify_body')"
               v-if="rawInput && contentType.endsWith('json')"
+              ref="prettifyRequest"
+              v-tooltip="$t('prettify_body')"
+              class="icon"
+              @click="prettifyRequestBody"
             >
               <i class="material-icons">photo_filter</i>
             </button>
             <label for="payload" class="p-0">
-              <button class="icon" @click="$refs.payload.click()" v-tooltip="$t('import_json')">
+              <button
+                v-tooltip="$t('import_json')"
+                class="icon"
+                @click="$refs.payload.click()"
+              >
                 <i class="material-icons">post_add</i>
               </button>
             </label>
-            <input ref="payload" name="payload" type="file" @change="uploadPayload" />
+            <input
+              ref="payload"
+              name="payload"
+              type="file"
+              @change="uploadPayload"
+            />
             <button
+              v-tooltip.bottom="$t('clear')"
               class="icon"
               @click="clearContent('rawParams', $event)"
-              v-tooltip.bottom="$t('clear')"
             >
               <i class="material-icons">clear_all</i>
             </button>
@@ -102,7 +111,7 @@ export default {
       try {
         const jsonObj = JSON.parse(this.rawParamsBody)
         this.rawParamsBody = JSON.stringify(jsonObj, null, 2)
-        let oldIcon = this.$refs.prettifyRequest.innerHTML
+        const oldIcon = this.$refs.prettifyRequest.innerHTML
         this.$refs.prettifyRequest.innerHTML = this.doneButton
         setTimeout(() => (this.$refs.prettifyRequest.innerHTML = oldIcon), 1000)
       } catch (e) {

components/http/Response.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppSection id="response" :label="$t('response')" ref="response" no-legend>
+  <AppSection id="response" ref="response" :label="$t('response')" no-legend>
     <HttpResponseMeta :response="response" :active="active" />
     <div v-if="response.body && response.body !== $t('loading')">
       <LensesResponseBodyRenderer :response="response" />
@@ -12,7 +12,7 @@ export default {
   props: {
     response: {
       type: Object,
-      default: {},
+      default: () => {},
     },
     active: {
       type: Boolean,

components/http/ResponseMeta.vue

@@ -2,7 +2,9 @@
   <div class="flex flex-col">
     <div class="flex items-center justify-between">
       <label>{{ $t("response") }}</label>
-      <label v-if="active"><i class="animate-spin material-icons">refresh</i></label>
+      <label v-if="active"
+        ><i class="animate-spin material-icons">refresh</i></label
+      >
       <label v-else :class="statusCategory ? statusCategory.className : ''">
         <i class="material-icons">fiber_manual_record</i>
       </label>
@@ -31,7 +33,7 @@ export default {
   props: {
     response: {
       type: Object,
-      default: {},
+      default: () => {},
     },
     active: {
       type: Boolean,

components/http/TokenList.vue

@@ -15,9 +15,9 @@
         <label>{{ $t("token_list") }}</label>
         <div v-if="tokens.length != 0">
           <button
+            v-tooltip.bottom="$t('clear')"
             class="icon"
             @click="clearContent('tokens', $event)"
-            v-tooltip.bottom="$t('clear')"
           >
             <i class="material-icons">clear_all</i>
           </button>
@@ -42,15 +42,19 @@
         <div class="row-wrapper">
           <li>
             <button
+              v-tooltip.bottom="$t('use_token')"
               class="icon"
               @click="useOAuthToken(token.value)"
-              v-tooltip.bottom="$t('use_token')"
             >
               <i class="material-icons">input</i>
             </button>
           </li>
           <li>
-            <button class="icon" @click="removeOAuthToken(index)" v-tooltip.bottom="$t('delete')">
+            <button
+              v-tooltip.bottom="$t('delete')"
+              class="icon"
+              @click="removeOAuthToken(index)"
+            >
               <i class="material-icons">delete</i>
             </button>
           </li>