diff --git a/01-frontend/src/pages/Home.tsx b/01-frontend/src/pages/Home.tsx index d1608a8..94de8b4 100644 --- a/01-frontend/src/pages/Home.tsx +++ b/01-frontend/src/pages/Home.tsx @@ -50,7 +50,7 @@ export default function Home() { price: 30, stock: 0, category: "TechnicalComponents", - rating: 4.8, + rating: 1.8, discount: 15, }, { @@ -60,7 +60,7 @@ export default function Home() { price: 30, stock: 300, category: "TechnicalComponents", - rating: 4.8, + rating: 2.2, discount: 15, }, { @@ -70,7 +70,7 @@ export default function Home() { price: 30, stock: 300, category: "TechnicalComponents", - rating: 4.8, + rating: 3.8, discount: 15, }, { @@ -90,7 +90,7 @@ export default function Home() { price: 30, stock: 300, category: "TechnicalComponents", - rating: 4.8, + rating: 3.4, discount: 15, }, { @@ -100,7 +100,7 @@ export default function Home() { price: 30, stock: 300, category: "TechnicalComponents", - rating: 4.8, + rating: 2.9, discount: 15, }, { @@ -110,7 +110,7 @@ export default function Home() { price: 30, stock: 300, category: "TechnicalComponents", - rating: 4.8, + rating: 4.4, discount: 15, }, { @@ -120,7 +120,7 @@ export default function Home() { price: 30, stock: 300, category: "TechnicalComponents", - rating: 4.8, + rating: 4.0, discount: 15, }, { @@ -130,7 +130,7 @@ export default function Home() { price: 50, stock: 300, category: "Other", - rating: 4.8, + rating: 1.0, discount: 0, }, // Weitere Items hinzufügen @@ -184,34 +184,36 @@ export default function Home() { setCurrentPage(page); }; + const filteredItems = items + .filter(item => { + const discountedPrice = item.price * (1 - item.discount / 100); + return discountedPrice >= priceRange[0] && discountedPrice <= priceRange[1]; + }) + .filter(item => { + if (!selectedCategory) return true; + return item.category === selectedCategory; + }) + .filter(item => { + if (!selectedRating) return true; + return Math.round(item.rating) >= Number(selectedRating); + }); + + const filteredCount = filteredItems.length; + // Aktualisiere die Anzahl der Karten bei Größenänderung useEffect(() => { const updateItems = () => { const newItemsPerPage = calculateItemsPerPage(); setItemsPerPage(newItemsPerPage); + const startIndex = (currentPage - 1) * newItemsPerPage; - - const filtered = items - .filter(item => { - const discountedPrice = item.price * (1 - item.discount / 100); - return discountedPrice >= priceRange[0] && discountedPrice <= priceRange[1]; - }) - .filter(item => { - if (!selectedCategory) return true; - return item.category === selectedCategory; - }) - .filter(item => { - if (!selectedRating) return true; - return Math.floor(item.rating) === Number(selectedRating); - }); - - setVisibleItems(filtered.slice(startIndex, startIndex + newItemsPerPage)); + setVisibleItems(filteredItems.slice(startIndex, startIndex + newItemsPerPage)); }; - updateItems(); // Initialer Aufruf - window.addEventListener("resize", updateItems); // Event-Listener hinzufügen - return () => window.removeEventListener("resize", updateItems); // Event-Listener entfernen - }, [currentPage]); + updateItems(); + window.addEventListener("resize", updateItems); + return () => window.removeEventListener("resize", updateItems); + }, [currentPage, filteredItems]); // Dynamische Berechnung der Anzahl der Items pro Seite basierend auf der Fensterbreite const calculateItemsPerPage = () => { @@ -255,15 +257,14 @@ export default function Home() { - ); }