From 4743bed67feef5ab07d606335d08058b91c4c6f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lu=C3=ADs=20Murta?= <luis@murta.dev>
Date: Sun, 23 Mar 2025 01:10:46 +0000
Subject: [PATCH] Adds banks and categories components

---
 src/root.tsx                | 24 +++++++++++++++++++-----
 src/routes.ts               | 18 ++++++++++++++++--
 src/routes/banks.tsx        | 33 +++++++++++++++++++++++++++++++++
 src/routes/categories.tsx   | 33 +++++++++++++++++++++++++++++++++
 src/routes/transactions.tsx |  4 ++--
 5 files changed, 103 insertions(+), 9 deletions(-)
 create mode 100644 src/routes/banks.tsx
 create mode 100644 src/routes/categories.tsx

diff --git a/src/root.tsx b/src/root.tsx
index f854b94..dc29bda 100644
--- a/src/root.tsx
+++ b/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>
     </>
   );
 }
diff --git a/src/routes.ts b/src/routes.ts
index 2646ee8..a372e34 100644
--- a/src/routes.ts
+++ b/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,
       },
     ],
   },
diff --git a/src/routes/banks.tsx b/src/routes/banks.tsx
new file mode 100644
index 0000000..67bdf6b
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/routes/categories.tsx b/src/routes/categories.tsx
new file mode 100644
index 0000000..f1e1f49
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/routes/transactions.tsx b/src/routes/transactions.tsx
index 803c2f7..58ac78d 100644
--- a/src/routes/transactions.tsx
+++ b/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>