Upgraded all components to vue 3 & typescript

src/components/torrent/TorrentSearchResults.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="container" v-if="query?.length">
+    <h2 class="torrent-header-text">
+      Searching for: <span class="query">{{ query }}</span>
+    </h2>
+
+    <loader v-if="loading" type="section" />
+    <div v-else>
+      <div v-if="torrents.length > 0" class="torrent-table">
+        <torrent-table :torrents="torrents" @magnet="addTorrent" />
+
+        <slot />
+      </div>
+
+      <div v-else class="no-results">
+        <h2>No results found</h2>
+      </div>
+    </div>
+  </div>
+</template>
+
+<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 type ITorrent from "../../interfaces/ITorrent";
+
+  interface Props {
+    query: string;
+    tmdb_id?: 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();
+  const notifications: {
+    info;
+    success;
+    error;
+  } = inject("notifications");
+
+  fetchTorrents();
+
+  function fetchTorrents() {
+    loading.value = true;
+
+    searchTorrents(props.query)
+      .then(torrentResponse => (torrents.value = torrentResponse?.results))
+      .then(() => updateResultCountDisplay())
+      .finally(() => (loading.value = false));
+  }
+
+  function updateResultCountDisplay() {
+    store.dispatch("torrentModule/setResults", torrents.value);
+    store.dispatch(
+      "torrentModule/setResultCount",
+      torrents.value?.length || -1
+    );
+  }
+
+  function addTorrent(torrent: ITorrent) {
+    const { name, magnet } = torrent;
+
+    notifications.info({
+      title: "Adding torrent 🧲",
+      description: props.query,
+      timeout: 3000
+    });
+
+    addMagnet(magnet, name, props.tmdb_id)
+      .then(resp => {
+        notifications.success({
+          title: "Torrent added 🎉",
+          description: props.query,
+          timeout: 3000
+        });
+      })
+      .catch(resp => {
+        console.log("Error while adding torrent:", resp?.data);
+        notifications.error({
+          title: "Failed to add torrent 🙅‍♀️",
+          description: "Check console for more info",
+          timeout: 3000
+        });
+      });
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "src/scss/variables";
+  @import "src/scss/media-queries";
+  @import "src/scss/elements";
+
+  h2 {
+    font-size: 20px;
+  }
+
+  .toggle {
+    max-width: unset !important;
+    margin: 1rem 0;
+  }
+
+  .container {
+    background-color: $background-color;
+  }
+
+  .no-results {
+    display: flex;
+    padding-bottom: 2rem;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    align-items: center;
+  }
+
+  .torrent-header-text {
+    font-weight: 300;
+    text-transform: uppercase;
+    font-size: 20px;
+    color: var(--text-color);
+    text-align: center;
+    margin: 0;
+
+    .query {
+      font-weight: 500;
+      white-space: pre;
+    }
+
+    @include mobile {
+      text-align: left;
+    }
+  }
+
+  .download {
+    &__icon {
+      fill: $text-color-70;
+      height: 1.2rem;
+
+      &:hover {
+        fill: $text-color;
+        cursor: pointer;
+      }
+    }
+
+    &.active &__icon {
+      fill: $green;
+    }
+  }
+</style>