From 98535aad7ac6a9d4afbbc08d2ba2eb3f180f0c9d Mon Sep 17 00:00:00 2001
From: Felix Zett <fezett@gmail.com>
Date: Sat, 30 Aug 2025 20:35:53 +0200
Subject: [PATCH] feat: refactor App component to integrate React Router for
 navigation

---
 frontend/src/App.tsx | 136 +++++++++++++++++++++----------------------
 1 file changed, 66 insertions(+), 70 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index a64a732..3565c90 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
 import { getSeed, getTrips, getTripItems, toggleTripItem } from "./api";
 import ItemsPage from "./pages/ItemsPage";
 
@@ -24,79 +25,74 @@ export default function App() {
     }
   }, [view]);
 
-  if (view === "items") {
-    return (
-      <div className="p-4 max-w-4xl mx-auto">
-        <div className="mb-4">
-          <button
-            onClick={() => setView("trips")}
-            className="bg-gray-500 text-white px-3 py-1 rounded"
-          >
-            ← Zurück zu Trips
-          </button>
-        </div>
-        <ItemsPage />
-      </div>
-    );
-  }
-
   return (
-    <div className="p-4 max-w-2xl mx-auto">
-      <h1 className="text-2xl font-bold mb-4">Packlist</h1>
+    <Router>
+      <div className="p-4 max-w-2xl mx-auto">
+        <h1 className="text-2xl font-bold mb-4">Packlist</h1>
 
-      <div className="flex gap-2 mb-4">
-        <button
-          className="bg-blue-500 text-white px-4 py-2 rounded"
-          onClick={async () => {
-            await getSeed();
-            await loadTrips();
-          }}
-        >
-          Seed-Daten erzeugen
-        </button>
-        <button
-          className="bg-green-500 text-white px-4 py-2 rounded"
-          onClick={() => setView("items")}
-        >
-          Alle Items
-        </button>
-      </div>
-
-      {trips.map((trip) => (
-        <div key={trip.id} className="border rounded p-2 mb-4">
-          <div className="flex justify-between items-center">
-            <div>
-              <h2 className="font-bold">{trip.name}</h2>
-              <p>
-                {trip.start_date} – {trip.end_date}
-              </p>
-            </div>
-            <button
-              className="text-sm text-blue-500 underline"
-              onClick={() => loadItems(trip.id)}
-            >
-              Packliste anzeigen
+        <div className="flex gap-2 mb-4">
+          <button
+            className="bg-blue-500 text-white px-4 py-2 rounded"
+            onClick={async () => {
+              await getSeed();
+              await loadTrips();
+            }}
+          >
+            Seed-Daten erzeugen
+          </button>
+          <Link to="/items">
+            <button className="bg-green-500 text-white px-4 py-2 rounded">
+              Alle Items
             </button>
-          </div>
-          {items[trip.id] && (
-            <ul className="mt-2">
-              {items[trip.id].map((item) => (
-                <li key={item.id} className="flex items-center gap-2">
-                  <input
-                    type="checkbox"
-                    checked={item.checked}
-                    onChange={async () => {
-                      await toggleTripItem(item.id);
-                      await loadItems(trip.id);
-                    }}
-                  />
-                  <span>{item.name_calculated}</span>
-                </li>
-              ))}
-            </ul>
-          )}
+          </Link>
         </div>
-      ))}
-    </div>
+
+        <Routes>
+          <Route
+            path="/"
+            element={
+              <>
+                {trips.map((trip) => (
+                  <div key={trip.id} className="border rounded p-2 mb-4">
+                    <div className="flex justify-between items-center">
+                      <div>
+                        <h2 className="font-bold">{trip.name}</h2>
+                        <p>
+                          {trip.start_date} – {trip.end_date}
+                        </p>
+                      </div>
+                      <button
+                        className="text-sm text-blue-500 underline"
+                        onClick={() => loadItems(trip.id)}
+                      >
+                        Packliste anzeigen
+                      </button>
+                    </div>
+                    {items[trip.id] && (
+                      <ul className="mt-2">
+                        {items[trip.id].map((item) => (
+                          <li key={item.id} className="flex items-center gap-2">
+                            <input
+                              type="checkbox"
+                              checked={item.checked}
+                              onChange={async () => {
+                                await toggleTripItem(item.id);
+                                await loadItems(trip.id);
+                              }}
+                            />
+                            <span>{item.name_calculated}</span>
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                  </div>
+                ))}
+              </>
+            }
+          />
+          <Route path="/items" element={<ItemsPage />} />
+        </Routes>
+      </div>
+    </Router>
   );
 }