pass location state

Author: ManfredRichthofen

src/pages/AdvancedMode/OrderPage/order.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { BeakerIcon, XCircle, PlayCircle } from 'lucide-react';
-import { Navigate, useLocation, useNavigate } from '@tanstack/react-router';
+import { useLocation, useNavigate } from '@tanstack/react-router';
 import useAuthStore from '../../../store/authStore';
 import cocktailService from '../../../services/cocktail.service';
 import DrinkCustomizer from './components/DrinkCustomizer';
@@ -140,8 +140,16 @@ const Order = () => {
     setAmountToProduce(value);
   };
 
-  if (!token) return <Navigate to="/login" />;
-  if (!recipe) return <Navigate to="/drinks" />;
+  // Handle redirects in useEffect to prevent infinite loops
+  useEffect(() => {
+    if (!token) {
+      navigate({ to: '/login' });
+    } else if (!recipe) {
+      navigate({ to: '/drinks' });
+    }
+  }, [token, recipe, navigate]);
+
+  if (!token || !recipe) return null;
 
   const canOrderDrink =
     feasibilityResult?.feasible &&

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

@@ -1,4 +1,5 @@
-import { useLocation, useNavigate, Navigate } from '@tanstack/react-router';
+import { useLocation, useNavigate } from '@tanstack/react-router';
+import { useEffect } from 'react';
 import { Beaker, ArrowLeft } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -29,12 +30,18 @@ interface Recipe {
 
 const SimpleDrinkDetail = () => {
   const location = useLocation();
-  const navigate = useNavigate({ from: '/simple/drink/$id' });
+  const navigate = useNavigate();
   const recipe = (location.state as any)?.recipe as Recipe | undefined;
 
   // Redirect if no recipe data
+  useEffect(() => {
+    if (!recipe) {
+      navigate({ to: '/simple/drinks' });
+    }
+  }, [recipe, navigate]);
+
   if (!recipe) {
-    return <Navigate to="/simple/drinks" />;
+    return null;
   }
 
   return (
@@ -73,7 +80,12 @@ const SimpleDrinkDetail = () => {
             type="button"
             size="lg"
             className="w-full h-12 sm:h-14 gap-2 sm:gap-3 text-sm sm:text-base font-semibold shadow-lg hover:shadow-xl transition-all duration-200 active:scale-95"
-            onClick={() => navigate({ to: '/simple/order' } as any)}
+            onClick={() => {
+              navigate({ 
+                to: '/simple/order',
+                state: { recipe }
+              } as any);
+            }}
           >
             <Beaker className="w-4 h-4 sm:w-5 sm:h-5" />
             Make Drink

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

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from 'react';
 import { BeakerIcon, ArrowLeft, Info } from 'lucide-react';
-import { Navigate, useLocation, useNavigate } from '@tanstack/react-router';
+import { useLocation, useNavigate } from '@tanstack/react-router';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent } from '@/components/ui/card';
@@ -164,8 +164,16 @@ const SimpleOrder = () => {
     orderDrink(recipe.id, orderConfig);
   }, [recipe, amountToProduce, boost, additionalIngredients, token]);
 
-  if (!token) return <Navigate to="/login" />;
-  if (!recipe) return <Navigate to="/drinks" />;
+  // Handle redirects in useEffect to prevent infinite loops
+  useEffect(() => {
+    if (!token) {
+      navigate({ to: '/login' });
+    } else if (!recipe) {
+      navigate({ to: '/drinks' });
+    }
+  }, [token, recipe, navigate]);
+
+  if (!token || !recipe) return null;
 
   const canOrderDrink =
     feasibilityResult?.feasible &&