diff --git a/01-frontend/src/App.tsx b/01-frontend/src/App.tsx index df1b203..0f595ff 100644 --- a/01-frontend/src/App.tsx +++ b/01-frontend/src/App.tsx @@ -38,6 +38,3 @@ export default function App() { ) } - -const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); -root.render(); diff --git a/01-frontend/src/helper/homepage/ItemCard.tsx b/01-frontend/src/helper/homepage/ItemCard.tsx index 617f242..3839ef2 100644 --- a/01-frontend/src/helper/homepage/ItemCard.tsx +++ b/01-frontend/src/helper/homepage/ItemCard.tsx @@ -39,9 +39,6 @@ export default function ItemCard({ item }: { item: Item }) { {(item.price * (1 - item.discount / 100)).toFixed(2)} € - - - {item.stock > 10 ? ( @@ -59,6 +56,11 @@ export default function ItemCard({ item }: { item: Item }) { )} + + + + + ) diff --git a/01-frontend/src/main.tsx b/01-frontend/src/main.tsx index 851ceeb..ba8e3cf 100644 --- a/01-frontend/src/main.tsx +++ b/01-frontend/src/main.tsx @@ -1,11 +1,17 @@ import './components/i18n/i18n'; -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import './index.css' -import App from './App.tsx' +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; +import './index.css'; +import App from './App.tsx'; -createRoot(document.getElementById('root')!).render( - - - , -) +console.log("main.tsx wurde geladen"); + +const rootElement = document.getElementById('root'); +if (!rootElement) throw new Error("Root element not found"); + +const root = createRoot(rootElement); +root.render( + + + +); \ No newline at end of file diff --git a/01-frontend/src/pages/Home.tsx b/01-frontend/src/pages/Home.tsx index 94de8b4..210f42a 100644 --- a/01-frontend/src/pages/Home.tsx +++ b/01-frontend/src/pages/Home.tsx @@ -4,6 +4,7 @@ import Item from "../components/Item"; import FilterItem from "../helper/homepage/FilterItem"; import ItemCard from "../helper/homepage/ItemCard"; import "./pages.css"; // Import der CSS-Datei +import { useNavigate } from "react-router-dom" import { useLocation } from "react-router-dom"; import { useTranslation } from "react-i18next"; import PriceSlider from "../helper/homepage/PriceSlider"; @@ -11,6 +12,7 @@ import PriceSlider from "../helper/homepage/PriceSlider"; export default function Home() { const { t } = useTranslation(); + const navigate = useNavigate(); const items: Item[] = [ { @@ -174,9 +176,13 @@ export default function Home() { }, [location.search]); const handleCategoryChange = (category: string) => { - setSelectedCategory(category); - // Optional: URL aktualisieren - // navigate(`/?category=${encodeURIComponent(category)}`); + if (category === "") { + setSelectedCategory(null); + navigate(`/`); + } else { + setSelectedCategory(category); + navigate(`/?category=${encodeURIComponent(category)}`); + } }; // Handler für die Pagination @@ -200,20 +206,28 @@ export default function Home() { const filteredCount = filteredItems.length; - // Aktualisiere die Anzahl der Karten bei Größenänderung +// Aktualisiert die sichtbaren Items bei Seitenwechsel oder Fenstergrößenänderung useEffect(() => { const updateItems = () => { const newItemsPerPage = calculateItemsPerPage(); setItemsPerPage(newItemsPerPage); const startIndex = (currentPage - 1) * newItemsPerPage; - setVisibleItems(filteredItems.slice(startIndex, startIndex + newItemsPerPage)); + const newVisibleItems = filteredItems.slice(startIndex, startIndex + newItemsPerPage); + + setVisibleItems(prev => (JSON.stringify(prev) !== JSON.stringify(newVisibleItems) ? newVisibleItems : prev)); }; updateItems(); - window.addEventListener("resize", updateItems); - return () => window.removeEventListener("resize", updateItems); - }, [currentPage, filteredItems]); + + const handleResize = () => { + updateItems(); + }; + + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, [currentPage, priceRange, selectedCategory, selectedRating]); + // Dynamische Berechnung der Anzahl der Items pro Seite basierend auf der Fensterbreite const calculateItemsPerPage = () => {