felix/packlist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: refactor App component to integrate React Router for navigation

Browse source
This commit is contained in:
Felix Zett 2025-08-30 20:35:53 +02:00
parent dd2f62593a
commit 98535aad7a
1 changed files with 66 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

136
frontend/src/App.tsx
View file

@ -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>
);
}