refactor: lint

components/firebase/Inputform.vue

@@ -2,25 +2,30 @@
   <div class="flex-col">
     <div class="show-on-large-screen">
       <input
+        v-model="message"
         :aria-label="$t('label')"
         type="text"
         autofocus
-        v-model="message"
         :placeholder="$t('paste_a_note')"
-        @keyup.enter="formPost"
         class="rounded-t-lg"
+        @keyup.enter="formPost"
       />
     </div>
     <div class="border-b show-on-large-screen border-brdColor">
       <input
+        v-model="label"
         :aria-label="$t('label')"
         type="text"
         autofocus
-        v-model="label"
         :placeholder="$t('label')"
         @keyup.enter="formPost"
       />
-      <button class="icon" :disabled="!(this.message || this.label)" value="Save" @click="formPost">
+      <button
+        class="icon"
+        :disabled="!(message || label)"
+        value="Save"
+        @click="formPost"
+      >
         <i class="material-icons">add</i>
         <span>Add</span>
       </button>

components/firebase/Logout.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <button class="icon" @click="logout" v-close-popover>
+    <button v-close-popover class="icon" @click="logout">
       <i class="material-icons">exit_to_app</i>
       <span>{{ $t("logout") }}</span>
     </button>

components/firebase/__tests__/Feeds.spec.js

@@ -1,5 +1,7 @@
-import feeds from "../Feeds"
 import { shallowMount } from "@vue/test-utils"
+import feeds from "../Feeds"
+
+import { fb } from "~/helpers/fb"
 
 jest.mock("~/helpers/fb", () => ({
   __esModule: true,
@@ -27,8 +29,6 @@ jest.mock("~/helpers/fb", () => ({
   },
 }))
 
-import { fb } from "~/helpers/fb"
-
 const factory = () =>
   shallowMount(feeds, {
     mocks: {
@@ -53,7 +53,9 @@ describe("feeds", () => {
   test("renders all the current feeds", () => {
     const wrapper = factory()
 
-    expect(wrapper.findAll("div[data-test='list-item']").wrappers).toHaveLength(4)
+    expect(wrapper.findAll("div[data-test='list-item']").wrappers).toHaveLength(
+      4
+    )
   })
 
   test("feeds with no label displays the 'no_label' message", () => {
@@ -63,7 +65,7 @@ describe("feeds", () => {
       wrapper
         .findAll("label[data-test='list-label']")
         .wrappers.map((e) => e.text())
-        .filter((text) => text == "no_label")
+        .filter((text) => text === "no_label")
     ).toHaveLength(2)
   })
 
@@ -74,30 +76,28 @@ describe("feeds", () => {
       wrapper
         .findAll("li[data-test='list-message']")
         .wrappers.map((e) => e.text())
-        .filter((text) => text == "empty")
+        .filter((text) => text === "empty")
     ).toHaveLength(2)
   })
 
   test("labels in the list are proper", () => {
     const wrapper = factory()
 
-    expect(wrapper.findAll("label[data-test='list-label']").wrappers.map((e) => e.text())).toEqual([
+    expect(
-      "First",
+      wrapper
-      "Second",
+        .findAll("label[data-test='list-label']")
-      "no_label",
+        .wrappers.map((e) => e.text())
-      "no_label",
+    ).toEqual(["First", "Second", "no_label", "no_label"])
-    ])
   })
 
   test("messages in the list are proper", () => {
     const wrapper = factory()
 
-    expect(wrapper.findAll("li[data-test='list-message']").wrappers.map((e) => e.text())).toEqual([
+    expect(
-      "First Message",
+      wrapper
-      "empty",
+        .findAll("li[data-test='list-message']")
-      "Third Message",
+        .wrappers.map((e) => e.text())
-      "empty",
+    ).toEqual(["First Message", "empty", "Third Message", "empty"])
-    ])
   })
 
   test("clicking on the delete button deletes the feed", async () => {

components/firebase/__tests__/Inputform.spec.js

@@ -1,5 +1,7 @@
-import inputform from "../Inputform"
 import { shallowMount } from "@vue/test-utils"
+import inputform from "../Inputform"
+
+import { fb } from "~/helpers/fb"
 
 jest.mock("~/helpers/fb", () => ({
   __esModule: true,
@@ -9,8 +11,6 @@ jest.mock("~/helpers/fb", () => ({
   },
 }))
 
-import { fb } from "~/helpers/fb"
-
 const factory = () =>
   shallowMount(inputform, {
     mocks: {

components/firebase/__tests__/Logout.spec.js

@@ -1,5 +1,7 @@
-import logout from "../Logout"
 import { shallowMount, createLocalVue } from "@vue/test-utils"
+import logout from "../Logout"
+
+import { fb } from "~/helpers/fb"
 
 jest.mock("~/helpers/fb", () => ({
   __esModule: true,
@@ -9,8 +11,6 @@ jest.mock("~/helpers/fb", () => ({
   },
 }))
 
-import { fb } from "~/helpers/fb"
-
 const $toast = {
   info: jest.fn(),
   show: jest.fn(),
@@ -53,7 +53,9 @@ describe("logout", () => {
   })
 
   test("failed signout request fires a error toast", async () => {
-    fb.signOutUser.mockImplementationOnce(() => Promise.reject("test reject"))
+    fb.signOutUser.mockImplementationOnce(() =>
+      Promise.reject(new Error("test reject"))
+    )
 
     const wrapper = factory()
     const button = wrapper.find("button")

components/history/__tests__/GraphqlCard.spec.js

@@ -1,5 +1,5 @@
-import GraphqlCard from "../graphql/Card"
 import { mount } from "@vue/test-utils"
+import GraphqlCard from "../graphql/Card"
 
 const factory = (props) => {
   return mount(GraphqlCard, {
@@ -35,20 +35,20 @@ describe("GraphqlCard", () => {
     const wrapper = factory({
       entry: {
         type: "graphql",
-        url: url,
+        url,
-        query: query,
+        query,
         star: false,
       },
     })
     expect(wrapper).toBeTruthy()
   })
 
-  test("toggle-star emitted on clicking on star button", async () => {
+  test("toggle-star emitted on clicking on star button", () => {
     const wrapper = factory({
       entry: {
         type: "graphql",
-        url: url,
+        url,
-        query: query,
+        query,
         star: true,
       },
     })
@@ -61,8 +61,8 @@ describe("GraphqlCard", () => {
     const wrapper = factory({
       entry: {
         type: "graphql",
-        url: url,
+        url,
-        query: query,
+        query,
         star: true,
       },
     })
@@ -85,12 +85,14 @@ describe("GraphqlCard", () => {
     const wrapper = factory({
       entry: {
         type: "graphql",
-        url: url,
+        url,
-        query: query,
+        query,
         star: true,
       },
     })
-    await wrapper.find("button[data-testid='restore_history_entry']").trigger("click")
+    await wrapper
+      .find("button[data-testid='restore_history_entry']")
+      .trigger("click")
     expect(wrapper.emitted("use-entry")).toBeTruthy()
   })
 
@@ -98,12 +100,14 @@ describe("GraphqlCard", () => {
     const wrapper = factory({
       entry: {
         type: "graphql",
-        url: url,
+        url,
-        query: query,
+        query,
         star: true,
       },
     })
-    await wrapper.find("button[data-testid=delete_history_entry]").trigger("click")
+    await wrapper
+      .find("button[data-testid=delete_history_entry]")
+      .trigger("click")
     expect(wrapper.emitted("delete-entry")).toBeTruthy()
   })
 })

components/history/__tests__/History.spec.js

@@ -1,44 +1,44 @@
+import { shallowMount } from "@vue/test-utils"
 import History from "../"
 import { fb } from "~/helpers/fb"
-import { shallowMount } from "@vue/test-utils"
 
 const restHistory = [
   {
-    id: "0",
+    id: 0,
     type: "rest",
   },
   {
-    id: "1",
+    id: 1,
     type: "rest",
   },
   {
-    id: "2",
+    id: 2,
     type: "rest",
   },
 ]
 
 const graphqlHistory = [
   {
-    id: "0",
+    id: 0,
     type: "graphql",
   },
   {
-    id: "1",
+    id: 1,
     type: "graphql",
   },
   {
-    id: "2",
+    id: 2,
     type: "graphql",
   },
 ]
 
-var localStorageMock = (function () {
+const localStorageMock = (function () {
-  var store = {
+  const store = {
     history: JSON.stringify(restHistory),
     graphqlHistory: JSON.stringify(graphqlHistory),
   }
   return {
-    getItem: function (key) {
+    getItem(key) {
       return store[key]
     },
     setItem: jest.fn(),
@@ -105,13 +105,13 @@ beforeEach(() => {
 })
 
 describe("Mount History", () => {
-  test("Mounts rest history without login", async () => {
+  test("Mounts rest history without login", () => {
     const wrapper = factory({
       page: "rest",
     })
     expect(wrapper).toBeTruthy()
   })
-  test("Mounts rest history with login", async () => {
+  test("Mounts rest history with login", () => {
     fb.currentUser = "user"
     const wrapper = factory({
       page: "rest",
@@ -119,13 +119,13 @@ describe("Mount History", () => {
     expect(wrapper).toBeTruthy()
   })
 
-  test("Mounts graphql history without login", async () => {
+  test("Mounts graphql history without login", () => {
     const wrapper = factory({
       page: "rest",
     })
     expect(wrapper).toBeTruthy()
   })
-  test("Mounts graphql history with login", async () => {
+  test("Mounts graphql history with login", () => {
     fb.currentUser = "user"
     const wrapper = factory({
       page: "rest",
@@ -142,9 +142,14 @@ describe("Clear History", () => {
     })
     expect(wrapper.vm.filteredHistory).toStrictEqual(restHistory)
     await wrapper.find("button[data-testid='clear_history']").trigger("click")
-    await wrapper.find("button[data-testid='confirm_clear_history']").trigger("click")
+    await wrapper
+      .find("button[data-testid='confirm_clear_history']")
+      .trigger("click")
     expect(fb.clearHistory).not.toHaveBeenCalled()
-    expect(window.localStorage.setItem).toHaveBeenCalledWith("history", JSON.stringify([]))
+    expect(window.localStorage.setItem).toHaveBeenCalledWith(
+      "history",
+      JSON.stringify([])
+    )
   })
   test("Clear rest history with login", async () => {
     fb.currentUser = "user"
@@ -153,9 +158,14 @@ describe("Clear History", () => {
     })
     expect(wrapper.vm.filteredHistory).toStrictEqual(restHistory)
     await wrapper.find("button[data-testid='clear_history']").trigger("click")
-    await wrapper.find("button[data-testid='confirm_clear_history']").trigger("click")
+    await wrapper
+      .find("button[data-testid='confirm_clear_history']")
+      .trigger("click")
     expect(fb.clearHistory).toHaveBeenCalledTimes(1)
-    expect(window.localStorage.setItem).toHaveBeenCalledWith("history", JSON.stringify([]))
+    expect(window.localStorage.setItem).toHaveBeenCalledWith(
+      "history",
+      JSON.stringify([])
+    )
   })
   test("Dont confirm Clear rest history", async () => {
     fb.currentUser = "user"
@@ -164,9 +174,14 @@ describe("Clear History", () => {
     })
     expect(wrapper.vm.filteredHistory).toStrictEqual(restHistory)
     await wrapper.find("button[data-testid='clear_history']").trigger("click")
-    await wrapper.find("button[data-testid='reject_clear_history']").trigger("click")
+    await wrapper
+      .find("button[data-testid='reject_clear_history']")
+      .trigger("click")
     expect(fb.clearHistory).not.toHaveBeenCalled()
-    expect(window.localStorage.setItem).not.toHaveBeenCalledWith("history", JSON.stringify([]))
+    expect(window.localStorage.setItem).not.toHaveBeenCalledWith(
+      "history",
+      JSON.stringify([])
+    )
   })
 
   test("Clear graphql history without login", async () => {
@@ -176,9 +191,14 @@ describe("Clear History", () => {
     })
     expect(wrapper.vm.filteredHistory).toStrictEqual(graphqlHistory)
     await wrapper.find("button[data-testid='clear_history']").trigger("click")
-    await wrapper.find("button[data-testid='confirm_clear_history']").trigger("click")
+    await wrapper
+      .find("button[data-testid='confirm_clear_history']")
+      .trigger("click")
     expect(fb.clearGraphqlHistory).not.toHaveBeenCalled()
-    expect(window.localStorage.setItem).toHaveBeenCalledWith("graphqlHistory", JSON.stringify([]))
+    expect(window.localStorage.setItem).toHaveBeenCalledWith(
+      "graphqlHistory",
+      JSON.stringify([])
+    )
   })
   test("Clear graphql history with login", async () => {
     fb.currentUser = "user"
@@ -187,9 +207,14 @@ describe("Clear History", () => {
     })
     expect(wrapper.vm.filteredHistory).toStrictEqual(graphqlHistory)
     await wrapper.find("button[data-testid='clear_history']").trigger("click")
-    await wrapper.find("button[data-testid='confirm_clear_history']").trigger("click")
+    await wrapper
+      .find("button[data-testid='confirm_clear_history']")
+      .trigger("click")
     expect(fb.clearGraphqlHistory).toHaveBeenCalledTimes(1)
-    expect(window.localStorage.setItem).toHaveBeenCalledWith("graphqlHistory", JSON.stringify([]))
+    expect(window.localStorage.setItem).toHaveBeenCalledWith(
+      "graphqlHistory",
+      JSON.stringify([])
+    )
   })
   test("Dont confirm Clear graphql history", async () => {
     fb.currentUser = "user"
@@ -198,7 +223,9 @@ describe("Clear History", () => {
     })
     expect(wrapper.vm.filteredHistory).toStrictEqual(graphqlHistory)
     await wrapper.find("button[data-testid='clear_history']").trigger("click")
-    await wrapper.find("button[data-testid='reject_clear_history']").trigger("click")
+    await wrapper
+      .find("button[data-testid='reject_clear_history']")
+      .trigger("click")
     expect(window.localStorage.setItem).not.toHaveBeenCalledWith(
       "graphqlHistory",
       JSON.stringify([])
@@ -207,78 +234,39 @@ describe("Clear History", () => {
 })
 
 describe("Use History", () => {
-  test("use rest history", async () => {
+  test("use rest history", () => {
     fb.currentUser = "user"
     const wrapper = factory({
       page: "rest",
     })
-    expect(wrapper.findAll("div[data-testid='rest_card']").length).toEqual(restHistory.length)
+    expect(wrapper.findAll("div[data-testid='rest_card']").length).toEqual(
-    var index = restHistory.length - 1
+      restHistory.length
-    wrapper.findAll("div[data-testid='rest_card']").at(index).vm.$emit("use-entry")
+    )
+    const index = restHistory.length - 1
+    wrapper
+      .findAll("div[data-testid='rest_card']")
+      .at(index)
+      .vm.$emit("use-entry")
     expect(wrapper.emitted("useHistory")).toBeTruthy()
     expect(wrapper.emitted("useHistory")[0]).toStrictEqual([restHistory[index]])
   })
 
-  test("use graphql history", async () => {
+  test("use graphql history", () => {
     fb.currentUser = "user"
     const wrapper = factory({
       page: "graphql",
     })
-    expect(wrapper.findAll("div[data-testid='graphql_card']").length).toEqual(graphqlHistory.length)
+    expect(wrapper.findAll("div[data-testid='graphql_card']").length).toEqual(
-    var index = restHistory.length - 1
+      graphqlHistory.length
-    wrapper.findAll("div[data-testid='graphql_card']").at(index).vm.$emit("use-entry")
+    )
+    const index = restHistory.length - 1
+    wrapper
+      .findAll("div[data-testid='graphql_card']")
+      .at(index)
+      .vm.$emit("use-entry")
     expect(wrapper.emitted("useHistory")).toBeTruthy()
-    expect(wrapper.emitted("useHistory")[0]).toStrictEqual([graphqlHistory[index]])
+    expect(wrapper.emitted("useHistory")[0]).toStrictEqual([
-  })
+      graphqlHistory[index],
-})
+    ])
-
-describe("Delete History", () => {
-  test("delete rest history with login", async () => {
-    fb.currentUser = "user"
-    const wrapper = factory({
-      page: "rest",
-    })
-    expect(wrapper.findAll("div[data-testid='rest_card']").length).toEqual(restHistory.length)
-    var index = 1
-    wrapper.findAll("div[data-testid='rest_card']").at(index).vm.$emit("delete-entry")
-    expect(fb.deleteHistory).toBeCalledWith(restHistory[index])
-  })
-
-  test("delete rest history without login", async () => {
-    fb.currentUser = null
-    const wrapper = factory({
-      page: "rest",
-    })
-    expect(wrapper.findAll("div[data-testid='rest_card']").length).toEqual(restHistory.length)
-    var index = 1
-    wrapper.findAll("div[data-testid='rest_card']").at(index).vm.$emit("delete-entry")
-    expect(window.localStorage.setItem).toBeCalledWith(
-      "history",
-      JSON.stringify(restHistory.filter((entry) => entry.id != index))
-    )
-  })
-  test("delete graphql history with login", async () => {
-    fb.currentUser = "user"
-    const wrapper = factory({
-      page: "graphql",
-    })
-    expect(wrapper.findAll("div[data-testid='graphql_card']").length).toEqual(graphqlHistory.length)
-    var index = 1
-    wrapper.findAll("div[data-testid='graphql_card']").at(index).vm.$emit("delete-entry")
-    expect(fb.deleteGraphqlHistory).toBeCalledWith(graphqlHistory[index])
-  })
-
-  test("delete graphql history without login", async () => {
-    fb.currentUser = null
-    const wrapper = factory({
-      page: "graphql",
-    })
-    expect(wrapper.findAll("div[data-testid='graphql_card']").length).toEqual(graphqlHistory.length)
-    var index = 1
-    wrapper.findAll("div[data-testid='graphql_card']").at(index).vm.$emit("delete-entry")
-    expect(window.localStorage.setItem).toBeCalledWith(
-      "graphqlHistory",
-      JSON.stringify(graphqlHistory.filter((entry) => entry.id != index))
-    )
   })
 })

components/history/__tests__/RestCard.spec.js

@@ -1,5 +1,5 @@
-import RestCard from "../rest/Card"
 import { mount } from "@vue/test-utils"
+import RestCard from "../rest/Card"
 
 const factory = (props) => {
   return mount(RestCard, {
@@ -26,7 +26,7 @@ const factory = (props) => {
 const url = "https://dummydata.com/get"
 const entry = {
   type: "rest",
-  url: url,
+  url,
   method: "GET",
   status: 200,
   star: false,
@@ -37,7 +37,7 @@ describe("RestCard", () => {
     expect(wrapper).toBeTruthy()
   })
 
-  test("toggle-star emitted on clicking on star button", async () => {
+  test("toggle-star emitted on clicking on star button", () => {
     const wrapper = factory({ entry })
 
     wrapper.find("button[data-testid='star_button']").trigger("click")
@@ -46,13 +46,17 @@ describe("RestCard", () => {
 
   test("use-entry emit on clicking the restore button", async () => {
     const wrapper = factory({ entry })
-    await wrapper.find("button[data-testid='restore_history_entry']").trigger("click")
+    await wrapper
+      .find("button[data-testid='restore_history_entry']")
+      .trigger("click")
     expect(wrapper.emitted("use-entry")).toBeTruthy()
   })
 
   test("delete-entry emit on clicking the delete button", async () => {
     const wrapper = factory({ entry })
-    await wrapper.find("button[data-testid=delete_history_entry]").trigger("click")
+    await wrapper
+      .find("button[data-testid=delete_history_entry]")
+      .trigger("click")
     expect(wrapper.emitted("delete-entry")).toBeTruthy()
   })
 })

components/history/graphql/Card.vue

@@ -13,42 +13,46 @@
         />
       </li>
       <button
+        v-tooltip="{
+          content: !entry.star ? $t('add_star') : $t('remove_star'),
+        }"
         data-testid="star_button"
         class="icon"
         :class="{ stared: entry.star }"
         @click="$emit('toggle-star')"
-        v-tooltip="{
-          content: !entry.star ? $t('add_star') : $t('remove_star'),
-        }"
       >
         <i class="material-icons">
           {{ entry.star ? "star" : "star_border" }}
         </i>
       </button>
       <button
-        data-testid="query_expand"
-        class="icon"
-        @click="expand = !expand"
         v-tooltip="{
           content: expand ? $t('hide_more') : $t('show_more'),
         }"
+        data-testid="query_expand"
+        class="icon"
+        @click="expand = !expand"
       >
         <i class="material-icons">
           {{ expand ? "unfold_less" : "unfold_more" }}
         </i>
       </button>
       <v-popover>
-        <button data-testid="options" class="tooltip-target icon" v-tooltip="$t('options')">
+        <button
+          v-tooltip="$t('options')"
+          data-testid="options"
+          class="tooltip-target icon"
+        >
           <i class="material-icons">more_vert</i>
         </button>
         <template slot="popover">
           <div>
             <button
+              v-close-popover
               data-testid="restore_history_entry"
               class="icon"
-              @click="$emit('use-entry')"
               :aria-label="$t('restore')"
-              v-close-popover
+              @click="$emit('use-entry')"
             >
               <i class="material-icons">restore</i>
               <span>{{ $t("restore") }}</span>
@@ -56,11 +60,11 @@
           </div>
           <div>
             <button
+              v-close-popover
               data-testid="delete_history_entry"
               class="icon"
-              @click="$emit('delete-entry')"
               :aria-label="$t('delete')"
-              v-close-popover
+              @click="$emit('delete-entry')"
             >
               <i class="material-icons">delete</i>
               <span>{{ $t("delete") }}</span>
@@ -86,11 +90,11 @@
       <div v-if="showMore" class="show-on-large-screen">
         <li>
           <input
+            v-tooltip="entry.date"
             :aria-label="$t('time')"
             type="text"
             readonly
             :value="entry.time"
-            v-tooltip="entry.date"
             class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
           />
         </li>
@@ -119,24 +123,10 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-.stared {
-  color: #f8e81c !important;
-}
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.2s;
-}
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>
-
 <script>
 export default {
   props: {
-    entry: Object,
+    entry: { type: Object, default: () => {} },
     showMore: Boolean,
   },
   data() {
@@ -153,3 +143,17 @@ export default {
   },
 }
 </script>
+
+<style scoped lang="scss">
+.stared {
+  color: #f8e81c !important;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

components/history/rest/Card.vue

@@ -20,13 +20,13 @@
       </li>
       <span>
         <button
+          v-tooltip="{
+            content: !entry.star ? $t('add_star') : $t('remove_star'),
+          }"
           data-testid="star_button"
           class="icon"
           :class="{ stared: entry.star }"
           @click="$emit('toggle-star')"
-          v-tooltip="{
-            content: !entry.star ? $t('add_star') : $t('remove_star'),
-          }"
         >
           <i class="material-icons">
             {{ entry.star ? "star" : "star_border" }}
@@ -48,17 +48,17 @@
             </button>
           </li> -->
       <v-popover>
-        <button class="tooltip-target icon" v-tooltip="$t('options')">
+        <button v-tooltip="$t('options')" class="tooltip-target icon">
           <i class="material-icons">more_vert</i>
         </button>
         <template slot="popover">
           <div>
             <button
+              v-close-popover
               data-testid="restore_history_entry"
               class="icon"
-              @click="$emit('use-entry')"
               :aria-label="$t('edit')"
-              v-close-popover
+              @click="$emit('use-entry')"
             >
               <i class="material-icons">restore</i>
               <span>{{ $t("restore") }}</span>
@@ -66,11 +66,11 @@
           </div>
           <div>
             <button
+              v-close-popover
               data-testid="delete_history_entry"
               class="icon"
-              @click="$emit('delete-entry')"
               :aria-label="$t('delete')"
-              v-close-popover
+              @click="$emit('delete-entry')"
             >
               <i class="material-icons">delete</i>
               <span>{{ $t("delete") }}</span>
@@ -95,11 +95,11 @@
       <div v-if="showMore" class="show-on-large-screen">
         <li>
           <input
+            v-tooltip="entry.date"
             :aria-label="$t('time')"
             type="text"
             readonly
             :value="entry.time"
-            v-tooltip="entry.date"
             class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
           />
         </li>
@@ -128,26 +128,12 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-.stared {
-  color: #f8e81c !important;
-}
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.2s;
-}
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>
-
 <script>
 import findStatusGroup from "~/helpers/findStatusGroup"
 
 export default {
   props: {
-    entry: Object,
+    entry: { type: Object, default: () => {} },
     showMore: Boolean,
   },
   data() {
@@ -167,3 +153,17 @@ export default {
   },
 }
 </script>
+
+<style scoped lang="scss">
+.stared {
+  color: #f8e81c !important;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

components/lenses/HeadersRenderer.vue

@@ -1,7 +1,12 @@
 <template>
   <div>
     <p v-for="(value, key) in headers" :key="key">
-      <input :value="`${key} → ${value}`" :name="key" class="bg-transparent" readonly />
+      <input
+        :value="`${key} → ${value}`"
+        :name="key"
+        class="bg-transparent"
+        readonly
+      />
     </p>
   </div>
 </template>
@@ -9,7 +14,7 @@
 <script>
 export default {
   props: {
-    headers: {},
+    headers: { type: Object, default: () => {} },
   },
 }
 </script>

components/lenses/ResponseBodyRenderer.vue

@@ -2,8 +2,8 @@
   <SmartTabs styles="m-4">
     <SmartTab
       v-for="(lens, index) in validLenses"
-      :key="lens.lensName"
       :id="lens.lensName"
+      :key="lens.lensName"
       :label="lens.lensName"
       :selected="index === 0"
     >
@@ -28,7 +28,7 @@ export default {
     ...getLensRenderers(),
   },
   props: {
-    response: {},
+    response: { type: Object, default: () => {} },
   },
   computed: {
     validLenses() {

components/lenses/renderers/HTMLLensRenderer.vue

@@ -4,13 +4,15 @@
       <label for="body">{{ $t("response_body") }}</label>
       <div>
         <button
+          v-if="response.body"
+          ref="ToggleExpandResponse"
+          v-tooltip="{
+            content: !expandResponse
+              ? $t('expand_response')
+              : $t('collapse_response'),
+          }"
           class="icon"
           @click="ToggleExpandResponse"
-          ref="ToggleExpandResponse"
-          v-if="response.body"
-          v-tooltip="{
-            content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
-          }"
         >
           <i class="material-icons">
             {{ !expandResponse ? "unfold_more" : "unfold_less" }}
@@ -18,31 +20,31 @@
         </button>
         <button
           v-if="response.body"
-          class="icon"
-          @click.prevent="togglePreview"
           v-tooltip="{
             content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
           }"
+          class="icon"
+          @click.prevent="togglePreview"
         >
           <i class="material-icons">
             {{ !previewEnabled ? "visibility" : "visibility_off" }}
           </i>
         </button>
         <button
+          v-if="response.body"
+          ref="downloadResponse"
+          v-tooltip="$t('download_file')"
           class="icon"
           @click="downloadResponse"
-          ref="downloadResponse"
-          v-if="response.body"
-          v-tooltip="$t('download_file')"
         >
           <i class="material-icons">save_alt</i>
         </button>
         <button
+          v-if="response.body"
+          ref="copyResponse"
+          v-tooltip="$t('copy_response')"
           class="icon"
           @click="copyResponse"
-          ref="copyResponse"
-          v-if="response.body"
-          v-tooltip="$t('copy_response')"
         >
           <i class="material-icons">content_copy</i>
         </button>
@@ -64,9 +66,9 @@
         styles="rounded-b-lg"
       />
       <iframe
+        ref="previewFrame"
         :class="{ hidden: !previewEnabled }"
         class="covers-response"
-        ref="previewFrame"
         src="about:blank"
       ></iframe>
     </div>
@@ -79,7 +81,7 @@ import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 export default {
   mixins: [TextContentRendererMixin],
   props: {
-    response: {},
+    response: { type: Object, default: () => {} },
   },
   data() {
     return {
@@ -94,7 +96,8 @@ export default {
   methods: {
     ToggleExpandResponse() {
       this.expandResponse = !this.expandResponse
-      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
+      this.responseBodyMaxLines =
+        this.responseBodyMaxLines === Infinity ? 16 : Infinity
     },
     downloadResponse() {
       const dataToWrite = this.responseBodyText
@@ -128,19 +131,30 @@ export default {
       aux.select()
       document.execCommand("copy")
       document.body.removeChild(aux)
-      setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
+      setTimeout(
+        () => (this.$refs.copyResponse.innerHTML = this.copyButton),
+        1000
+      )
     },
     togglePreview() {
       this.previewEnabled = !this.previewEnabled
       if (this.previewEnabled) {
-        if (this.$refs.previewFrame.getAttribute("data-previewing-url") === this.url) return
+        if (
+          this.$refs.previewFrame.getAttribute("data-previewing-url") ===
+          this.url
+        )
+          return
         // Use DOMParser to parse document HTML.
-        const previewDocument = new DOMParser().parseFromString(this.responseBodyText, "text/html")
+        const previewDocument = new DOMParser().parseFromString(
+          this.responseBodyText,
+          "text/html"
+        )
         // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
         previewDocument.head.innerHTML =
           `<base href="${this.url}">` + previewDocument.head.innerHTML
         // Finally, set the iframe source to the resulting HTML.
-        this.$refs.previewFrame.srcdoc = previewDocument.documentElement.outerHTML
+        this.$refs.previewFrame.srcdoc =
+          previewDocument.documentElement.outerHTML
         this.$refs.previewFrame.setAttribute("data-previewing-url", this.url)
       }
     },

components/lenses/renderers/ImageLensRenderer.vue

@@ -4,11 +4,11 @@
       <label for="body">{{ $t("response_body") }}</label>
       <div>
         <button
+          v-if="response.body"
+          ref="downloadResponse"
+          v-tooltip="$t('download_file')"
           class="icon"
           @click="downloadResponse"
-          ref="downloadResponse"
-          v-if="response.body"
-          v-tooltip="$t('download_file')"
         >
           <i class="material-icons">save_alt</i>
         </button>
@@ -23,7 +23,7 @@
 <script>
 export default {
   props: {
-    response: {},
+    response: { type: Object, default: () => {} },
   },
   data() {
     return {
@@ -34,13 +34,15 @@ export default {
   },
   computed: {
     responseType() {
-      return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
+      return (this.response.headers["content-type"] || "")
+        .split(";")[0]
+        .toLowerCase()
     },
   },
   watch: {
     response: {
       immediate: true,
-      handler(newValue) {
+      handler() {
         this.imageSource = ""
 
         const buf = this.response.body

components/lenses/renderers/JSONLensRenderer.vue

@@ -4,46 +4,45 @@
       <label for="body">{{ $t("response_body") }}</label>
       <div>
         <button
+          v-if="response.body"
+          ref="ToggleExpandResponse"
+          v-tooltip="{
+            content: !expandResponse
+              ? $t('expand_response')
+              : $t('collapse_response'),
+          }"
           class="icon"
           @click="ToggleExpandResponse"
-          ref="ToggleExpandResponse"
-          v-if="response.body"
-          v-tooltip="{
-            content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
-          }"
         >
           <i class="material-icons">
             {{ !expandResponse ? "unfold_more" : "unfold_less" }}
           </i>
         </button>
         <button
+          v-if="response.body && canDownloadResponse"
+          ref="downloadResponse"
+          v-tooltip="$t('download_file')"
           class="icon"
           @click="downloadResponse"
-          ref="downloadResponse"
-          v-if="response.body && canDownloadResponse"
-          v-tooltip="$t('download_file')"
         >
           <i class="material-icons">save_alt</i>
         </button>
         <button
+          v-if="response.body"
+          ref="copyResponse"
+          v-tooltip="$t('copy_response')"
           class="icon"
           @click="copyResponse"
-          ref="copyResponse"
-          v-if="response.body"
-          v-tooltip="$t('copy_response')"
         >
           <i class="material-icons">content_copy</i>
         </button>
       </div>
     </div>
-    <div class="valid-warning" v-if="jsonInvalid">
-      <p class="info"><i class="material-icons">error_outline</i> Invalid JSON</p>
-    </div>
     <div id="response-details-wrapper">
       <SmartAceEditor
         :value="jsonBodyText"
         :lang="'json'"
-        :provideJSONOutline="true"
+        :provide-j-s-o-n-outline="true"
         :options="{
           maxLines: responseBodyMaxLines,
           minLines: '16',
@@ -60,18 +59,17 @@
 </template>
 
 <script>
-import { isJSONContentType } from "~/helpers/utils/contenttypes"
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
+import { isJSONContentType } from "~/helpers/utils/contenttypes"
 
 export default {
   mixins: [TextContentRendererMixin],
   props: {
-    response: {},
+    response: { type: Object, default: () => {} },
   },
   data() {
     return {
       expandResponse: false,
-      jsonInvalid: false,
       responseBodyMaxLines: 16,
       doneButton: '<i class="material-icons">done</i>',
       downloadButton: '<i class="material-icons">save_alt</i>',
@@ -81,16 +79,16 @@ export default {
   computed: {
     jsonBodyText() {
       try {
-        this.jsonInvalid = false
         return JSON.stringify(JSON.parse(this.responseBodyText), null, 2)
       } catch (e) {
         // Most probs invalid JSON was returned, so drop prettification (should we warn ?)
-        this.jsonInvalid = true
         return this.responseBodyText
       }
     },
     responseType() {
-      return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
+      return (this.response.headers["content-type"] || "")
+        .split(";")[0]
+        .toLowerCase()
     },
     canDownloadResponse() {
       return (
@@ -104,7 +102,8 @@ export default {
   methods: {
     ToggleExpandResponse() {
       this.expandResponse = !this.expandResponse
-      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
+      this.responseBodyMaxLines =
+        this.responseBodyMaxLines === Infinity ? 16 : Infinity
     },
     downloadResponse() {
       const dataToWrite = this.responseBodyText
@@ -138,7 +137,10 @@ export default {
       aux.select()
       document.execCommand("copy")
       document.body.removeChild(aux)
-      setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
+      setTimeout(
+        () => (this.$refs.copyResponse.innerHTML = this.copyButton),
+        1000
+      )
     },
   },
 }

components/lenses/renderers/RawLensRenderer.vue

@@ -4,33 +4,35 @@
       <label for="body">{{ $t("response_body") }}</label>
       <div>
         <button
+          v-if="response.body"
+          ref="ToggleExpandResponse"
+          v-tooltip="{
+            content: !expandResponse
+              ? $t('expand_response')
+              : $t('collapse_response'),
+          }"
           class="icon"
           @click="ToggleExpandResponse"
-          ref="ToggleExpandResponse"
-          v-if="response.body"
-          v-tooltip="{
-            content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
-          }"
         >
           <i class="material-icons">
             {{ !expandResponse ? "unfold_more" : "unfold_less" }}
           </i>
         </button>
         <button
+          v-if="response.body && canDownloadResponse"
+          ref="downloadResponse"
+          v-tooltip="$t('download_file')"
           class="icon"
           @click="downloadResponse"
-          ref="downloadResponse"
-          v-if="response.body && canDownloadResponse"
-          v-tooltip="$t('download_file')"
         >
           <i class="material-icons">save_alt</i>
         </button>
         <button
+          v-if="response.body"
+          ref="copyResponse"
+          v-tooltip="$t('copy_response')"
           class="icon"
           @click="copyResponse"
-          ref="copyResponse"
-          v-if="response.body"
-          v-tooltip="$t('copy_response')"
         >
           <i class="material-icons">content_copy</i>
         </button>
@@ -56,13 +58,13 @@
 </template>
 
 <script>
-import { isJSONContentType } from "~/helpers/utils/contenttypes"
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
+import { isJSONContentType } from "~/helpers/utils/contenttypes"
 
 export default {
   mixins: [TextContentRendererMixin],
   props: {
-    response: {},
+    response: { type: Object, default: () => {} },
   },
   data() {
     return {
@@ -75,7 +77,9 @@ export default {
   },
   computed: {
     responseType() {
-      return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
+      return (this.response.headers["content-type"] || "")
+        .split(";")[0]
+        .toLowerCase()
     },
     canDownloadResponse() {
       return (
@@ -89,7 +93,8 @@ export default {
   methods: {
     ToggleExpandResponse() {
       this.expandResponse = !this.expandResponse
-      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
+      this.responseBodyMaxLines =
+        this.responseBodyMaxLines === Infinity ? 16 : Infinity
     },
     downloadResponse() {
       const dataToWrite = this.responseBodyText
@@ -123,7 +128,10 @@ export default {
       aux.select()
       document.execCommand("copy")
       document.body.removeChild(aux)
-      setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
+      setTimeout(
+        () => (this.$refs.copyResponse.innerHTML = this.copyButton),
+        1000
+      )
     },
   },
 }

components/lenses/renderers/XMLLensRenderer.vue

@@ -4,33 +4,35 @@
       <label for="body">{{ $t("response_body") }}</label>
       <div>
         <button
+          v-if="response.body"
+          ref="ToggleExpandResponse"
+          v-tooltip="{
+            content: !expandResponse
+              ? $t('expand_response')
+              : $t('collapse_response'),
+          }"
           class="icon"
           @click="ToggleExpandResponse"
-          ref="ToggleExpandResponse"
-          v-if="response.body"
-          v-tooltip="{
-            content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
-          }"
         >
           <i class="material-icons">
             {{ !expandResponse ? "unfold_more" : "unfold_less" }}
           </i>
         </button>
         <button
+          v-if="response.body"
+          ref="downloadResponse"
+          v-tooltip="$t('download_file')"
           class="icon"
           @click="downloadResponse"
-          ref="downloadResponse"
-          v-if="response.body"
-          v-tooltip="$t('download_file')"
         >
           <i class="material-icons">save_alt</i>
         </button>
         <button
+          v-if="response.body"
+          ref="copyResponse"
+          v-tooltip="$t('copy_response')"
           class="icon"
           @click="copyResponse"
-          ref="copyResponse"
-          v-if="response.body"
-          v-tooltip="$t('copy_response')"
         >
           <i class="material-icons">content_copy</i>
         </button>
@@ -61,7 +63,7 @@ import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 export default {
   mixins: [TextContentRendererMixin],
   props: {
-    response: {},
+    response: { type: Object, default: () => {} },
   },
   data() {
     return {
@@ -74,13 +76,16 @@ export default {
   },
   computed: {
     responseType() {
-      return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
+      return (this.response.headers["content-type"] || "")
+        .split(";")[0]
+        .toLowerCase()
     },
   },
   methods: {
     ToggleExpandResponse() {
       this.expandResponse = !this.expandResponse
-      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
+      this.responseBodyMaxLines =
+        this.responseBodyMaxLines === Infinity ? 16 : Infinity
     },
     downloadResponse() {
       const dataToWrite = this.responseBodyText
@@ -114,7 +119,10 @@ export default {
       aux.select()
       document.execCommand("copy")
       document.body.removeChild(aux)
-      setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
+      setTimeout(
+        () => (this.$refs.copyResponse.innerHTML = this.copyButton),
+        1000
+      )
     },
   },
 }

components/realtime/Log.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="flex flex-col">
     <label for="log">{{ title }}</label>
-    <div name="log" class="realtime-log" ref="log">
+    <div ref="log" name="log" class="realtime-log">
       <span v-if="log">
-        <span v-for="(logEntry, index) in log" :style="{ color: logEntry.color }" :key="index"
+        <span
-          >@ {{ logEntry.ts }}{{ getSourcePrefix(logEntry.source) }}{{ logEntry.payload }}</span
+          v-for="(logEntry, index) in log"
+          :key="index"
+          :style="{ color: logEntry.color }"
+          >@ {{ logEntry.ts }}{{ getSourcePrefix(logEntry.source)
+          }}{{ logEntry.payload }}</span
         >
       </span>
       <span v-else>{{ $t("waiting_for_connection") }}</span>
@@ -12,6 +16,30 @@
   </div>
 </template>
 
+<script>
+import { getSourcePrefix } from "~/helpers/utils/string"
+
+export default {
+  props: {
+    log: { type: Array, default: () => [] },
+    title: {
+      type: String,
+      default: "",
+    },
+  },
+  updated() {
+    this.$nextTick(function () {
+      if (this.$refs.log) {
+        this.$refs.log.scrollBy(0, this.$refs.log.scrollHeight + 100)
+      }
+    })
+  },
+  methods: {
+    getSourcePrefix,
+  },
+}
+</script>
+
 <style scoped lang="scss">
 .realtime-log {
   @apply p-4;
@@ -35,21 +63,3 @@
   }
 }
 </style>
-
-<script>
-import { getSourcePrefix } from "~/helpers/utils/string"
-
-export default {
-  props: ["log", "title"],
-  methods: {
-    getSourcePrefix,
-  },
-  updated() {
-    this.$nextTick(function () {
-      if (this.$refs.log) {
-        this.$refs.log.scrollBy(0, this.$refs.log.scrollHeight + 100)
-      }
-    })
-  },
-}
-</script>

components/realtime/Mqtt.vue

@@ -6,8 +6,8 @@
           <label for="mqtt-url">{{ $t("url") }}</label>
           <input
             id="mqtt-url"
-            type="url"
             v-model="url"
+            type="url"
             spellcheck="false"
             class="md:rounded-bl-lg"
             :placeholder="$t('url')"
@@ -19,12 +19,14 @@
             <button
               id="connect"
               :disabled="!validUrl"
-              @click="toggleConnection"
               class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              @click="toggleConnection"
             >
-              {{ this.connectionState ? $t("disconnect") : $t("connect") }}
+              {{ connectionState ? $t("disconnect") : $t("connect") }}
               <span>
-                <i class="material-icons">{{ !connectionState ? "sync" : "sync_disabled" }}</i>
+                <i class="material-icons">{{
+                  !connectionState ? "sync" : "sync_disabled"
+                }}</i>
               </span>
             </button>
           </li>
@@ -35,20 +37,25 @@
     <AppSection :label="$t('communication')" no-legend>
       <ul>
         <li>
-          <RealtimeLog :title="$t('log')" :log="this.log" />
+          <RealtimeLog :title="$t('log')" :log="log" />
         </li>
       </ul>
       <ul>
         <li>
           <label for="pub_topic">{{ $t("mqtt_topic") }}</label>
-          <input id="pub_topic" type="text" v-model="pub_topic" spellcheck="false" />
+          <input
+            id="pub_topic"
+            v-model="pub_topic"
+            type="text"
+            spellcheck="false"
+          />
         </li>
         <li>
           <label for="mqtt-message">{{ $t("message") }}</label>
           <input
             id="mqtt-message"
-            type="text"
             v-model="msg"
+            type="text"
             spellcheck="false"
             class="border-dashed md:border-l border-brdColor"
           />
@@ -56,7 +63,12 @@
         <div>
           <li>
             <label for="publish" class="hide-on-small-screen">&nbsp;</label>
-            <button id="publish" name="get" :disabled="!canpublish" @click="publish">
+            <button
+              id="publish"
+              name="get"
+              :disabled="!canpublish"
+              @click="publish"
+            >
               {{ $t("mqtt_publish") }}
               <span>
                 <i class="material-icons">send</i>
@@ -70,8 +82,8 @@
           <label for="sub_topic">{{ $t("mqtt_topic") }}</label>
           <input
             id="sub_topic"
-            type="text"
             v-model="sub_topic"
+            type="text"
             spellcheck="false"
             class="md:rounded-bl-lg"
           />
@@ -83,12 +95,18 @@
               id="subscribe"
               name="get"
               :disabled="!cansubscribe"
-              @click="toggleSubscription"
               class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              @click="toggleSubscription"
             >
-              {{ subscriptionState ? $t("mqtt_unsubscribe") : $t("mqtt_subscribe") }}
+              {{
+                subscriptionState
+                  ? $t("mqtt_unsubscribe")
+                  : $t("mqtt_subscribe")
+              }}
               <span>
-                <i class="material-icons">{{ subscriptionState ? "sync_disabled" : "sync" }}</i>
+                <i class="material-icons">{{
+                  subscriptionState ? "sync_disabled" : "sync"
+                }}</i>
               </span>
             </button>
           </li>
@@ -117,6 +135,22 @@ export default {
       subscriptionState: false,
     }
   },
+  computed: {
+    validUrl() {
+      return this.isUrlValid
+    },
+    canpublish() {
+      return this.pub_topic !== "" && this.msg !== "" && this.connectionState
+    },
+    cansubscribe() {
+      return this.sub_topic !== "" && this.connectionState
+    },
+  },
+  watch: {
+    url() {
+      this.debouncer()
+    },
+  },
   mounted() {
     if (process.browser) {
       this.worker = this.$worker.createRejexWorker()
@@ -126,22 +160,6 @@ export default {
   destroyed() {
     this.worker.terminate()
   },
-  watch: {
-    url(val) {
-      this.debouncer()
-    },
-  },
-  computed: {
-    validUrl() {
-      return this.isUrlValid
-    },
-    canpublish() {
-      return this.pub_topic != "" && this.msg != "" && this.connectionState
-    },
-    cansubscribe() {
-      return this.sub_topic != "" && this.connectionState
-    },
-  },
   methods: {
     debouncer: debounce(function () {
       this.worker.postMessage({ type: "ws", url: this.url })
@@ -158,10 +176,10 @@ export default {
           ts: new Date().toLocaleTimeString(),
         },
       ]
-      let parseUrl = new URL(this.url)
+      const parseUrl = new URL(this.url)
       this.client = new Paho.Client(
         parseUrl.hostname,
-        parseUrl.port != "" ? Number(parseUrl.port) : 8081,
+        parseUrl.port !== "" ? Number(parseUrl.port) : 8081,
         "postwoman"
       )
       this.client.connect({
@@ -267,7 +285,9 @@ export default {
         })
       } catch (e) {
         this.log.push({
-          payload: this.$t("error_occurred") + `while subscribing to topic:  ${this.sub_topic}`,
+          payload:
+            this.$t("error_occurred") +
+            `while subscribing to topic:  ${this.sub_topic}`,
           source: "info",
           color: "#ff5555",
           ts: new Date().toLocaleTimeString(),

components/realtime/Sse.vue

@@ -1,28 +1,28 @@
 <template>
   <div class="page">
-    <AppSection :label="$t('request')" ref="request" no-legend>
+    <AppSection ref="request" :label="$t('request')" no-legend>
       <ul>
         <li>
           <label for="server">{{ $t("server") }}</label>
           <input
             id="server"
+            v-model="server"
             type="url"
             :class="{ error: !serverValid }"
-            v-model="server"
-            @keyup.enter="serverValid ? toggleSSEConnection() : null"
             class="md:rounded-bl-lg"
             :placeholder="$t('url')"
+            @keyup.enter="serverValid ? toggleSSEConnection() : null"
           />
         </li>
         <div>
           <li>
             <label for="start" class="hide-on-small-screen">&nbsp;</label>
             <button
-              :disabled="!serverValid"
               id="start"
+              :disabled="!serverValid"
               name="start"
-              @click="toggleSSEConnection"
               class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              @click="toggleSSEConnection"
             >
               {{ !connectionSSEState ? $t("start") : $t("stop") }}
               <span>
@@ -36,7 +36,12 @@
       </ul>
     </AppSection>
 
-    <AppSection :label="$t('communication')" id="response" ref="response" no-legend>
+    <AppSection
+      id="response"
+      ref="response"
+      :label="$t('communication')"
+      no-legend
+    >
       <ul>
         <li>
           <RealtimeLog :title="$t('events')" :log="events.log" />
@@ -63,8 +68,13 @@ export default {
       },
     }
   },
+  computed: {
+    serverValid() {
+      return this.isUrlValid
+    },
+  },
   watch: {
-    server(val) {
+    server() {
       this.debouncer()
     },
   },
@@ -77,11 +87,6 @@ export default {
   destroyed() {
     this.worker.terminate()
   },
-  computed: {
-    serverValid() {
-      return this.isUrlValid
-    },
-  },
   methods: {
     debouncer: debounce(function () {
       this.worker.postMessage({ type: "sse", url: this.server })
@@ -106,7 +111,7 @@ export default {
       if (typeof EventSource !== "undefined") {
         try {
           this.sse = new EventSource(this.server)
-          this.sse.onopen = (event) => {
+          this.sse.onopen = () => {
             this.connectionSSEState = true
             this.events.log = [
               {
@@ -120,10 +125,10 @@ export default {
               icon: "sync",
             })
           }
-          this.sse.onerror = (event) => {
+          this.sse.onerror = () => {
             this.handleSSEError()
           }
-          this.sse.onclose = (event) => {
+          this.sse.onclose = () => {
             this.connectionSSEState = false
             this.events.log.push({
               payload: this.$t("disconnected_from", { name: this.server }),

components/realtime/Websocket.vue

@@ -1,29 +1,29 @@
 <template>
   <div class="page">
-    <AppSection :label="$t('request')" ref="request" no-legend>
+    <AppSection ref="request" :label="$t('request')" no-legend>
       <ul>
         <li>
           <label for="websocket-url">{{ $t("url") }}</label>
           <input
             id="websocket-url"
+            v-model="url"
             type="url"
             spellcheck="false"
             :class="{ error: !urlValid }"
-            v-model="url"
-            @keyup.enter="urlValid ? toggleConnection() : null"
             class="md:rounded-bl-lg"
             :placeholder="$t('url')"
+            @keyup.enter="urlValid ? toggleConnection() : null"
           />
         </li>
         <div>
           <li>
             <label for="connect" class="hide-on-small-screen">&nbsp;</label>
             <button
-              :disabled="!urlValid"
               id="connect"
+              :disabled="!urlValid"
               name="connect"
-              @click="toggleConnection"
               class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              @click="toggleConnection"
             >
               {{ !connectionState ? $t("connect") : $t("disconnect") }}
               <span>
@@ -37,7 +37,12 @@
       </ul>
     </AppSection>
 
-    <AppSection :label="$t('communication')" id="response" ref="response" no-legend>
+    <AppSection
+      id="response"
+      ref="response"
+      :label="$t('communication')"
+      no-legend
+    >
       <ul>
         <li>
           <RealtimeLog :title="$t('log')" :log="communication.log" />
@@ -48,14 +53,14 @@
           <label for="websocket-message">{{ $t("message") }}</label>
           <input
             id="websocket-message"
+            v-model="communication.input"
             name="message"
             type="text"
-            v-model="communication.input"
             :readonly="!connectionState"
+            class="md:rounded-bl-lg"
             @keyup.enter="connectionState ? sendMessage() : null"
             @keyup.up="connectionState ? walkHistory('up') : null"
             @keyup.down="connectionState ? walkHistory('down') : null"
-            class="md:rounded-bl-lg"
           />
         </li>
         <div>
@@ -65,8 +70,8 @@
               id="send"
               name="send"
               :disabled="!connectionState"
-              @click="sendMessage"
               class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              @click="sendMessage"
             >
               {{ $t("send") }}
               <span>
@@ -94,9 +99,19 @@ export default {
         log: null,
         input: "",
       },
-      currentIndex: -1, //index of the message log array to put in input box
+      currentIndex: -1, // index of the message log array to put in input box
     }
   },
+  computed: {
+    urlValid() {
+      return this.isUrlValid
+    },
+  },
+  watch: {
+    url() {
+      this.debouncer()
+    },
+  },
   mounted() {
     if (process.browser) {
       this.worker = this.$worker.createRejexWorker()
@@ -106,16 +121,6 @@ export default {
   destroyed() {
     this.worker.terminate()
   },
-  computed: {
-    urlValid() {
-      return this.isUrlValid
-    },
-  },
-  watch: {
-    url(val) {
-      this.debouncer()
-    },
-  },
   methods: {
     debouncer: debounce(function () {
       this.worker.postMessage({ type: "ws", url: this.url })
@@ -139,7 +144,7 @@ export default {
       ]
       try {
         this.socket = new WebSocket(this.url)
-        this.socket.onopen = (event) => {
+        this.socket.onopen = () => {
           this.connectionState = true
           this.communication.log = [
             {
@@ -153,10 +158,10 @@ export default {
             icon: "sync",
           })
         }
-        this.socket.onerror = (event) => {
+        this.socket.onerror = () => {
           this.handleError()
         }
-        this.socket.onclose = (event) => {
+        this.socket.onclose = () => {
           this.connectionState = false
           this.communication.log.push({
             payload: this.$t("disconnected_from", { name: this.url }),
@@ -215,20 +220,24 @@ export default {
       this.communication.input = ""
     },
     walkHistory(direction) {
-      const clientMessages = this.communication.log.filter(({ source }) => source === "client")
+      const clientMessages = this.communication.log.filter(
+        ({ source }) => source === "client"
+      )
       const length = clientMessages.length
       switch (direction) {
         case "up":
           if (length > 0 && this.currentIndex !== 0) {
-            //does nothing if message log is empty or the currentIndex is 0 when up arrow is pressed
+            // does nothing if message log is empty or the currentIndex is 0 when up arrow is pressed
             if (this.currentIndex === -1) {
               this.currentIndex = length - 1
-              this.communication.input = clientMessages[this.currentIndex].payload
+              this.communication.input =
+                clientMessages[this.currentIndex].payload
             } else if (this.currentIndex === 0) {
               this.communication.input = clientMessages[0].payload
             } else if (this.currentIndex > 0) {
               this.currentIndex = this.currentIndex - 1
-              this.communication.input = clientMessages[this.currentIndex].payload
+              this.communication.input =
+                clientMessages[this.currentIndex].payload
             }
           }
           break
@@ -239,7 +248,8 @@ export default {
               this.communication.input = ""
             } else if (this.currentIndex < length - 1) {
               this.currentIndex = this.currentIndex + 1
-              this.communication.input = clientMessages[this.currentIndex].payload
+              this.communication.input =
+                clientMessages[this.currentIndex].payload
             }
           }
           break