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 React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import { getSeed, getTrips, getTripItems, toggleTripItem } from "./api"; import { getSeed, getTrips, getTripItems, toggleTripItem } from "./api";
import ItemsPage from "./pages/ItemsPage"; import ItemsPage from "./pages/ItemsPage";
@ -24,79 +25,74 @@ export default function App() {
} }
}, [view]); }, [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 ( return (
<div className="p-4 max-w-2xl mx-auto"> <Router>
<h1 className="text-2xl font-bold mb-4">Packlist</h1> <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"> <div className="flex gap-2 mb-4">
<button <button
className="bg-blue-500 text-white px-4 py-2 rounded" className="bg-blue-500 text-white px-4 py-2 rounded"
onClick={async () => { onClick={async () => {
await getSeed(); await getSeed();
await loadTrips(); await loadTrips();
}} }}
> >
Seed-Daten erzeugen Seed-Daten erzeugen
</button> </button>
<button <Link to="/items">
className="bg-green-500 text-white px-4 py-2 rounded" <button className="bg-green-500 text-white px-4 py-2 rounded">
onClick={() => setView("items")} Alle 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
</button> </button>
</div> </Link>
{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> </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>
); );
} }