refactor: lint

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