feat: send description before category in loader

Include description in query key and call order.

Memoize columns and keep category select renderer.

src/main.tsx

@@ -4,13 +4,17 @@ import { createRoot } from "react-dom/client";
 import { RouterProvider } from "react-router";
 import "./index.css";
 import { router } from "./routes.ts";
+import { loader as categoriesLoader } from "./routes/categories";
+import { CategoryContext } from "./store/CategoryContext.ts";
 
 const queryClient = new QueryClient();
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
+      <CategoryContext value={await categoriesLoader()}>
+        <RouterProvider router={router} />
+      </CategoryContext>
     </QueryClientProvider>
   </StrictMode>
 );

src/routes/categories.tsx

@@ -1,16 +1,18 @@
 import { useLoaderData } from "react-router";
 
-export async function loader() {
-  return await fetch(`http://localhost:9000/categories`).then((response) => {
+type Category = {
+  name: string;
+  group: { name: string } | undefined;
+};
+
+export async function loader(): Promise<Category[]> {
+  return fetch(`http://localhost:9000/categories`).then((response) => {
     return response.json();
   });
 }
 
 export default function Categories() {
-  const data: {
-    name: string;
-    group: { name: string } | undefined;
-  }[] = useLoaderData<typeof loader>();
+  const data = useLoaderData<typeof loader>();
 
   return (
     <table>

src/routes/transactions.tsx

@@ -7,8 +7,13 @@ import {
   PaginationState,
   useReactTable,
 } from "@tanstack/react-table";
-import { useState } from "react";
+<<<<<<< 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";
 
 const PageSize = 30;
 
@@ -20,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();
 
@@ -38,20 +48,42 @@ async function loader(page = 0, category: string | undefined = "") {
 
 const columnHelper = createColumnHelper<Transaction>();
 
-const columns = [
-  columnHelper.accessor("date", {
-    enableColumnFilter: false,
-  }),
-  columnHelper.accessor("description", {
-    enableColumnFilter: false,
-  }),
-  columnHelper.accessor("value", {
-    enableColumnFilter: false,
-  }),
-  columnHelper.accessor("category", {}),
-];
-
 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,
@@ -63,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,
@@ -86,6 +122,7 @@ export default function Transactions() {
       pagination,
       columnFilters,
     },
+    debugTable: true,
   });
 
   if (isPending) {
@@ -114,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}

src/store/CategoryContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+
+type Category = {
+  name: string;
+  group: { name: string } | undefined;
+};
+
+export const CategoryContext = createContext<Category[]>([]);