ongoing editable category

Use X-Total-Count header now sent from the backend to send to the table
pagination model, so that it can jump directly to the last page.

package.json

@@ -12,15 +12,15 @@
   "dependencies": {
     "@tanstack/react-query": "^5.71.0",
     "@tanstack/react-table": "^8.21.2",
-    "react": "^18.0.0",
+    "react": "^19.0.0",
     "react-debounce-input": "^3.3.0",
-    "react-dom": "^18.0.0",
+    "react-dom": "^19.0.0",
     "react-router": "^7.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
-    "@types/react": "^18.0.10",
+    "@types/react": "^19.0.10",
-    "@types/react-dom": "^18.0.4",
+    "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",

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}>
+      <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() {
+type Category = {
-  return await fetch(`http://localhost:9000/categories`).then((response) => {
+  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: {
+  const data = useLoaderData<typeof loader>();
-    name: string;
-    group: { name: string } | undefined;
-  }[] = useLoaderData<typeof loader>();
 
   return (
     <table>

src/routes/transactions.tsx

@@ -7,22 +7,12 @@ import {
   PaginationState,
   useReactTable,
 } from "@tanstack/react-table";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { DebounceInput } from "react-debounce-input";
+import { CategoryContext } from "../store/CategoryContext";
 
 const PageSize = 30;
 
-async function loader(page = 0, category: string | undefined = "") {
-  const url = new URL("http://localhost:9000/transactions");
-  url.search = new URLSearchParams({
-    limit: String(PageSize),
-    offset: String(page * PageSize),
-    ...(category !== "" && { category: category }),
-  }).toString();
-
-  return await fetch(url).then((response) => response.json());
-}
-
 type Transaction = {
   id: number;
   date: string;
@@ -31,19 +21,52 @@ type Transaction = {
   category: string;
 };
 
+async function loader(page = 0, category: string | undefined = "") {
+  const url = new URL("http://localhost:9000/transactions");
+  url.search = new URLSearchParams({
+    limit: String(PageSize),
+    offset: String(page * PageSize),
+    ...(category !== "" && { category: category }),
+  }).toString();
+
+  return await fetch(url).then(async (response) => {
+    return {
+      transactions: (await response.json()) as Transaction[],
+      totalCount: response.headers.get("x-total-count"),
+    };
+  });
+}
+
 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", {}),
+  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() {
@@ -70,18 +93,18 @@ export default function Transactions() {
 
   const table = useReactTable({
     columns,
-    data,
+    data: data?.transactions ?? [],
     getCoreRowModel: getCoreRowModel(),
     manualPagination: true,
     manualFiltering: true,
-    // rowCount: , // TODO: get this from the server
+    rowCount: data?.totalCount ? +data.totalCount : undefined,
-    pageCount: -1,
     onPaginationChange: setPagination,
     onColumnFiltersChange: setColumnFilters,
     state: {
       pagination,
       columnFilters,
     },
+    debugTable: true,
   });
 
   if (isPending) {

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[]>([]);