src/main.tsx

@@ -4,17 +4,13 @@ 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.Provider value={await categoriesLoader()}>
-        <RouterProvider router={router} />
-      </CategoryContext.Provider>
+      <RouterProvider router={router} />
     </QueryClientProvider>
   </StrictMode>
 );

src/routes/categories.tsx

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

src/routes/transactions.tsx

@@ -7,9 +7,8 @@ import {
   PaginationState,
   useReactTable,
 } from "@tanstack/react-table";
-import { useContext, useMemo, useState } from "react";
+import { useState } from "react";
 import { DebounceInput } from "react-debounce-input";
-import { CategoryContext } from "../store/CategoryContext";
 
 const PageSize = 30;
 
@@ -39,47 +38,20 @@ 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: false,
-      }),
-      columnHelper.accessor("value", {
-        header: "Value",
-        enableColumnFilter: false,
-      }),
-      columnHelper.accessor("category", {
-        header: "Category",
-        cell: (props) => {
-          const [selectedCategory, setSelectedCategory] = useState(
-            props.getValue() as string
-          );
-          return (
-            <select
-              value={selectedCategory}
-              onChange={(e) => setSelectedCategory(e.target.value)}
-            >
-              {categories.map((category) => (
-                <option key={category.name} value={category.name}>
-                  {category.name}
-                </option>
-              ))}
-            </select>
-          );
-        },
-      }),
-    ],
-    [categories]
-  );
-
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: PageSize,
@@ -91,51 +63,15 @@ export default function Transactions() {
     },
   ]);
 
-  // Static data for local editing
-  const staticTransactions: Transaction[] = [
-    {
-      id: 1,
-      date: "2024-06-01",
-      description: "Coffee Shop",
-      value: 4.5,
-      category: "Food",
-    },
-    {
-      id: 2,
-      date: "2024-06-02",
-      description: "Book Store",
-      value: 15.0,
-      category: "Shopping",
-    },
-    {
-      id: 3,
-      date: "2024-06-03",
-      description: "Bus Ticket",
-      value: 2.75,
-      category: "Transport",
-    },
-    {
-      id: 4,
-      date: "2024-06-04",
-      description: "Groceries",
-      value: 32.2,
-      category: "Food",
-    },
-    {
-      id: 5,
-      date: "2024-06-05",
-      description: "Movie",
-      value: 12.0,
-      category: "Entertainment",
-    },
-  ];
-
-  const data = {
-    transactions: staticTransactions,
-    totalCount: staticTransactions.length,
-  };
-  const isPending = false;
-  const isError = false;
+  const { data, isPending, isError } = useQuery({
+    queryKey: ["transactions", pagination.pageIndex, columnFilters],
+    queryFn: () =>
+      loader(
+        pagination.pageIndex,
+        columnFilters.find((filter) => filter.id == "category")!.value as string
+      ),
+    placeholderData: keepPreviousData,
+  });
 
   const table = useReactTable({
     columns,
@@ -150,7 +86,6 @@ export default function Transactions() {
       pagination,
       columnFilters,
     },
-    debugTable: true,
   });
 
   if (isPending) {

src/store/CategoryContext.ts

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