feat(web): search releases (#302)

* feat(releases): search in ui

* refactor(releases): optimize query recent releases

web/src/api/APIClient.ts

@@ -140,9 +140,10 @@ export const APIClient = {
   },
   release: {
     find: (query?: string) => appClient.Get<ReleaseFindResponse>(`api/release${query}`),
+    findRecent: () => appClient.Get<ReleaseFindResponse>("api/release/recent"),
     findQuery: (offset?: number, limit?: number, filters?: Array<ReleaseFilter>) => {
       const params = new URLSearchParams();
-      if (offset !== undefined)
+      if (offset !== undefined && offset > 0)
         params.append("offset", offset.toString());
 
       if (limit !== undefined)
@@ -156,6 +157,8 @@ export const APIClient = {
           params.append("indexer", filter.value);
         else if (filter.id === "action_status")
           params.append("push_status", filter.value);
+        else if (filter.id == "torrent_name")
+          params.append("q", filter.value);
       });
 
       return appClient.Get<ReleaseFindResponse>(`api/release?${params.toString()}`);

web/src/screens/dashboard/ActivityTable.tsx

@@ -13,7 +13,6 @@ import { EmptyListState } from "../../components/emptystates";
 
 import * as Icons from "../../components/Icons";
 import * as DataTable from "../../components/data-table";
-import { Fragment } from "react";
 
 // This is a custom filter UI for selecting
 // a unique option from a list
@@ -180,8 +179,8 @@ export const ActivityTable = () => {
   ], []);
 
   const { isLoading, data } = useQuery(
-    "dash_release",
-    () => APIClient.release.find("?limit=10"),
+    "dash_recent_releases",
+    () => APIClient.release.findRecent(),
     { refetchOnWindowFocus: false }
   );
 

web/src/screens/releases/Filters.tsx

@@ -10,6 +10,7 @@ import { APIClient } from "../../api/APIClient";
 import { classNames } from "../../utils";
 import { PushStatusOptions } from "../../domain/constants";
 import { FilterProps } from "react-table";
+import { DebounceInput } from "react-debounce-input";
 
 interface ListboxFilterProps {
     id: string;
@@ -77,6 +78,7 @@ export const IndexerSelectColumnFilter = ({
   return (
     <ListboxFilter
       id={id}
+      key={id}
       label={filterValue ?? "Indexer"}
       currentValue={filterValue}
       onChange={setFilter}
@@ -126,7 +128,7 @@ export const PushStatusSelectColumnFilter = ({
 }: FilterProps<object>) => {
   const label = filterValue ? PushStatusOptions.find((o) => o.value === filterValue && o.value)?.label : "Push status";
   return (
-    <div className="mr-3">
+    <div className="mr-3" key={id}>
       <ListboxFilter
         id={id}
         label={label ?? "Push status"}
@@ -138,4 +140,25 @@ export const PushStatusSelectColumnFilter = ({
         ))}
       </ListboxFilter>
     </div>
-  );};
+  );};
+
+export const SearchColumnFilter = ({
+  column: { filterValue, setFilter, id }
+}: FilterProps<object>) => {
+  return (
+    <div className="flex-1 mr-3 mt-1" key={id}>
+      <DebounceInput
+        minLength={2}
+        value={filterValue || undefined}
+        debounceTimeout={500}
+        onChange={e => {
+          setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely
+        }}
+        id="filter"
+        type="text"
+        autoComplete="off"
+        className="relative w-full py-2 pl-3 pr-10 text-left bg-white dark:bg-gray-800 rounded-lg shadow-md cursor-default dark:text-gray-400 sm:text-sm border-none"
+        placeholder="Search releases..."
+      />
+    </div>
+  );};

web/src/screens/releases/ReleaseTable.tsx

@@ -22,7 +22,7 @@ import * as DataTable from "../../components/data-table";
 
 import {
   IndexerSelectColumnFilter,
-  PushStatusSelectColumnFilter
+  PushStatusSelectColumnFilter, SearchColumnFilter
 } from "./Filters";
 
 type TableState = {
@@ -77,7 +77,8 @@ export const ReleaseTable = () => {
     {
       Header: "Release",
       accessor: "torrent_name",
-      Cell: DataTable.TitleCell
+      Cell: DataTable.TitleCell,
+      Filter: SearchColumnFilter
     },
     {
       Header: "Actions",
@@ -185,9 +186,7 @@ export const ReleaseTable = () => {
         {headerGroups.map((headerGroup) =>
           headerGroup.headers.map((column) => (
             column.Filter ? (
-              <div className="mt-2 sm:mt-0" key={column.id}>
-                <>{column.render("Filter")}</>
-              </div>
+              <React.Fragment key={column.id}>{column.render("Filter")}</React.Fragment>
             ) : null
           ))
         )}