add refresh endpoint for item's torrents

web/src/api/useRefreshItemMutation.ts

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

web/src/components/Item.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import type { ItemDetails } from "../api/useItemsQuery";
 import { useItemTorrentsQuery } from "../api/useItemTorrentsQuery";
 import {
+  ArrowsClockwiseIcon,
   CaretDownIcon,
   CaretUpIcon,
   CheckCircleIcon,
@@ -15,6 +16,8 @@ import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { humanFileSize } from "../utils/humanFileSize";
 import { useDeleteTorrentMutation } from "../api/useDeleteTorrentMutation";
+import { useRefreshItemMutation } from "../api/useRefreshItemMutation";
+import { Loader } from "./Loader";
 
 dayjs.extend(relativeTime);
 
@@ -31,6 +34,7 @@ export const Item = ({ item }: ItemProps) => {
 
   const deleteMutation = useDeleteItemMutation();
   const downloadMutation = useDownloadTorrentMutation();
+  const refreshMutation = useRefreshItemMutation();
   const deleteTorrentMutation = useDeleteTorrentMutation();
 
   const Icon = open ? CaretUpIcon : CaretDownIcon;
@@ -54,6 +58,21 @@ export const Item = ({ item }: ItemProps) => {
     );
   };
 
+  const handleRefresh = () => {
+    refreshMutation.mutate(
+      {
+        id: item.id,
+      },
+      {
+        onSuccess() {
+          queryClient.invalidateQueries({
+            queryKey: ["items", item.id, "torrents"],
+          });
+        },
+      },
+    );
+  };
+
   const handleDeleteTorrent = (torrentId: number) => {
     deleteTorrentMutation.mutate(
       {
@@ -61,6 +80,7 @@ export const Item = ({ item }: ItemProps) => {
       },
       {
         onSuccess() {
+          queryClient.invalidateQueries({ queryKey: ["items"] });
           queryClient.invalidateQueries({
             queryKey: ["items", item.id, "torrents"],
           });
@@ -92,6 +112,17 @@ export const Item = ({ item }: ItemProps) => {
                 ? " (" + dayjs(item.refreshedAt).from(dayjs()) + ")"
                 : null}
             </div>
+            <button
+              className="cursor-pointer flex items-center gap-1"
+              onClick={handleRefresh}
+            >
+              {refreshMutation.isPending ? (
+                <Loader size={20} />
+              ) : (
+                <ArrowsClockwiseIcon size={20} />
+              )}{" "}
+              Refresh
+            </button>
             <button
               className="cursor-pointer flex items-center gap-1 text-[#b00420]"
               onClick={handleDelete}

web/src/components/Loader.tsx

@@ -0,0 +1,7 @@
+import { CircleNotchIcon, type IconProps } from "@phosphor-icons/react";
+
+export const Loader = ({ className, ...props }: IconProps) => {
+  return (
+    <CircleNotchIcon {...props} className={`animate-spin ${className || ""}`} />
+  );
+};