Added useQuery for ItemList reload on.

01-frontend/package-lock.json

@@ -12,6 +12,7 @@
         "@emotion/styled": "^11.14.0",
         "@mui/icons-material": "^7.0.2",
         "@mui/material": "^7.0.2",
+        "@tanstack/react-query": "^5.79.2",
         "i18next": "^25.2.0",
         "i18next-browser-languagedetector": "^8.1.0",
         "i18next-http-backend": "^3.0.2",
@@ -1744,6 +1745,32 @@
         "win32"
       ]
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.79.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.79.2.tgz",
+      "integrity": "sha512-kr+KQrBuqd6495eP9S41BoftFI1H50XA9O+6FmbnTx/Te6bjiq1mj8rt9rJjW3YZSO2aaUNUres0TWesJW1j1g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.79.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.79.2.tgz",
+      "integrity": "sha512-kadeprsH6bWuhHCpqukXHRykJkxcLBxAaF0cQ05yawPmLZ/KiCpR1DyQenonF7A/70rnRUxhJD0RJejqk9wImQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.79.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",

01-frontend/package.json

@@ -15,6 +15,7 @@
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^7.0.2",
     "@mui/material": "^7.0.2",
+    "@tanstack/react-query": "^5.79.2",
     "i18next": "^25.2.0",
     "i18next-browser-languagedetector": "^8.1.0",
     "i18next-http-backend": "^3.0.2",

01-frontend/src/App.tsx

@@ -1,21 +1,25 @@
-import ReactDOM from 'react-dom/client';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { StyledEngineProvider } from '@mui/material/styles';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import './App.css';
+import { BasketProvider } from './helper/BasketProvider';
 import NavBar from './helper/navbar/NavBar';
+import Account from './pages/Account';
+import Category from './pages/Category';
+import Contact from './pages/Contact';
 import Home from './pages/Home';
 import NoPage from './pages/NoPage';
-import Product from './pages/Product';
-import Payment from './pages/Payment';
-import Contact from './pages/Contact';
-import Category from './pages/Category';
-import { BasketProvider } from './helper/BasketProvider';
-import { CustomThemeProvider } from './theme/ThemeContext';
 import Orders from './pages/Orders';
-import Account from './pages/Account';
+import Payment from './pages/Payment';
+import Product from './pages/Product';
+import { CustomThemeProvider } from './theme/ThemeContext';
 
 export default function App() {
+
+  const queryClient = new QueryClient();
+
   return (
+    <QueryClientProvider client={queryClient}>
       <StyledEngineProvider injectFirst>
         <CustomThemeProvider>
           <BasketProvider>
@@ -36,5 +40,6 @@ export default function App() {
           </BasketProvider>
         </CustomThemeProvider>
       </StyledEngineProvider>
+    </QueryClientProvider>
   )
 }

01-frontend/src/components/Item.tsx

@@ -1,12 +1,13 @@
 type Item = {
     id: string;
+    uuid: string;
     name: string;
     description: string;
-    price: number;
+    price100: number;
     stock: number;
     category: string;
     rating: number;
-    discount: number;
+    discount100: number;
 };
 
 export default Item;

01-frontend/src/helper/NavBar.css

@@ -0,0 +1,70 @@
+/* Navbar styles */
+.navbar {
+    background-color: #1976d2; /* Material-UI Primary Color */
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+    position: absolute;
+    top: 0;
+    height: 3rem;
+}
+
+/* Logo styles */
+.navbar-logo {
+    font-family: 'Roboto', sans-serif;
+    font-weight: bold;
+    color: white;
+    text-decoration: none;
+    margin-right: auto;
+}
+
+/* Menu styles */
+.navbar-menu {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+}
+
+/* Search styles */
+.search {
+    position: relative;
+    border-radius: 4px;
+    background-color: rgba(255, 255, 255, 0.15);
+}
+.search:hover {
+    background-color: rgba(255, 255, 255, 0.25);
+}
+.search-icon-wrapper {
+    padding: 8px;
+    height: 100%;
+    position: absolute;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.search-input {
+    color: inherit;
+    width: 100%;
+    padding: 8px 8px 8px 40px;
+    font-size: 1rem;
+}
+
+/* User avatar styles */
+.navbar-user {
+    margin-left: 16px;
+}
+
+/* Typography styles */
+.navbar-typography {
+    font-family: 'monospace';
+    font-weight: 700;
+    letter-spacing: .3rem;
+    color: inherit;
+    text-decoration: none;
+}
+
+/* Button styles */
+.navbar-button {
+    margin: 2;
+    color: white;
+    display: block;
+}

01-frontend/src/helper/NavBar.tsx

@@ -0,0 +1,216 @@
+import * as React from 'react';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import Menu from '@mui/material/Menu';
+import MenuIcon from '@mui/icons-material/Menu';
+import Container from '@mui/material/Container';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
+import MenuItem from '@mui/material/MenuItem';
+import AdbIcon from '@mui/icons-material/Adb';
+import { alpha, InputBase, styled } from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+import { useNavigate } from 'react-router-dom';
+
+const pages = ['Categories', 'Checkout', 'Contact'];
+const settings = ['Account', 'Orders', 'Logout'];
+
+const Search = styled('div')(({ theme }) => ({
+    position: 'relative',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: alpha(theme.palette.common.white, 0.15),
+    '&:hover': {
+      backgroundColor: alpha(theme.palette.common.white, 0.25),
+    },
+    marginLeft: 0,
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      marginLeft: theme.spacing(1),
+      width: 'auto',
+    },
+  }));
+  
+  const SearchIconWrapper = styled('div')(({ theme }) => ({
+    padding: theme.spacing(0, 2),
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }));
+  
+  const StyledInputBase = styled(InputBase)(({ theme }) => ({
+    color: 'inherit',
+    width: '100%',
+    '& .MuiInputBase-input': {
+      padding: theme.spacing(1, 1, 1, 0),
+      // vertical padding + font size from searchIcon
+      paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+      transition: theme.transitions.create('width'),
+      [theme.breakpoints.up('sm')]: {
+        width: '12ch',
+        '&:focus': {
+          width: '20ch',
+        },
+      },
+    },
+  }));
+
+export default function NavBar() {
+    const navigate = useNavigate();
+    const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);
+    const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(null);
+
+    const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
+        setAnchorElNav(event.currentTarget);
+    };
+    const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
+        setAnchorElUser(event.currentTarget);
+    };
+
+    const handleCloseNavMenu = (link: string) => {
+        setAnchorElNav(null);
+        navigate(`/${link.toLowerCase()}`);
+    };
+
+    const handleCloseUserMenu = () => {
+        setAnchorElUser(null);
+    };
+
+
+    return (
+        <AppBar>
+            <Container maxWidth="xl">
+                <Toolbar disableGutters>
+                    <AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
+                    <Typography
+                        variant="h6"
+                        noWrap
+                        component="a"
+                        href="/"
+                        sx={{
+                            mr: 2,
+                            display: { xs: 'none', md: 'flex' },
+                            fontFamily: 'monospace',
+                            fontWeight: 700,
+                            letterSpacing: '.3rem',
+                            color: 'inherit',
+                            textDecoration: 'none',
+                        }}
+                    >
+                        Digitaler Produktionsshop
+                    </Typography>
+
+                    <Search>
+                        <SearchIconWrapper>
+                            <SearchIcon />
+                        </SearchIconWrapper>
+                        <StyledInputBase
+                            placeholder="Search…"
+                            inputProps={{ 'aria-label': 'search' }}
+                        />
+                    </Search>
+
+                    <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
+                        <IconButton
+                            size="large"
+                            aria-label="account of current user"
+                            aria-controls="menu-appbar"
+                            aria-haspopup="true"
+                            onClick={handleOpenNavMenu}
+                            color="inherit"
+                        >
+                            <MenuIcon />
+                        </IconButton>
+                        <Menu
+                            id="menu-appbar"
+                            anchorEl={anchorElNav}
+                            anchorOrigin={{
+                                vertical: 'bottom',
+                                horizontal: 'left',
+                            }}
+                            keepMounted
+                            transformOrigin={{
+                                vertical: 'top',
+                                horizontal: 'left',
+                            }}
+                            open={Boolean(anchorElNav)}
+                            onClose={handleCloseNavMenu}
+                            sx={{ display: { xs: 'block', md: 'none' } }}
+                        >
+                            {pages.map((page) => (
+                                <MenuItem key={page} onClick={() => handleCloseNavMenu(page)}>
+                                    <Typography sx={{ textAlign: 'center' }}>{page}</Typography>
+                                </MenuItem>
+                            ))}
+                        </Menu>
+                    </Box>
+                    <AdbIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
+                    <Typography
+                        variant="h5"
+                        noWrap
+                        component="a"
+                        href="/"
+                        sx={{
+                            mr: 2,
+                            display: { xs: 'flex', md: 'none' },
+                            flexGrow: 1,
+                            fontFamily: 'monospace',
+                            fontWeight: 700,
+                            letterSpacing: '.3rem',
+                            color: 'inherit',
+                            textDecoration: 'none',
+                        }}
+                    >
+                        DPS
+                    </Typography>
+                    <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
+                        {pages.map((page) => (
+                            <Button
+                                key={page}
+                                onClick={() => handleCloseNavMenu(page)}
+                                sx={{ my: 2, color: 'white', display: 'block' }}
+                            >
+                                {page}
+                            </Button>
+                        ))}
+                    </Box>
+                    <Box sx={{ flexGrow: 0 }}>
+                        <Tooltip title="Open settings">
+                            <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                                <Avatar alt="Florian Speicher" src="/static/images/avatar/2.jpg" />
+                            </IconButton>
+                        </Tooltip>
+                        <Menu
+                            sx={{ mt: '45px' }}
+                            id="menu-appbar"
+                            anchorEl={anchorElUser}
+                            anchorOrigin={{
+                                vertical: 'top',
+                                horizontal: 'right',
+                            }}
+                            keepMounted
+                            transformOrigin={{
+                                vertical: 'top',
+                                horizontal: 'right',
+                            }}
+                            open={Boolean(anchorElUser)}
+                            onClose={handleCloseUserMenu}
+                        >
+                            {settings.map((setting) => (
+                                <MenuItem key={setting} onClick={handleCloseUserMenu}>
+                                    <Typography sx={{ textAlign: 'center' }}>{setting}</Typography>
+                                </MenuItem>
+                            ))}
+                        </Menu>
+                    </Box>
+                </Toolbar>
+            </Container>
+        </AppBar>
+    );
+}

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

@@ -39,7 +39,7 @@ export default function ItemCard({ item }: { item: Item }) {
                         <Rating name="half-rating" readOnly defaultValue={item.rating} precision={0.5} />
                         <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
                             <Typography variant="body2" sx={{ color: 'text.secondary' }} className="item-description">
-                                {(item.price * (1 - item.discount / 100)).toFixed(2)} €
+                                {(item.price100 * (1 - item.discount100 / 100)).toFixed(2)} €
                             </Typography>
                             <IconButton
                                 aria-label={t('addToCart')}

01-frontend/src/helper/query/Queries.tsx

@@ -0,0 +1,12 @@
+// api/queries.js
+
+export const fetchItemList = async () => {
+    const response = await fetch('http://localhost:8085/item/all');
+    console.log("API Response:", response);
+    if (!response.ok) {
+        throw new Error('Fehler beim Laden der Items');
+    }
+    const data = await response.json();
+    console.log("Fetched Items:", data);
+    return data;
+};

01-frontend/src/pages/Home.tsx

@@ -1,12 +1,14 @@
-import { Box } from "@mui/material";
+import { Box, Typography } from "@mui/material";
-import {useCallback, useEffect, useRef, useState} from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation, useNavigate } from "react-router-dom";
 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 { useLocation, useNavigate } from "react-router-dom"
-import { useTranslation } from "react-i18next";
 import PriceSlider from "../helper/homepage/PriceSlider";
+import { fetchItemList } from '../helper/query/Queries';
+import "./pages.css"; // Import der CSS-Datei
 
 export default function Home() {
 
@@ -14,367 +16,13 @@ export default function Home() {
     const navigate = useNavigate();
     const location = useLocation();
 
-    const items: Item[] = [
+    const categoriesFilter = useMemo(() => [
-        {
+        { value: "", label: t("all") },
-            id: "1",
-            name: "Item 1",
-            description: "Description 1",
-            price: 10,
-            stock: 100,
-            category: "Seeds",
-            rating: 4.5,
-            discount: 10,
-        },
-        {
-            id: "2",
-            name: "Item 2",
-            description: "Description 2",
-            price: 20,
-            stock: 9,
-            category: "GardenSupplies",
-            rating: 4.0,
-            discount: 20,
-        },
-        {
-            id: "3",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 10,
-            category: "TechnicalComponents",
-            rating: 4.8,
-            discount: 15,
-        },
-        {
-            id: "4",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 0,
-            category: "TechnicalComponents",
-            rating: 1.8,
-            discount: 15,
-        },
-        {
-            id: "5",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 300,
-            category: "TechnicalComponents",
-            rating: 2.2,
-            discount: 15,
-        },
-        {
-            id: "6",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 300,
-            category: "TechnicalComponents",
-            rating: 3.8,
-            discount: 15,
-        },
-        {
-            id: "7",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 300,
-            category: "TechnicalComponents",
-            rating: 4.8,
-            discount: 15,
-        },
-        {
-            id: "8",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 300,
-            category: "TechnicalComponents",
-            rating: 3.4,
-            discount: 15,
-        },
-        {
-            id: "9",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 300,
-            category: "TechnicalComponents",
-            rating: 2.9,
-            discount: 15,
-        },
-        {
-            id: "10",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 300,
-            category: "TechnicalComponents",
-            rating: 4.4,
-            discount: 15,
-        },
-        {
-            id: "11",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 300,
-            category: "TechnicalComponents",
-            rating: 4.0,
-            discount: 15,
-        },
-        {
-            id: "12",
-            name: "Item 4",
-            description: "Description 3",
-            price: 50,
-            stock: 300,
-            category: "Other",
-            rating: 1.0,
-            discount: 0,
-        },
-        {
-            id: "101",
-            name: "Item 1",
-            description: "Description 1",
-            price: 10,
-            stock: 100,
-            category: "Seeds",
-            rating: 4.5,
-            discount: 10,
-        },
-        {
-            id: "102",
-            name: "Item 2",
-            description: "Description 2",
-            price: 20,
-            stock: 9,
-            category: "GardenSupplies",
-            rating: 4.0,
-            discount: 20,
-        },
-        {
-            id: "103",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 10,
-            category: "TechnicalComponents",
-            rating: 4.8,
-            discount: 15,
-        },
-        {
-            id: "104",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 0,
-            category: "TechnicalComponents",
-            rating: 1.8,
-            discount: 15,
-        },
-        {
-            id: "105",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 300,
-            category: "TechnicalComponents",
-            rating: 2.2,
-            discount: 15,
-        },
-        {
-            id: "106",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 300,
-            category: "TechnicalComponents",
-            rating: 3.8,
-            discount: 15,
-        },
-        {
-            id: "107",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 300,
-            category: "TechnicalComponents",
-            rating: 4.8,
-            discount: 15,
-        },
-        {
-            id: "108",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 300,
-            category: "TechnicalComponents",
-            rating: 3.4,
-            discount: 15,
-        },
-        {
-            id: "109",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 300,
-            category: "TechnicalComponents",
-            rating: 2.9,
-            discount: 15,
-        },
-        {
-            id: "110",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 300,
-            category: "TechnicalComponents",
-            rating: 4.4,
-            discount: 15,
-        },
-        {
-            id: "111",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 300,
-            category: "TechnicalComponents",
-            rating: 4.0,
-            discount: 15,
-        },
-        {
-            id: "201",
-            name: "Item 1",
-            description: "Description 1",
-            price: 10,
-            stock: 100,
-            category: "Seeds",
-            rating: 4.5,
-            discount: 10,
-        },
-        {
-            id: "202",
-            name: "Item 2",
-            description: "Description 2",
-            price: 20,
-            stock: 9,
-            category: "GardenSupplies",
-            rating: 4.0,
-            discount: 20,
-        },
-        {
-            id: "203",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 10,
-            category: "TechnicalComponents",
-            rating: 4.8,
-            discount: 15,
-        },
-        {
-            id: "204",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 0,
-            category: "TechnicalComponents",
-            rating: 1.8,
-            discount: 15,
-        },
-        {
-            id: "205",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 300,
-            category: "TechnicalComponents",
-            rating: 2.2,
-            discount: 15,
-        },
-        {
-            id: "206",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 300,
-            category: "TechnicalComponents",
-            rating: 3.8,
-            discount: 15,
-        },
-        {
-            id: "207",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 300,
-            category: "TechnicalComponents",
-            rating: 4.8,
-            discount: 15,
-        },
-        {
-            id: "208",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 300,
-            category: "TechnicalComponents",
-            rating: 3.4,
-            discount: 15,
-        },
-        {
-            id: "209",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 300,
-            category: "TechnicalComponents",
-            rating: 2.9,
-            discount: 15,
-        },
-        {
-            id: "210",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 300,
-            category: "TechnicalComponents",
-            rating: 4.4,
-            discount: 15,
-        },
-        {
-            id: "211",
-            name: "Item 3",
-            description: "Description 3",
-            price: 30,
-            stock: 300,
-            category: "TechnicalComponents",
-            rating: 4.0,
-            discount: 15,
-        },
-        {
-            id: "212",
-            name: "Item 4",
-            description: "Description 3",
-            price: 50,
-            stock: 300,
-            category: "Other",
-            rating: 1.0,
-            discount: 0,
-        }
-        // Weitere Items hinzufügen
-    ];
-
-    const categoriesFilter = [
-        { value: "", label: t('allCategories') },
         { value: "Seeds", label: t("seeds") },
         { value: "GardenSupplies", label: t("gardenSupplies") },
         { value: "TechnicalComponents", label: t("technicalComponents") },
         { value: "Other", label: t("other") }
-    ];
+    ], [t]);
 
     const ratingFilter = [
         { value: "", label: t('allRatings') },
@@ -384,15 +32,24 @@ export default function Home() {
         }))
     ];
 
-    const [itemsToShow, setItemsToShow] = useState(20); // Anzahl Items, die geladen sind
+    const [itemsToShow, setItemsToShow] = useState<number>(20); // Anzahl Items, die geladen sind
     const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
     const [selectedRating, setSelectedRating] = useState<string | null>(null);
 
+    const { data = [] } = useQuery<Item[]>({
+        queryKey: ['fetchItemList'],
+        queryFn: fetchItemList,
+        retry: 3, // Versucht es 3-mal erneut
+        retryDelay: 1000, // Wartezeit zwischen den Versuchen (in ms)
+    });
+
+    const items:Item[] = useMemo(() => data || [], [data]);
+
     const discountedPrices = items.map(
-        (item) => item.price * (1 - item.discount / 100)
+        (item) => item.price100 * (1 - item.discount100 / 100)
     );
-    const minPrice = Math.min(...discountedPrices);
+    const minPrice = discountedPrices.length > 0 ? Math.min(...discountedPrices) : 0;
-    const maxPrice = Math.max(...discountedPrices);
+    const maxPrice = discountedPrices.length > 0 ? Math.max(...discountedPrices) : 1000;
     const [priceRange, setPriceRange] = useState<[number, number]>([
         minPrice,
         maxPrice,
@@ -407,12 +64,12 @@ export default function Home() {
         } else {
             setSelectedCategory(null);
         }
-    }, [location.search]);
+    }, [location.search, categoriesFilter]);
 
     // Filterfunktion bleibt gleich
     const filteredItems = items
         .filter((item) => {
-            const discountedPrice = item.price * (1 - item.discount / 100);
+            const discountedPrice = item.price100 * (1 - item.discount100 / 100);
             return discountedPrice >= priceRange[0] && discountedPrice <= priceRange[1];
         })
         .filter((item) => {
@@ -424,8 +81,10 @@ export default function Home() {
             return Math.round(item.rating) >= Number(selectedRating);
         });
 
+
+
     // Items, die aktuell angezeigt werden
-    const visibleItems = filteredItems.slice(0, itemsToShow);
+    const visibleItems:Item[] = filteredItems.slice(0, itemsToShow);
 
     // Intersection Observer Ref
     const loaderRef = useRef<HTMLDivElement | null>(null);
@@ -456,9 +115,10 @@ export default function Home() {
             threshold: 1,
         };
         const observer = new IntersectionObserver(handleObserver, option);
-        if (loaderRef.current) observer.observe(loaderRef.current);
+        const currentLoaderRef = loaderRef.current;
+        if (currentLoaderRef) observer.observe(currentLoaderRef);
         return () => {
-            if (loaderRef.current) observer.unobserve(loaderRef.current);
+            if (currentLoaderRef) observer.unobserve(currentLoaderRef);
         };
     }, [handleObserver]);
 
@@ -513,6 +173,7 @@ export default function Home() {
         }
     };
 
+
     return (
         <div className="home-page-background">
             <div className="filter-container">
@@ -549,7 +210,8 @@ export default function Home() {
 
                 {/* Loader für Intersection Observer */}
                 <div ref={loaderRef} className="loader-container">
-                    {/* Hier kann ein Lade-Spinner rein, wenn gewünscht */}
+                   <Typography>Im Moment keine Items verfpgbar</Typography>
+                    
                 </div>
             </div>
         </div>