fixup! ongoing editable category

src/main.tsx

@@ -12,9 +12,9 @@ const queryClient = new QueryClient();
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
-      <CategoryContext value={await categoriesLoader()}>
+      <CategoryContext.Provider value={await categoriesLoader()}>
         <RouterProvider router={router} />
-      </CategoryContext>
+      </CategoryContext.Provider>
     </QueryClientProvider>
   </StrictMode>
 );

src/routes/categories.tsx

@@ -6,9 +6,13 @@ type Category = {
 };
 
 export async function loader(): Promise<Category[]> {
-  return fetch(`http://localhost:9000/categories`).then((response) => {
-    return response.json();
-  });
+  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 default function Categories() {

src/routes/transactions.tsx

@@ -59,9 +59,14 @@ export default function Transactions() {
       columnHelper.accessor("category", {
         header: "Category",
         cell: (props) => {
-          console.log(props.getValue());
+          const [selectedCategory, setSelectedCategory] = useState(
+            props.getValue() as string
+          );
           return (
-            <select value={props.getValue()}>
+            <select
+              value={selectedCategory}
+              onChange={(e) => setSelectedCategory(e.target.value)}
+            >
               {categories.map((category) => (
                 <option key={category.name} value={category.name}>
                   {category.name}
@@ -86,15 +91,51 @@ export default function Transactions() {
     },
   ]);
 
-  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,
-  });
+  // 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 table = useReactTable({
     columns,