From a376b5cd8a92ecdda4aa5a43f8c3d93b426adae7 Mon Sep 17 00:00:00 2001
From: Jonas Hinterdorfer <j.hinterdorfer@HTBLALeonding.onmicrosoft.com>
Date: Mon, 16 Jun 2025 09:48:59 +0200
Subject: [PATCH] Implemte behavior wenn options null

---
 src/components/ProductDetails.tsx | 52 ++++++++++++++-------------
 src/components/ProductList.tsx    | 58 +++++++++++++++++++++++--------
 src/data/products.json            | 15 ++------
 src/types/types.ts                |  2 +-
 4 files changed, 75 insertions(+), 52 deletions(-)

diff --git a/src/components/ProductDetails.tsx b/src/components/ProductDetails.tsx
index d534553..9fc618c 100644
--- a/src/components/ProductDetails.tsx
+++ b/src/components/ProductDetails.tsx
@@ -10,13 +10,17 @@ type ProductDetailsProps = {
 };
 
 const ProductDetails: React.FC<ProductDetailsProps> = ({ product, category }) => {
-  const [selectedOption, setSelectedOption] = useState<ProductOption>(product.options[0]);
+  const [selectedOption, setSelectedOption] = useState<ProductOption>(
+    product.options?.[0] || { name: product.name, price: 0 }
+  );
   const [quantity, setQuantity] = useState(1);
   const { addToCart } = useCart();
   const navigate = useNavigate();
 
-  // Check if all options have the same price
-  const hasSamePrice = product.options.every(option => option.price === product.options[0].price);
+  // Use a safer approach for options
+  const options = product.options || [];
+  const hasSamePrice = options.length > 0 && 
+    options.every(option => option.price === options[0].price);
 
   const handleAddToCart = () => {
     addToCart({
@@ -30,29 +34,29 @@ const ProductDetails: React.FC<ProductDetailsProps> = ({ product, category }) =>
   };
 
   return (
-    <div 
-      className="product-details"
-    >
+    <div className="product-details">
       <h2>{product.name}</h2>
       
-      <div className="options-list">
-        <h3>Optionen:</h3>
-        {product.options.map(option => (
-          <div 
-            key={option.name}
-            className={`option-item ${selectedOption.name === option.name ? 'selected' : ''}`}
-            onClick={() => setSelectedOption(option)}
-            style={(option.color || product.color) ? 
-              { backgroundColor: `${option.color || product.color}60` } : {}}
-          >
-            <span>{option.name}</span>
-            {!hasSamePrice && <span className="option-price">{option.price.toFixed(2)} €</span>}
-          </div>
-        ))}
-        {hasSamePrice && (
-          <div className="uniform-price">Preis: {product.options[0].price.toFixed(2)} €</div>
-        )}
-      </div>
+      {options.length > 0 && (
+        <div className="options-list">
+          <h3>Optionen:</h3>
+          {options.map(option => (
+            <div 
+              key={option.name}
+              className={`option-item ${selectedOption.name === option.name ? 'selected' : ''}`}
+              onClick={() => setSelectedOption(option)}
+              style={(option.color || product.color) ? 
+                { backgroundColor: `${option.color || product.color}60` } : {}}
+            >
+              <span>{option.name}</span>
+              {!hasSamePrice && <span className="option-price">{option.price.toFixed(2)} €</span>}
+            </div>
+          ))}
+          {hasSamePrice && (
+            <div className="uniform-price">Preis: {options[0].price.toFixed(2)} €</div>
+          )}
+        </div>
+      )}
       
       <div className="quantity-controls">
         <h3>Menge:</h3>
diff --git a/src/components/ProductList.tsx b/src/components/ProductList.tsx
index af8ccb0..9edd6bf 100644
--- a/src/components/ProductList.tsx
+++ b/src/components/ProductList.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Product } from '../types/types';
 import { Link } from 'react-router-dom';
+import { useCart } from '../contexts/CartContext';
 import './ProductList.css';
 
 type ProductListProps = {
@@ -9,26 +10,55 @@ type ProductListProps = {
 };
 
 const ProductList: React.FC<ProductListProps> = ({ products, category }) => {
-  // Sort products by name alphabetically
-  const sortedProducts = [...products].sort((a, b) => 
+  const { addToCart } = useCart();
+  const sortedProducts = [...products].sort((a, b) =>
     a.name.localeCompare(b.name)
   );
-  
+
+  const handleDirectAddToCart = (product: Product) => {
+    addToCart({
+      productId: product.id,
+      productName: product.name,
+      selectedOption: { name: product.name, price: product.basePrice },
+      quantity: 1,
+      category
+    });
+  };
+
   return (
     <div className="product-list">
-      {sortedProducts.map(product => (
-        <Link 
-          to={`/product/${category}/${product.id}`} 
-          key={product.id} 
-          className="product-item"
-          style={product.color ? { backgroundColor: `${product.color}80` } : {}}
-        >
-          <div className="product-name">{product.name}</div>
-          <div className="product-price">{product.basePrice.toFixed(2)} €</div>
-        </Link>
-      ))}
+      {sortedProducts.map(product => {
+        const hasOptions = product.options && product.options.length > 0;
+        const style = product.color ? { backgroundColor: `${product.color}80` } : {};
+        if (hasOptions) {
+          return (
+            <Link
+              to={`/product/${category}/${product.id}`}
+              key={product.id}
+              className="product-item"
+              style={style}
+            >
+              <div className="product-name">{product.name}</div>
+              <div className="product-price">{product.basePrice.toFixed(2)} €</div>
+            </Link>
+          );
+        } else {
+          return (
+            <div
+              key={product.id}
+              className="product-item"
+              style={style}
+              onClick={() => handleDirectAddToCart(product)}
+            >
+              <div className="product-name">{product.name}</div>
+              <div className="product-price">{product.basePrice.toFixed(2)} €</div>
+            </div>
+          );
+        }
+      })}
     </div>
   );
 };
 
+
 export default ProductList;
diff --git a/src/data/products.json b/src/data/products.json
index a92ed23..1691ae5 100644
--- a/src/data/products.json
+++ b/src/data/products.json
@@ -15,12 +15,7 @@
       "id": "f2",
       "name": "Schnitzelsemmel",
       "basePrice": 5.80,
-      "color": "#FFEFC1",
-      "options": [
-        {"name": "Klassisch", "price": 5.80},
-        {"name": "Mit Salat", "price": 6.50, "color": "#E8F5E9"},
-        {"name": "Mit Käse", "price": 6.80, "color": "#FFF9C4"}
-      ]
+      "color": "#FFEFC1"
     },
     {
       "id": "f3",
@@ -95,13 +90,7 @@
       "id": "d3",
       "name": "Softdrinks",
       "basePrice": 3.50,
-      "color": "#FFDAB9",
-      "options": [
-        {"name": "Fanta (0,5L)", "price": 3.50},
-        {"name": "Sprite (0,5L)", "price": 3.50},
-        {"name": "Almdudler (0,5L)", "price": 3.50},
-        {"name": "Eistee (0,5L)", "price": 3.50}
-      ]
+      "color": "#FFDAB9"
     },
     {
       "id": "d4",
diff --git a/src/types/types.ts b/src/types/types.ts
index bc543ab..288927c 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -8,7 +8,7 @@ export type Product = {
   id: string;
   name: string;
   basePrice: number;
-  options: ProductOption[];
+  options?: ProductOption[];
   color?: string; // Optional color code for background highlight
 };