feat: implement last button for transactions

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.

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,15 @@ 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) => {
+    console.log("Headers:", ...response.headers);
+    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 +76,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
-    pageCount: -1,
+    rowCount: data?.totalCount ? +data.totalCount : undefined,
     onPaginationChange: setPagination,
     onColumnFiltersChange: setColumnFilters,
     state: {