From 18c55262d244f3a49f304aeaa7f2a5de78f28872 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lu=C3=ADs=20Murta?= <luis@murta.dev>
Date: Mon, 28 Jul 2025 22:12:05 +0100
Subject: [PATCH] ongoing editable category

---
 src/main.tsx                 |  6 +++++-
 src/routes/categories.tsx    | 14 ++++++++------
 src/routes/transactions.tsx  | 23 +++++++++++++++++++++--
 src/store/CategoryContext.ts |  8 ++++++++
 4 files changed, 42 insertions(+), 9 deletions(-)
 create mode 100644 src/store/CategoryContext.ts

diff --git a/src/main.tsx b/src/main.tsx
index a5a082b..a6962a9 100644
--- a/src/main.tsx
+++ b/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>
 );
diff --git a/src/routes/categories.tsx b/src/routes/categories.tsx
index f1e1f49..1a43516 100644
--- a/src/routes/categories.tsx
+++ b/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>
diff --git a/src/routes/transactions.tsx b/src/routes/transactions.tsx
index d84d31a..0821f4e 100644
--- a/src/routes/transactions.tsx
+++ b/src/routes/transactions.tsx
@@ -7,8 +7,9 @@ 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;
 
@@ -40,15 +41,32 @@ 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() {
@@ -86,6 +104,7 @@ export default function Transactions() {
       pagination,
       columnFilters,
     },
+    debugTable: true,
   });
 
   if (isPending) {
diff --git a/src/store/CategoryContext.ts b/src/store/CategoryContext.ts
new file mode 100644
index 0000000..7b8c2fa
--- /dev/null
+++ b/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[]>([]);