Adds banks and categories components

src/root.tsx

@@ -4,11 +4,25 @@ import { NavLink, Outlet } from "react-router";
 export default function App() {
   return (
     <>
-      <h1>Personal Finance</h1>
-      <nav>
-        <NavLink to="/transactions">Transactions</NavLink>
-      </nav>
-      <Outlet />
+      <header>
+        <h1>Personal Finance</h1>
+        <nav>
+          <ul>
+            <li>
+              <NavLink to="/transactions">Transactions</NavLink>
+            </li>
+            <li>
+              <NavLink to="/banks">Banks</NavLink>
+            </li>
+            <li>
+              <NavLink to="/categories">Categories</NavLink>
+            </li>
+          </ul>
+        </nav>
+      </header>
+      <main>
+        <Outlet />
+      </main>
     </>
   );
 }

src/routes.ts

@@ -1,6 +1,10 @@
 import { createBrowserRouter } from "react-router";
-import Transactions, { loader } from "./routes/transactions";
 import App from "./root";
+import Banks, { loader as banksLoader } from "./routes/banks";
+import Categories, { loader as categoriesLoader } from "./routes/categories";
+import Transactions, {
+  loader as transactionsLoader,
+} from "./routes/transactions";
 
 export const router = createBrowserRouter([
   {
@@ -10,7 +14,17 @@ export const router = createBrowserRouter([
       {
         path: "transactions",
         Component: Transactions,
-        loader: loader,
+        loader: transactionsLoader,
+      },
+      {
+        path: "banks",
+        Component: Banks,
+        loader: banksLoader,
+      },
+      {
+        path: "categories",
+        Component: Categories,
+        loader: categoriesLoader,
       },
     ],
   },

src/routes/banks.tsx

@@ -0,0 +1,33 @@
+import { useLoaderData } from "react-router";
+
+export async function loader() {
+  return await fetch(`http://localhost:9000/banks`).then((response) => {
+    return response.json();
+  });
+}
+
+export default function Banks() {
+  const data: {
+    id: string;
+    name: string;
+  }[] = useLoaderData<typeof loader>();
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">id</th>
+          <th scope="col">name</th>
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((t) => (
+          <tr>
+            <th>{t.id}</th>
+            <td>{t.name}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

src/routes/categories.tsx

@@ -0,0 +1,33 @@
+import { useLoaderData } from "react-router";
+
+export async function loader() {
+  return await 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>();
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">name</th>
+          <th scope="col">group</th>
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((t) => (
+          <tr>
+            <td>{t.name}</td>
+            <td>{t.group?.name}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

src/routes/transactions.tsx

@@ -7,7 +7,7 @@ export async function loader() {
 }
 
 export default function Transactions() {
-  const transactions: {
+  const data: {
     id: number;
     date: string;
     description: string;
@@ -24,7 +24,7 @@ export default function Transactions() {
         </tr>
       </thead>
       <tbody>
-        {transactions.map((t) => (
+        {data.map((t) => (
           <tr>
             <th>{t.date}</th>
             <td>{t.description}</td>