Merge pull request 'Implemte behavior wenn options null' (#4) from dev into main

Reviewed-on: #4

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
+  // Use a safer approach for options
-  const hasSamePrice = product.options.every(option => option.price === product.options[0].price);
+  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 
+    <div className="product-details">
-      className="product-details"
-    >
       <h2>{product.name}</h2>
       
-      <div className="options-list">
+      {options.length > 0 && (
-        <h3>Optionen:</h3>
+        <div className="options-list">
-        {product.options.map(option => (
+          <h3>Optionen:</h3>
-          <div 
+          {options.map(option => (
-            key={option.name}
+            <div 
-            className={`option-item ${selectedOption.name === option.name ? 'selected' : ''}`}
+              key={option.name}
-            onClick={() => setSelectedOption(option)}
+              className={`option-item ${selectedOption.name === option.name ? 'selected' : ''}`}
-            style={(option.color || product.color) ? 
+              onClick={() => setSelectedOption(option)}
-              { backgroundColor: `${option.color || product.color}60` } : {}}
+              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>}
+              <span>{option.name}</span>
-          </div>
+              {!hasSamePrice && <span className="option-price">{option.price.toFixed(2)} €</span>}
-        ))}
+            </div>
-        {hasSamePrice && (
+          ))}
-          <div className="uniform-price">Preis: {product.options[0].price.toFixed(2)} €</div>
+          {hasSamePrice && (
-        )}
+            <div className="uniform-price">Preis: {options[0].price.toFixed(2)} €</div>
-      </div>
+          )}
+        </div>
+      )}
       
       <div className="quantity-controls">
         <h3>Menge:</h3>

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 { addToCart } = useCart();
-  const sortedProducts = [...products].sort((a, b) => 
+  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 => (
+      {sortedProducts.map(product => {
-        <Link 
+        const hasOptions = product.options && product.options.length > 0;
-          to={`/product/${category}/${product.id}`} 
+        const style = product.color ? { backgroundColor: `${product.color}80` } : {};
-          key={product.id} 
+        if (hasOptions) {
-          className="product-item"
+          return (
-          style={product.color ? { backgroundColor: `${product.color}80` } : {}}
+            <Link
-        >
+              to={`/product/${category}/${product.id}`}
-          <div className="product-name">{product.name}</div>
+              key={product.id}
-          <div className="product-price">{product.basePrice.toFixed(2)} €</div>
+              className="product-item"
-        </Link>
+              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;

src/data/products.json

@@ -15,12 +15,7 @@
       "id": "f2",
       "name": "Schnitzelsemmel",
       "basePrice": 5.80,
-      "color": "#FFEFC1",
+      "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"}
-      ]
     },
     {
       "id": "f3",
@@ -95,13 +90,7 @@
       "id": "d3",
       "name": "Softdrinks",
       "basePrice": 3.50,
-      "color": "#FFDAB9",
+      "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}
-      ]
     },
     {
       "id": "d4",

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
 };