init

web/src/App.tsx

@@ -0,0 +1,19 @@
+import { useItemsQuery } from "./api/useItemsQuery";
+import { CreateItemForm } from "./components/CreateItemForm";
+import { Item } from "./components/Item";
+
+export default function App() {
+  const { data: items } = useItemsQuery();
+
+  return (
+    <div className="max-w-[1440px] mx-auto w-full py-2">
+      <h1 className="text-2xl font-semibold my-2">torrent queue</h1>
+      <CreateItemForm />
+      <div className="mt-4 flex flex-col gap-3">
+        {items?.map((item) => (
+          <Item key={item.id} item={item} />
+        ))}
+      </div>
+    </div>
+  );
+}

web/src/api/useCreateItemMutation.ts

@@ -0,0 +1,22 @@
+import { useMutation } from "@tanstack/react-query";
+
+export type CreateItemData = {
+  query: string;
+  category: number;
+};
+
+export const useCreateItemMutation = () => {
+  return useMutation({
+    mutationFn: async (data: CreateItemData) => {
+      const resp = await fetch("/api/items", {
+        method: "POST",
+        body: JSON.stringify(data),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      const rData = await resp.json();
+      return rData;
+    },
+  });
+};

web/src/api/useDeleteItemMutation.ts

@@ -0,0 +1,13 @@
+import { useMutation } from "@tanstack/react-query";
+
+export const useDeleteItemMutation = () => {
+  return useMutation({
+    mutationFn: async ({ torrentId }: { torrentId: number }) => {
+      const resp = await fetch(`/api/items/${torrentId}`, {
+        method: "DELETE",
+      });
+      const data = await resp.json();
+      return data;
+    },
+  });
+};

web/src/api/useDownloadTorrentMutation.ts

@@ -0,0 +1,13 @@
+import { useMutation } from "@tanstack/react-query";
+
+export const useDownloadTorrentMutation = () => {
+  return useMutation({
+    mutationFn: async ({ torrentId }: { torrentId: number }) => {
+      const resp = await fetch(`/api/torrents/${torrentId}/download`, {
+        method: "POST",
+      });
+      const data = await resp.json();
+      return data;
+    },
+  });
+};

web/src/api/useItemTorrentsQuery.ts

@@ -0,0 +1,29 @@
+import { useQuery } from "@tanstack/react-query";
+
+export type ItemTorrent = {
+  id: number;
+  title: string;
+  guid: string;
+  indexer: string;
+  pubdate: string;
+  size: number;
+  downloadUrl: string;
+  seeders: number;
+  peers: number;
+  category: number;
+  hash: string | null;
+  downloaded: boolean;
+  createdAt: string;
+};
+
+export const useItemTorrentsQuery = (itemId: number, enabled = true) => {
+  return useQuery({
+    queryKey: ["items", itemId, "torrents"],
+    enabled,
+    queryFn: async () => {
+      const resp = await fetch(`/api/items/${itemId}/torrents`);
+      const data = await resp.json();
+      return data as ItemTorrent[];
+    },
+  });
+};

web/src/api/useItemsQuery.ts

@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
+
+export type ItemDetails = {
+  id: number;
+  query: string;
+  createdAt: string;
+};
+
+export const useItemsQuery = () => {
+  return useQuery({
+    queryKey: ["items"],
+    queryFn: async () => {
+      const resp = await fetch("/api/items");
+      const data = await resp.json();
+      return data as ItemDetails[];
+    },
+  });
+};

web/src/components/CreateItemForm.tsx

@@ -0,0 +1,60 @@
+import { Controller, useForm } from "react-hook-form";
+import {
+  type CreateItemData,
+  useCreateItemMutation,
+} from "../api/useCreateItemMutation";
+import { useQueryClient } from "@tanstack/react-query";
+import { categories } from "../lib/categories";
+
+export const CreateItemForm = () => {
+  const queryClient = useQueryClient();
+  const createItemMutation = useCreateItemMutation();
+
+  const form = useForm<CreateItemData>({
+    defaultValues: {
+      query: "",
+      category: 5000,
+    },
+  });
+
+  const onSubmit = form.handleSubmit((data) => {
+    createItemMutation.mutate(data, {
+      onSuccess() {
+        queryClient.invalidateQueries({ queryKey: ["items"] });
+      },
+      onSettled() {
+        form.reset();
+      },
+    });
+  });
+
+  return (
+    <form onSubmit={onSubmit}>
+      <input
+        type="text"
+        placeholder="query"
+        className="w-full"
+        {...form.register("query", {
+          required: true,
+        })}
+      />
+      <Controller
+        control={form.control}
+        name="category"
+        render={({ field }) => (
+          <select
+            {...field}
+            onChange={(e) => field.onChange(parseInt(e.target.value))}
+          >
+            {Object.entries(categories).map(([id, label]) => (
+              <option key={id} value={id}>
+                {label}
+              </option>
+            ))}
+          </select>
+        )}
+      />
+      <button type="submit">Add Item</button>
+    </form>
+  );
+};

web/src/components/Item.tsx

@@ -0,0 +1,141 @@
+import { useState } from "react";
+import type { ItemDetails } from "../api/useItemsQuery";
+import { useItemTorrentsQuery } from "../api/useItemTorrentsQuery";
+import {
+  CaretDownIcon,
+  CaretUpIcon,
+  CheckCircleIcon,
+  DownloadSimpleIcon,
+  TrashIcon,
+} from "@phosphor-icons/react";
+import { useDownloadTorrentMutation } from "../api/useDownloadTorrentMutation";
+import { useDeleteItemMutation } from "../api/useDeleteItemMutation";
+import { useQueryClient } from "@tanstack/react-query";
+import dayjs from "dayjs";
+
+export type ItemProps = {
+  item: ItemDetails;
+};
+
+export const Item = ({ item }: ItemProps) => {
+  const queryClient = useQueryClient();
+
+  const [open, setOpen] = useState(false);
+
+  const { data: torrents } = useItemTorrentsQuery(item.id, open);
+
+  const deleteMutation = useDeleteItemMutation();
+  const downloadMutation = useDownloadTorrentMutation();
+
+  const Icon = open ? CaretUpIcon : CaretDownIcon;
+
+  const handleDownloadTorrent = (torrentId: number) => {
+    downloadMutation.mutate({ torrentId });
+  };
+
+  const handleDelete = () => {
+    if (!confirm("Do you want to delete this item?")) return;
+
+    deleteMutation.mutate(
+      {
+        torrentId: item.id,
+      },
+      {
+        onSuccess() {
+          queryClient.invalidateQueries({ queryKey: ["items"] });
+        },
+      },
+    );
+  };
+
+  return (
+    <div className="border-t border-b border-neutral-900">
+      <div
+        className="flex justify-between items-center py-1 group cursor-pointer"
+        tabIndex={0}
+        role="button"
+        onClick={() => setOpen((prev) => !prev)}
+      >
+        <span className="group-hover:text-neutral-500">{item.query}</span>
+        <Icon size={24} />
+      </div>
+      {open && (
+        <div>
+          <div className="flex mb-2">
+            <button
+              className="cursor-pointer flex items-center gap-1 text-[#b00420]"
+              onClick={handleDelete}
+            >
+              <TrashIcon size={20} /> Delete item
+            </button>
+          </div>
+          {torrents && torrents.length > 0 ? (
+            torrents?.map((torrent) => (
+              <div
+                key={torrent.id}
+                className="flex justify-between items-center hover:bg-neutral-200"
+              >
+                <div className="flex items-center gap-2">
+                  <span>
+                    <a
+                      href={torrent.guid}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {torrent.title}
+                    </a>{" "}
+                    [{formatCategory(torrent.category)}] [{torrent.indexer}]
+                  </span>
+                  {torrent.downloaded && (
+                    <span title="Torrent files downloaded">
+                      <CheckCircleIcon size={20} color="green" />
+                    </span>
+                  )}
+                </div>
+                <div className="flex items-center gap-1">
+                  <span>Seeds: {torrent.seeders}</span>
+                  <span>Peers: {torrent.peers}</span>
+                  <span>
+                    PubDate: {dayjs(torrent.pubdate).format("DD.MM.YYYY")} at{" "}
+                    {dayjs(torrent.pubdate).format("HH:mm")}
+                  </span>
+                  <button
+                    className="cursor-pointer"
+                    onClick={() => handleDownloadTorrent(torrent.id)}
+                  >
+                    <DownloadSimpleIcon size={24} />
+                  </button>
+                </div>
+              </div>
+            ))
+          ) : (
+            <span>No torrents yet</span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const formatCategory = (category: number): string => {
+  switch (category) {
+    case 1000:
+      return "Console";
+    case 2000:
+      return "Movies";
+    case 3000:
+      return "Audio";
+    case 4000:
+      return "PC";
+    case 5000:
+      return "TV";
+    case 6000:
+      return "XXX";
+    case 7000:
+      return "Books";
+    case 8000:
+      return "Other";
+    default:
+      return "";
+  }
+};

web/src/index.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

web/src/lib/categories.ts

@@ -0,0 +1,10 @@
+export const categories = {
+  1000: "Console",
+  2000: "Movies",
+  3000: "Audio",
+  4000: "PC",
+  5000: "TV",
+  6000: "XXX",
+  7000: "Books",
+  8000: "Other",
+};

web/src/main.tsx

@@ -0,0 +1,15 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </StrictMode>,
+);