bugfix on homepage (filter and buttons)

01-frontend/src/App.tsx

@@ -38,6 +38,3 @@ export default function App() {
       </StyledEngineProvider>
   )
 }
-
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-root.render(<App />);

01-frontend/src/helper/homepage/ItemCard.tsx

@@ -39,9 +39,6 @@ export default function ItemCard({ item }: { item: Item }) {
                         <Rating name="half-rating" readOnly defaultValue={item.rating} precision={0.5} />
                         <Typography variant="body2" sx={{ color: 'text.secondary' }} className="item-description">
                             {(item.price * (1 - item.discount / 100)).toFixed(2)} €
-                            <IconButton aria-label={t('addToCart')} onClick={handleAddToCart}>
-                                <AddShoppingCart />
-                            </IconButton>
                         </Typography>
                         
                         {item.stock > 10 ? (
@@ -59,6 +56,11 @@ export default function ItemCard({ item }: { item: Item }) {
                         )}
                     </CardContent>
                 </CardActionArea>
+                <CardContent>
+                    <IconButton aria-label={t('addToCart')} onClick={handleAddToCart}>
+                        <AddShoppingCart />
+                    </IconButton>
+                </CardContent>
             </Card>
         </Paper>
     )

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(
     <StrictMode>
         <App />
-  </StrictMode>,
-)
+    </StrictMode>
+);

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) => {
+        if (category === "") {
+            setSelectedCategory(null);
+            navigate(`/`);
+        } else {
             setSelectedCategory(category);
-        // Optional: URL aktualisieren
-        // navigate(`/?category=${encodeURIComponent(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 = () => {