chore: downgrade react to 18

react-debounce-input doesn't support it yet.

package.json

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

src/routes/transactions.tsx

@@ -12,6 +12,14 @@ import { DebounceInput } from "react-debounce-input";
 
 const PageSize = 30;
 
+type Transaction = {
+  id: number;
+  date: string;
+  description: string;
+  value: number;
+  category: string;
+};
+
 async function loader(page = 0, category: string | undefined = "") {
   const url = new URL("http://localhost:9000/transactions");
   url.search = new URLSearchParams({
@@ -20,17 +28,14 @@ async function loader(page = 0, category: string | undefined = "") {
     ...(category !== "" && { category: category }),
   }).toString();
 
-  return await fetch(url).then((response) => response.json());
+  return await fetch(url).then(async (response) => {
+    return {
+      transactions: (await response.json()) as Transaction[],
+      totalCount: response.headers.get("x-total-count"),
+    };
+  });
 }
 
-type Transaction = {
-  id: number;
-  date: string;
-  description: string;
-  value: number;
-  category: string;
-};
-
 const columnHelper = createColumnHelper<Transaction>();
 
 const columns = [
@@ -70,12 +75,11 @@ 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: {