allow to delete torrents

web/src/api/useDeleteTorrentMutation.ts

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

web/src/components/Item.tsx

@@ -13,6 +13,7 @@ import { useDeleteItemMutation } from "../api/useDeleteItemMutation";
 import { useQueryClient } from "@tanstack/react-query";
 import dayjs from "dayjs";
 import { humanFileSize } from "../utils/humanFileSize";
+import { useDeleteTorrentMutation } from "../api/useDeleteTorrentMutation";
 
 export type ItemProps = {
   item: ItemDetails;
@@ -27,6 +28,7 @@ export const Item = ({ item }: ItemProps) => {
 
   const deleteMutation = useDeleteItemMutation();
   const downloadMutation = useDownloadTorrentMutation();
+  const deleteTorrentMutation = useDeleteTorrentMutation();
 
   const Icon = open ? CaretUpIcon : CaretDownIcon;
 
@@ -49,6 +51,21 @@ export const Item = ({ item }: ItemProps) => {
     );
   };
 
+  const handleDeleteTorrent = (torrentId: number) => {
+    deleteTorrentMutation.mutate(
+      {
+        id: torrentId,
+      },
+      {
+        onSuccess() {
+          queryClient.invalidateQueries({
+            queryKey: ["items", item.id, "torrents"],
+          });
+        },
+      },
+    );
+  };
+
   return (
     <div className="border-t border-b border-neutral-900">
       <div
@@ -74,7 +91,7 @@ export const Item = ({ item }: ItemProps) => {
             torrents?.map((torrent) => (
               <div
                 key={torrent.id}
-                className="flex justify-between items-center hover:bg-neutral-200"
+                className="flex justify-between items-center hover:bg-neutral-200 group"
               >
                 <div className="flex items-center gap-2">
                   <span>
@@ -92,6 +109,12 @@ export const Item = ({ item }: ItemProps) => {
                       <CheckCircleIcon size={20} color="green" />
                     </span>
                   )}
+                  <button
+                    className="hidden group-hover:inline text-[#b00420] cursor-pointer"
+                    onClick={() => handleDeleteTorrent(torrent.id)}
+                  >
+                    <TrashIcon size={16} />
+                  </button>
                 </div>
                 <div className="flex items-center gap-1">
                   <span>Seeds: {torrent.seeders}</span>