diff --git a/src/routes/transactions.tsx b/src/routes/transactions.tsx index 76c436a..a1c9593 100644 --- a/src/routes/transactions.tsx +++ b/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() {
- header.column.setFilterValue(e.target.value) - } + onChange={(e) => { + if (header.column.id === "description") { + setDescriptionFilter(e.target.value); + } else { + header.column.setFilterValue(e.target.value); + } + }} />
) : null}