49 lines
1.5 KiB
Plaintext
49 lines
1.5 KiB
Plaintext
import React, { useEffect, useState } from "react";
|
|
import axios from "axios";
|
|
|
|
export default function Stacks() {
|
|
const [stacks, setStacks] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState("");
|
|
|
|
useEffect(() => {
|
|
const fetchStacks = async () => {
|
|
try {
|
|
const res = await axios.get("/api/stacks"); // Vite-Proxy auf Backend
|
|
const sortedStacks = res.data.sort((a, b) => a.Name.localeCompare(b.Name));
|
|
setStacks(sortedStacks);
|
|
} catch (err) {
|
|
console.error("❌ Fehler beim Abrufen der Stacks:", err);
|
|
setError("Fehler beim Laden der Stacks");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchStacks();
|
|
}, []);
|
|
|
|
if (loading) return <p className="text-gray-600">Lade Stacks...</p>;
|
|
if (error) return <p className="text-red-500">{error}</p>;
|
|
|
|
return (
|
|
<ul className="space-y-4">
|
|
{stacks.map((stack) => (
|
|
<li
|
|
key={stack.Id}
|
|
className="p-4 bg-white rounded-xl shadow hover:shadow-md transition flex justify-between items-center"
|
|
>
|
|
<div>
|
|
<p className="text-lg font-semibold text-gray-800">{stack.Name}</p>
|
|
<p className="text-sm text-gray-500">ID: {stack.Id}</p>
|
|
</div>
|
|
<div className="text-2xl">
|
|
{stack.Updated ? "✅" : "⚠️"}
|
|
</div>
|
|
</li>
|
|
))}
|
|
{stacks.length === 0 && <p className="text-gray-500">Keine Stacks gefunden.</p>}
|
|
</ul>
|
|
);
|
|
}
|