add torrents search

web/src/components/Item.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import type { ItemDetails } from "../api/useItemsQuery";
 import { useItemTorrentsQuery } from "../api/useItemTorrentsQuery";
 import {
@@ -40,6 +40,17 @@ export const Item = ({ item }: ItemProps) => {
 
   const Icon = open ? CaretUpIcon : CaretDownIcon;
 
+  const [search, setSearch] = useState("");
+
+  const filteredTorrents = useMemo(() => {
+    if (!search) return torrents;
+    return torrents?.filter((torrent) => {
+      const terms = search.split(" ");
+      const foundTerms = terms.filter((term) => torrent.title.includes(term));
+      return foundTerms.length === terms.length;
+    });
+  }, [search, torrents]);
+
   useEffect(() => {
     const params = new URLSearchParams(location.search);
     const itemId = params.get("item");
@@ -113,6 +124,15 @@ export const Item = ({ item }: ItemProps) => {
       </div>
       {open && (
         <div>
+          <div className="my-2">
+            <input
+              type="text"
+              placeholder="Search torrents..."
+              className="w-full outline-none py-1 px-2 rounded border-2 border-transparent focus:border-neutral-900"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </div>
           <div className="flex items-center gap-2 mb-2">
             <div>
               Last Refresh:{" "}
@@ -141,8 +161,8 @@ export const Item = ({ item }: ItemProps) => {
               <TrashIcon size={20} /> Delete item
             </button>
           </div>
-          {torrents && torrents.length > 0 ? (
+          {filteredTorrents && filteredTorrents.length > 0 ? (
-            torrents?.map((torrent) => (
+            filteredTorrents.map((torrent) => (
               <div
                 key={torrent.id}
                 className="flex justify-between items-center hover:bg-neutral-200 group"