feat: send description before category in loader

Include description in query key and call order.

Memoize columns and keep category select renderer.

src/routes/transactions.tsx

@@ -7,7 +7,11 @@ import {
   PaginationState,
   useReactTable,
 } from "@tanstack/react-table";
+<<<<<<< HEAD
 import { useContext, useMemo, useState } from "react";
+=======
+import { useContext, useState, useMemo } from "react";
+>>>>>>> 43722c0 (feat: send description before category in loader)
 import { DebounceInput } from "react-debounce-input";
 import { CategoryContext } from "../store/CategoryContext";
 
@@ -21,11 +25,16 @@ type Transaction = {
   category: string;
 };
 
-async function loader(page = 0, category: string | undefined = "") {
+async function loader(
+  page = 0,
+  description: string | undefined = "",
+  category: string | undefined = ""
+) {
   const url = new URL("http://localhost:9000/transactions");
   url.search = new URLSearchParams({
     limit: String(PageSize),
     offset: String(page * PageSize),
+    ...(description !== "" && { description: description }),
     ...(category !== "" && { category: category }),
   }).toString();
 
@@ -50,7 +59,7 @@ export default function Transactions() {
       }),
       columnHelper.accessor("description", {
         header: "Description",
-        enableColumnFilter: false,
+        enableColumnFilter: true,
       }),
       columnHelper.accessor("value", {
         header: "Value",
@@ -86,11 +95,15 @@ export default function Transactions() {
     },
   ]);
 
+  // track description filter separately (or use table filter for description)
+  const [descriptionFilter, setDescriptionFilter] = useState("");
+
   const { data, isPending, isError } = useQuery({
-    queryKey: ["transactions", pagination.pageIndex, columnFilters],
+    queryKey: ["transactions", pagination.pageIndex, columnFilters, descriptionFilter],
     queryFn: () =>
       loader(
         pagination.pageIndex,
+        descriptionFilter,
         columnFilters.find((filter) => filter.id == "category")!.value as string
       ),
     placeholderData: keepPreviousData,
@@ -138,9 +151,13 @@ export default function Transactions() {
                         <div>
                           <DebounceInput
                             debounceTimeout={275}
-                            onChange={(e) =>
-                              header.column.setFilterValue(e.target.value)
+                            onChange={(e) => {
+                              if (header.column.id === "description") {
+                                setDescriptionFilter(e.target.value);
+                              } else {
+                                header.column.setFilterValue(e.target.value);
                               }
+                            }}
                           />
                         </div>
                       ) : null}