diff --git a/web/src/components/Item.tsx b/web/src/components/Item.tsx index fb18aa5..4cbddbb 100644 --- a/web/src/components/Item.tsx +++ b/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) => { {open && (
+
+ setSearch(e.target.value)} + /> +
Last Refresh:{" "} @@ -141,8 +161,8 @@ export const Item = ({ item }: ItemProps) => { Delete item
- {torrents && torrents.length > 0 ? ( - torrents?.map((torrent) => ( + {filteredTorrents && filteredTorrents.length > 0 ? ( + filteredTorrents.map((torrent) => (