Resolved ALL eslint issues for project

src/components/torrent/TorrentSearchResults.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container" v-if="query?.length">
+  <div v-if="query?.length" class="container">
     <h2 class="torrent-header-text">
       Searching for: <span class="query">{{ query }}</span>
     </h2>
@@ -22,22 +22,19 @@
 <script setup lang="ts">
   import { ref, inject, defineProps } from "vue";
   import { useStore } from "vuex";
-  import { sortableSize } from "../../utils";
-  import { searchTorrents, addMagnet } from "../../api";
-
   import Loader from "@/components/ui/Loader.vue";
   import TorrentTable from "@/components/torrent/TorrentTable.vue";
   import type { Ref } from "vue";
+  import { searchTorrents, addMagnet } from "../../api";
   import type ITorrent from "../../interfaces/ITorrent";
 
   interface Props {
     query: string;
-    tmdb_id?: number;
+    tmdbId?: number;
   }
 
   const loading: Ref<boolean> = ref(true);
   const torrents: Ref<ITorrent[]> = ref([]);
-  const release_types: Ref<string[]> = ref(["all"]);
 
   const props = defineProps<Props>();
   const store = useStore();
@@ -47,15 +44,12 @@
     error;
   } = inject("notifications");
 
-  fetchTorrents();
+  function setTorrents(_torrents: ITorrent[]) {
+    torrents.value = _torrents || [];
+  }
 
-  function fetchTorrents() {
-    loading.value = true;
-
-    searchTorrents(props.query)
-      .then(torrentResponse => (torrents.value = torrentResponse?.results))
-      .then(() => updateResultCountDisplay())
-      .finally(() => (loading.value = false));
+  function setLoading(state: boolean) {
+    loading.value = state;
   }
 
   function updateResultCountDisplay() {
@@ -66,6 +60,15 @@
     );
   }
 
+  function fetchTorrents() {
+    loading.value = true;
+
+    searchTorrents(props.query)
+      .then(torrentResponse => setTorrents(torrentResponse?.results))
+      .then(() => updateResultCountDisplay())
+      .finally(() => setLoading(false));
+  }
+
   function addTorrent(torrent: ITorrent) {
     const { name, magnet } = torrent;
 
@@ -75,16 +78,15 @@
       timeout: 3000
     });
 
-    addMagnet(magnet, name, props.tmdb_id)
-      .then(resp => {
+    addMagnet(magnet, name, props.tmdbId)
+      .then(() => {
         notifications.success({
           title: "Torrent added 🎉",
           description: props.query,
           timeout: 3000
         });
       })
-      .catch(resp => {
-        console.log("Error while adding torrent:", resp?.data);
+      .catch(() => {
         notifications.error({
           title: "Failed to add torrent 🙅‍♀️",
           description: "Check console for more info",
@@ -92,6 +94,8 @@
         });
       });
   }
+
+  fetchTorrents();
 </script>
 
 <style lang="scss" scoped>

src/components/torrent/TorrentTable.vue

@@ -5,8 +5,8 @@
         <th
           v-for="column in columns"
           :key="column"
-          @click="sortTable(column)"
           :class="column === selectedColumn ? 'active' : null"
+          @click="sortTable(column)"
         >
           {{ column }}
           <span v-if="prevCol === column && direction">↑</span>
@@ -18,13 +18,32 @@
     <tbody>
       <tr
         v-for="torrent in torrents"
-        class="table__content"
         :key="torrent.magnet"
+        class="table__content"
       >
-        <td @click="expand($event, torrent.name)">{{ torrent.name }}</td>
-        <td @click="expand($event, torrent.name)">{{ torrent.seed }}</td>
-        <td @click="expand($event, torrent.name)">{{ torrent.size }}</td>
-        <td @click="() => emit('magnet', torrent)" class="download">
+        <td
+          @click="expand($event, torrent.name)"
+          @keydown.enter="expand($event, torrent.name)"
+        >
+          {{ torrent.name }}
+        </td>
+        <td
+          @click="expand($event, torrent.name)"
+          @keydown.enter="expand($event, torrent.name)"
+        >
+          {{ torrent.seed }}
+        </td>
+        <td
+          @click="expand($event, torrent.name)"
+          @keydown.enter="expand($event, torrent.name)"
+        >
+          {{ torrent.size }}
+        </td>
+        <td
+          class="download"
+          @click="() => emit('magnet', torrent)"
+          @keydown.enter="() => emit('magnet', torrent)"
+        >
           <IconMagnet />
         </td>
       </tr>
@@ -35,8 +54,8 @@
 <script setup lang="ts">
   import { ref, defineProps, defineEmits } from "vue";
   import IconMagnet from "@/icons/IconMagnet.vue";
-  import { sortableSize } from "../../utils";
   import type { Ref } from "vue";
+  import { sortableSize } from "../../utils";
   import type ITorrent from "../../interfaces/ITorrent";
 
   interface Props {
@@ -87,18 +106,6 @@
     tableRow.insertAdjacentElement("afterend", expandedRow);
   }
 
-  function sortTable(col, sameDirection = false) {
-    if (prevCol.value === col && sameDirection === false) {
-      direction.value = !direction.value;
-    }
-
-    if (col === "name") sortName();
-    else if (col === "seed") sortSeed();
-    else if (col === "size") sortSize();
-
-    prevCol.value = col;
-  }
-
   function sortName() {
     const torrentsCopy = [...torrents.value];
     if (direction.value) {
@@ -112,11 +119,11 @@
     const torrentsCopy = [...torrents.value];
     if (direction.value) {
       torrents.value = torrentsCopy.sort(
-        (a, b) => parseInt(a.seed) - parseInt(b.seed)
+        (a, b) => parseInt(a.seed, 10) - parseInt(b.seed, 10)
       );
     } else {
       torrents.value = torrentsCopy.sort(
-        (a, b) => parseInt(b.seed) - parseInt(a.seed)
+        (a, b) => parseInt(b.seed, 10) - parseInt(a.seed, 10)
       );
     }
   }
@@ -133,6 +140,18 @@
       );
     }
   }
+
+  function sortTable(col, sameDirection = false) {
+    if (prevCol.value === col && sameDirection === false) {
+      direction.value = !direction.value;
+    }
+
+    if (col === "name") sortName();
+    else if (col === "seed") sortSeed();
+    else if (col === "size") sortSize();
+
+    prevCol.value = col;
+  }
 </script>
 
 <style lang="scss" scoped>

src/components/torrent/TruncatedTorrentResults.vue

@@ -2,13 +2,15 @@
   <div>
     <torrent-search-results
       :query="query"
-      :tmdb_id="tmdb_id"
+      :tmdb-id="tmdbId"
       :class="{ truncated: truncated }"
       ><div
         v-if="truncated"
         class="load-more"
+        tabindex="0"
         role="button"
         @click="truncated = false"
+        @keydown.enter="truncated = false"
       >
         <icon-arrow-down />
       </div>
@@ -32,7 +34,7 @@
 
   interface Props {
     query: string;
-    tmdb_id?: number;
+    tmdbId?: number;
   }
 
   const props = defineProps<Props>();