Added Product not found

01-frontend/src/pages/Product.tsx

@@ -15,18 +15,43 @@ import {
 } from '@mui/material';
 import { useState } from 'react';
 import Item from '../components/Item';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { useBasket } from '../helper/BasketProvider';
 
 
 export default function Product() {
     const [quantity, setQuantity] = useState(1);
+    const [imageDimensions, setImageDimensions] = useState({ width: 0, height: 0 });
     const location = useLocation();
     const item = location.state?.item as Item;
     const { addToBasket } = useBasket();
+    const navigate = useNavigate();
 
+    const handleGoHome = () => {
+        navigate("/");
+    };
+
+    // Redirect immediately if item is not found
     if (!item) {
-        return <div>Item not found</div>;
+        return (
+            <Box className="no-page-container">
+                <Typography variant="h1" className="no-page-title">
+                    Product not found
+                </Typography>
+                <Typography variant="h5" className="no-page-description">
+                    It seems you are locking for a product that doesn't exist or has been removed.
+                </Typography>
+                <Button
+                    variant="contained"
+                    color="primary"
+                    size="large"
+                    className="no-page-button"
+                    onClick={handleGoHome}
+                >
+                    Go Back to Home
+                </Button>
+            </Box>
+        );
     }
 
 
@@ -37,6 +62,11 @@ export default function Product() {
 
     const discountedPrice = item.price * (1 - item.discount / 100);
 
+    const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {
+        const { naturalWidth, naturalHeight } = event.currentTarget;
+        setImageDimensions({ width: naturalWidth, height: naturalHeight });
+    };
+
     return (
         <div className='page-background'>
             <Container maxWidth="lg" sx={{ py: 4 }} >
@@ -48,7 +78,14 @@ export default function Product() {
                             component="img"
                             src="/src/assets/HTW.jpg"
                             alt={item.name}
-                            sx={{ width: '100%', height: 'auto' }}
+                            onLoad={handleImageLoad} // Event-Handler zum Ermitteln der Bildgröße
+                            sx={{
+                                maxWidth: imageDimensions.width > imageDimensions.height ? "100%" : "auto",
+                                maxHeight: imageDimensions.height >= imageDimensions.width ? 400 : "auto",
+                                width: "auto",
+                                height: "auto",
+                                objectFit: "contain",
+                            }}
                         />
                     </Card>