Format and Fix Glass Selector

Author: ManfredRichthofen

renovate.json

@@ -1,25 +1,14 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:recommended"
-  ],
-  "baseBranchPatterns": [
-    "main"
-  ],
+  "extends": ["config:recommended"],
+  "baseBranchPatterns": ["main"],
   "packageRules": [
     {
-      "matchUpdateTypes": [
-        "minor",
-        "patch",
-        "pin",
-        "digest"
-      ],
+      "matchUpdateTypes": ["minor", "patch", "pin", "digest"],
       "automerge": true
     },
     {
-      "matchDepTypes": [
-        "devDependencies"
-      ],
+      "matchDepTypes": ["devDependencies"],
       "automerge": true
     }
   ],

src/index.css

@@ -118,8 +118,9 @@
   [data-slot="card"].pump-running {
     --tw-ring-color: var(--primary) !important;
     --tw-ring-opacity: 1 !important;
-    box-shadow: 0 0 0 2px var(--primary), 
-                0 10px 15px -3px oklch(0.601 0.153 262.676 / 0.3) !important;
+    box-shadow:
+      0 0 0 2px var(--primary),
+      0 10px 15px -3px oklch(0.601 0.153 262.676 / 0.3) !important;
   }
 
   /* Scrolling progress bar animation */

src/pages/simple-mode/simpleOrder/components/GlassSelector.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { GlassWater, Loader2 } from 'lucide-react';
 import glassService from '../../../../services/glass.service';
 import { Button } from '@/components/ui/button';
@@ -16,7 +16,8 @@ import { Alert, AlertDescription } from '@/components/ui/alert';
 interface Glass {
   id: string;
   name: string;
-  sizeInMl: number;
+  size: number;
+  sizeInMl?: number;
   description?: string;
 }
 
@@ -38,23 +39,42 @@ const GlassSelector = ({
   const [loading, setLoading] = useState(true);
   const [glasses, setGlasses] = useState<Glass[]>([]);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const hasInitialized = useRef(false);
 
   useEffect(() => {
     const fetchGlasses = async () => {
       try {
-        // Fetch all available glasses
         const allGlasses = await glassService.getGlasses(token);
         setGlasses(allGlasses);
 
-        // If default glass is provided, select it
-        if (defaultGlass) {
-          const glass = allGlasses.find((g: Glass) => g.id === defaultGlass.id);
-          if (glass) {
-            setSelectedGlass(glass);
+        if (!hasInitialized.current) {
+          hasInitialized.current = true;
+
+          console.log('GlassSelector initializing:', {
+            defaultGlass,
+            selectedGlass,
+            glassCount: allGlasses.length,
+          });
+
+          if (defaultGlass) {
+            const glass = allGlasses.find(
+              (g: Glass) => g.id === defaultGlass.id,
+            );
+            if (glass) {
+              console.log('Setting default glass:', glass);
+              setSelectedGlass(glass);
+              if (onGlassChange) {
+                onGlassChange(glass);
+              }
+            }
+          } else if (allGlasses.length > 0 && !selectedGlass) {
+            // Auto-select first glass if none selected
+            console.log('Auto-selecting first glass:', allGlasses[0]);
+            setSelectedGlass(allGlasses[0]);
+            if (onGlassChange) {
+              onGlassChange(allGlasses[0]);
+            }
           }
-        } else if (allGlasses.length > 0 && !selectedGlass) {
-          // Auto-select first glass if none selected
-          setSelectedGlass(allGlasses[0]);
         }
       } catch (error) {
         console.error('Failed to fetch glasses:', error);
@@ -66,7 +86,7 @@ const GlassSelector = ({
     if (token) {
       fetchGlasses();
     }
-  }, [token, defaultGlass, setSelectedGlass]);
+  }, [token]);
 
   if (loading) {
     return (
@@ -113,11 +133,11 @@ const GlassSelector = ({
                     {selectedGlass.name}
                   </div>
                   <div className="text-xs sm:text-sm text-muted-foreground">
-                    {selectedGlass.sizeInMl}ml capacity
+                    {selectedGlass.size}ml capacity
                   </div>
                 </div>
               </div>
-              <Badge className="shrink-0">{selectedGlass.sizeInMl}ml</Badge>
+              <Badge className="shrink-0">{selectedGlass.size}ml</Badge>
             </div>
           ) : (
             <div className="flex items-center gap-2 text-muted-foreground">
@@ -173,7 +193,7 @@ const GlassSelector = ({
                         }
                         className="shrink-0"
                       >
-                        {glass.sizeInMl}ml
+                        {glass.size}ml
                       </Badge>
                     </div>
                     {glass.description && (

src/pages/simple-mode/simpleOrder/simpleOrder.tsx

@@ -21,7 +21,8 @@ interface Ingredient {
 interface Glass {
   id: string;
   name: string;
-  sizeInMl: number;
+  size: number;
+  sizeInMl?: number;
   description?: string;
 }
 
@@ -58,12 +59,6 @@ const SimpleOrder = () => {
 
   useEffect(() => {
     if (recipe) {
-      if (recipe.defaultGlass) {
-        setSelectedGlass(recipe.defaultGlass);
-        setAmountToProduce(recipe.defaultGlass.sizeInMl);
-      } else {
-        setAmountToProduce(250);
-      }
       setIngredients(recipe.ingredients || []);
     }
   }, [recipe]);
@@ -89,7 +84,11 @@ const SimpleOrder = () => {
   }, [recipe, amountToProduce, boost]);
 
   const getOrderConfig = () => ({
-    amountOrderedInMl: amountToProduce || recipe?.defaultGlass?.sizeInMl || 250,
+    amountOrderedInMl:
+      amountToProduce ||
+      (recipe?.defaultGlass as any)?.size ||
+      recipe?.defaultGlass?.sizeInMl ||
+      250,
     customisations: {
       boost: parseInt(boost.toString()) || 100,
       additionalIngredients: additionalIngredients || [],
@@ -193,6 +192,18 @@ const SimpleOrder = () => {
     !checking &&
     areAllIngredientsAvailable(feasibilityResult?.requiredIngredients || []);
 
+  // Debug logging
+  console.log('canOrderDrink debug:', {
+    feasible: feasibilityResult?.feasible,
+    selectedGlass: selectedGlass,
+    loading,
+    checking,
+    ingredientsAvailable: areAllIngredientsAvailable(
+      feasibilityResult?.requiredIngredients || [],
+    ),
+    canOrderDrink,
+  });
+
   const hasBoostableIngredients = feasibilityResult?.requiredIngredients?.some(
     (item: any) =>
       item.ingredient.type === 'automated' &&
@@ -277,7 +288,7 @@ const SimpleOrder = () => {
                   setSelectedGlass={setSelectedGlass}
                   onGlassChange={(glass) => {
                     if (glass) {
-                      setAmountToProduce(glass.sizeInMl);
+                      setAmountToProduce(glass.size || glass.sizeInMl || 250);
                     }
                   }}
                 />