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 = () => {