use of real items and fixed "allToCart" button

01-frontend/src/pages/FSComponents.tsx

@@ -1,7 +1,8 @@
-import { Box, Button, Typography } from "@mui/material";
+import { Box, Button, Typography, useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useState } from "react";
-import "./pages.css";
+import { useQuery } from "@tanstack/react-query";
+import { useBasket } from "../helper/BasketProvider";
 import ItemCard from "../helper/homepage/ItemCard";
 import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
 
@@ -16,35 +17,69 @@ import connectors from '../assets/fscomponents/fs_components_7.png';
 import clips from '../assets/fscomponents/fs_components_8.png';
 import arduino from '../assets/fscomponents/fs_components_9.png';
 
-export default function FSComponents() {
+interface Item {
+    id: number;
+    uuid: string;
+    name: string;
+    price100: number;
+    discount100: number;
+    rating: number;
+    stock: number;
+    description: string;
+    category: string;
+}
 
+// API-Funktion, Items laden (URL anpassen!)
+async function fetchItemList(): Promise<Item[]> {
+    const response = await fetch('/api/items');
+    if (!response.ok) throw new Error('Failed to fetch items');
+    return response.json();
+}
+
+export default function FSComponents() {
     const { t } = useTranslation();
+    const theme = useTheme();
+    const { addToBasket } = useBasket();
     const [hoverIndex, setHoverIndex] = useState<number | null>(null);
 
-    const exampleItems = [
+    // Gewünschte IDs
-        { id: "1", uuid: "uuid-1", name: "Set: Air + Light", price100: 12999, discount100: 0, rating: 9, stock: 12, description: "Test", category: "TechnicalComponents" },
+    const wantedIds = [60, 67, 68, 69, 70, 71, 72, 73, 74, 75];
-        { id: "2", uuid: "uuid-2", name: "Set: Hoses", price100: 4999, discount100: 50, rating: 3, stock: 5, description: "Test", category: "TechnicalComponents" },
-        { id: "3", uuid: "uuid-3", name: "Set: Pipes", price100: 8999, discount100: 0, rating: 5, stock: 0, description: "Test", category: "TechnicalComponents" },
-        { id: "4", uuid: "uuid-4", name: "Set: Pumps", price100: 2999, discount100: 20, rating: 8, stock: 3, description: "Test", category: "GardenSupplies" },
-        { id: "5", uuid: "uuid-5", name: "Set: Sensors", price100: 1999, discount100: 0, rating: 10, stock: 25, description: "Test", category: "TechnicalComponents" },
-        { id: "6", uuid: "uuid-6", name: "Set: Shelf", price100: 1099, discount100: 0, rating: 4, stock: 15, description: "Test", category: "GardenSupplies" },
-        { id: "7", uuid: "uuid-7", name: "Set: Connectors", price100: 799, discount100: 0, rating: 7, stock: 9, description: "Test", category: "TechnicalComponents" },
-        { id: "8", uuid: "uuid-8", name: "Set: Clips", price100: 799, discount100: 0, rating: 7, stock: 9, description: "Test", category: "TechnicalComponents" },
-        { id: "9", uuid: "uuid-9", name: "Arduino", price100: 799, discount100: 0, rating: 7, stock: 9, description: "Test", category: "TechnicalComponents" }
-    ];
 
+    // Daten mit react-query laden
+    const { data = [], isLoading, error } = useQuery<Item[]>({
+        queryKey: ['fetchItemList'],
+        queryFn: fetchItemList,
+        retry: 3,
+        retryDelay: 1000,
+    });
+
+    // Filter auf wantedIds
+    const filteredItems = data.filter(item => wantedIds.includes(item.id));
+
+    // Button-Funktion: alle gefilterten Items in den Warenkorb packen
+    const handleAddAllToCart = () => {
+        filteredItems.forEach(item => {
+            addToBasket(item, 1);
+        });
+    };
+
+    // Zuordnung Bilder (Annahme: 9 Bilder für 9 Items)
     const componentImages = [
+        arduino,
+        farmingStation,
         environment,
-        hoses,
         pipes,
         pumps,
         sensors,
         shelf,
+        hoses,
         connectors,
         clips,
-        arduino
     ];
 
+    if (isLoading) return <Typography>{t('loading')}</Typography>;
+    if (error) return <Typography color="error">{t('errorLoadingItems')}</Typography>;
+
     return (
         <Box sx={{ width: '100%', display: 'flex', maxWidth: 1600, mx: 'auto', pt: 2, height: '100vh' }}>
             {/* Bild links */}
@@ -59,7 +94,8 @@ export default function FSComponents() {
                 padding: 2,
                 overflow: 'hidden',
             }}>
-                <Box component="img"
+                <Box
+                    component="img"
                     src={hoverIndex !== null ? componentImages[hoverIndex] : farmingStation}
                     alt={t('componentsFarmingStation')}
                     sx={{
@@ -68,11 +104,16 @@ export default function FSComponents() {
                         maxHeight: '80vh',
                         objectFit: 'contain',
                         borderRadius: 2,
-                         border: theme => `4px solid ${theme.palette.primary.main}`,
+                        border: `4px solid ${theme.palette.primary.main}`,
-                         marginBottom: 2
+                        marginBottom: 2,
                     }}
                 />
-                <Button variant="contained" fullWidth startIcon={<AddShoppingCartIcon />}>
+                <Button
+                    variant="contained"
+                    fullWidth
+                    startIcon={<AddShoppingCartIcon />}
+                    onClick={handleAddAllToCart}
+                >
                     {t('addAllToCart')}
                 </Button>
             </Box>
@@ -90,7 +131,7 @@ export default function FSComponents() {
                     </Typography>
                 </Box>
                 <Box className="cardgrid">
-                    {exampleItems.map((item, index) => (
+                    {filteredItems.map((item, index) => (
                         <div
                             key={item.id}
                             onMouseEnter={() => setHoverIndex(index)}