ongoing editable category

src/routes/transactions.tsx

@@ -7,11 +7,7 @@ import {
   PaginationState,
   useReactTable,
 } from "@tanstack/react-table";
-<<<<<<< HEAD
+import { useContext, useState } from "react";
-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";
 
@@ -25,16 +21,11 @@ type Transaction = {
   category: string;
 };
 
-async function loader(
+async function loader(page = 0, category: string | undefined = "") {
-  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();
 
@@ -48,42 +39,37 @@ async function loader(
 
 const columnHelper = createColumnHelper<Transaction>();
 
+const columns = [
+  columnHelper.accessor("date", {
+    header: "Date",
+    enableColumnFilter: false,
+  }),
+  columnHelper.accessor("description", {
+    header: "Description",
+    enableColumnFilter: false,
+  }),
+  columnHelper.accessor("value", {
+    header: "Value",
+    enableColumnFilter: false,
+  }),
+  columnHelper.accessor("category", {
+    header: "Category",
+    cell: (props) => {
+      console.log(props.getValue());
+      return (
+        <select defaultValue={props.getValue()}>
+          {useContext(CategoryContext).map((category) => (
+            <option key={category.name} value={category.name}>
+              {category.name}
+            </option>
+          ))}
+        </select>
+      );
+    },
+  }),
+];
+
 export default function Transactions() {
-  const categories = useContext(CategoryContext);
-
-  const columns = useMemo(
-    () => [
-      columnHelper.accessor("date", {
-        header: "Date",
-        enableColumnFilter: false,
-      }),
-      columnHelper.accessor("description", {
-        header: "Description",
-        enableColumnFilter: true,
-      }),
-      columnHelper.accessor("value", {
-        header: "Value",
-        enableColumnFilter: false,
-      }),
-      columnHelper.accessor("category", {
-        header: "Category",
-        cell: (props) => {
-          console.log(props.getValue());
-          return (
-            <select value={props.getValue()}>
-              {categories.map((category) => (
-                <option key={category.name} value={category.name}>
-                  {category.name}
-                </option>
-              ))}
-            </select>
-          );
-        },
-      }),
-    ],
-    [categories]
-  );
-
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: PageSize,
@@ -95,15 +81,11 @@ 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, descriptionFilter],
+    queryKey: ["transactions", pagination.pageIndex, columnFilters],
     queryFn: () =>
       loader(
         pagination.pageIndex,
-        descriptionFilter,
         columnFilters.find((filter) => filter.id == "category")!.value as string
       ),
     placeholderData: keepPreviousData,
@@ -151,13 +133,9 @@ export default function Transactions() {
                         <div>
                           <DebounceInput
                             debounceTimeout={275}
-                            onChange={(e) => {
+                            onChange={(e) =>
-                              if (header.column.id === "description") {
+                              header.column.setFilterValue(e.target.value)
-                                setDescriptionFilter(e.target.value);
+                            }
-                              } else {
-                                header.column.setFilterValue(e.target.value);
-                              }
-                            }}
                           />
                         </div>
                       ) : null}