329 lines
14 KiB
TypeScript
329 lines
14 KiB
TypeScript
import { useState, useCallback } from 'react'
|
||
import { useParams, useNavigate, useSearchParams, Link } from 'react-router'
|
||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||
import { motion } from 'framer-motion'
|
||
import toast from 'react-hot-toast'
|
||
import { ArrowLeft, Heart, Clock, Users, ChefHat, ShoppingCart, Pencil, Minus, Plus, Send, Trash2 } from 'lucide-react'
|
||
import { Dices } from 'lucide-react'
|
||
import { fetchRecipe, toggleFavorite, fetchRandomRecipe } from '../api/recipes'
|
||
import { addFromRecipe } from '../api/shopping'
|
||
import { createNote, deleteNote } from '../api/notes'
|
||
import { Badge } from '../components/ui/Badge'
|
||
import { Skeleton } from '../components/ui/Skeleton'
|
||
|
||
const gradients = ['from-primary/40 to-secondary/40', 'from-secondary/40 to-sage/40']
|
||
|
||
export function RecipePage() {
|
||
const { slug } = useParams<{ slug: string }>()
|
||
const navigate = useNavigate()
|
||
const [searchParams] = useSearchParams()
|
||
const fromRandom = searchParams.get('from') === 'random'
|
||
const qc = useQueryClient()
|
||
const [servingScale, setServingScale] = useState<number | null>(null)
|
||
const [noteText, setNoteText] = useState('')
|
||
const [rerolling, setRerolling] = useState(false)
|
||
|
||
const handleReroll = useCallback(async () => {
|
||
setRerolling(true)
|
||
try {
|
||
const r = await fetchRandomRecipe()
|
||
if (r?.slug) navigate(`/recipe/${r.slug}?from=random`, { replace: true })
|
||
} catch { /* ignore */ }
|
||
setRerolling(false)
|
||
}, [navigate])
|
||
|
||
const { data: recipe, isLoading } = useQuery({
|
||
queryKey: ['recipe', slug],
|
||
queryFn: () => fetchRecipe(slug!),
|
||
enabled: !!slug,
|
||
})
|
||
|
||
const favMutation = useMutation({
|
||
mutationFn: () => toggleFavorite(recipe!.id),
|
||
onSuccess: () => {
|
||
qc.invalidateQueries({ queryKey: ['recipe', slug] })
|
||
qc.invalidateQueries({ queryKey: ['recipes'] })
|
||
},
|
||
onError: () => toast.error('Fehler beim Ändern des Favoriten-Status'),
|
||
})
|
||
|
||
const shoppingMutation = useMutation({
|
||
mutationFn: () => addFromRecipe(recipe!.id),
|
||
onSuccess: (data) => {
|
||
qc.invalidateQueries({ queryKey: ['shopping'] })
|
||
toast.success(`${data.added} Zutaten zur Einkaufsliste hinzugefügt!`)
|
||
},
|
||
onError: () => toast.error('Fehler beim Hinzufügen zur Einkaufsliste'),
|
||
})
|
||
|
||
const noteMutation = useMutation({
|
||
mutationFn: (content: string) => createNote(recipe!.id, content),
|
||
onSuccess: () => {
|
||
qc.invalidateQueries({ queryKey: ['recipe', slug] })
|
||
setNoteText('')
|
||
toast.success('Notiz gespeichert! 📝')
|
||
},
|
||
onError: () => toast.error('Fehler beim Speichern der Notiz'),
|
||
})
|
||
|
||
const deleteNoteMutation = useMutation({
|
||
mutationFn: (noteId: string) => deleteNote(noteId),
|
||
onSuccess: () => {
|
||
qc.invalidateQueries({ queryKey: ['recipe', slug] })
|
||
toast.success('Notiz gelöscht')
|
||
},
|
||
})
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<div className="p-4 space-y-4">
|
||
<Skeleton className="w-full h-64" />
|
||
<Skeleton className="h-8 w-3/4" />
|
||
<Skeleton className="h-4 w-1/2" />
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (!recipe) return <div className="p-4">Rezept nicht gefunden.</div>
|
||
|
||
const originalServings = recipe.servings || 4
|
||
const currentServings = servingScale ?? originalServings
|
||
const scaleFactor = currentServings / originalServings
|
||
const totalTime = recipe.total_time_min || ((recipe.prep_time_min || 0) + (recipe.cook_time_min || 0))
|
||
const gradient = gradients[recipe.title.length % gradients.length]
|
||
|
||
const scaleAmount = (amount?: number) => {
|
||
if (!amount) return ''
|
||
const scaled = amount * scaleFactor
|
||
// Nice formatting
|
||
if (scaled === Math.round(scaled)) return String(Math.round(scaled))
|
||
return scaled.toFixed(1).replace(/\.0$/, '')
|
||
}
|
||
|
||
// Group ingredients
|
||
const ingredientGroups = (recipe.ingredients || []).reduce<Record<string, typeof recipe.ingredients>>((acc, ing) => {
|
||
const group = ing.group_name || 'Zutaten'
|
||
if (!acc[group]) acc[group] = []
|
||
acc[group]!.push(ing)
|
||
return acc
|
||
}, {})
|
||
|
||
return (
|
||
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.3 }}>
|
||
{/* Hero */}
|
||
<div className="relative">
|
||
{recipe.image_url ? (
|
||
<img src={recipe.image_url} alt={recipe.title} className="w-full h-64 object-cover" />
|
||
) : (
|
||
<div className={`w-full h-64 bg-gradient-to-br ${gradient} flex items-center justify-center`}>
|
||
<span className="text-6xl">🍰</span>
|
||
</div>
|
||
)}
|
||
<button onClick={() => navigate(-1)} className="absolute top-4 left-4 bg-surface/80 backdrop-blur-sm rounded-full p-2 min-w-[44px] min-h-[44px] flex items-center justify-center">
|
||
<ArrowLeft size={20} className="text-espresso" />
|
||
</button>
|
||
<div className="absolute top-4 right-4 flex gap-2">
|
||
<Link to={`/recipe/${recipe.slug}/edit`} className="bg-surface/80 backdrop-blur-sm rounded-full p-2 min-w-[44px] min-h-[44px] flex items-center justify-center">
|
||
<Pencil size={20} className="text-espresso" />
|
||
</Link>
|
||
<button onClick={() => favMutation.mutate()} className="bg-surface/80 backdrop-blur-sm rounded-full p-2 min-w-[44px] min-h-[44px] flex items-center justify-center">
|
||
<Heart size={20} className={recipe.is_favorite ? 'fill-primary text-primary' : 'text-espresso'} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-4 space-y-6">
|
||
{/* Title & Meta */}
|
||
<div>
|
||
<h1 className="font-display text-2xl text-espresso">{recipe.title}</h1>
|
||
<div className="flex flex-wrap items-center gap-2 mt-2">
|
||
{recipe.category_name ? (
|
||
<Badge>{recipe.category_name}</Badge>
|
||
) : (
|
||
<Badge>🍽️ Allgemein</Badge>
|
||
)}
|
||
{totalTime > 0 && (
|
||
<span className="flex items-center gap-1 text-warm-grey text-sm"><Clock size={14} /> {totalTime} min</span>
|
||
)}
|
||
{recipe.difficulty && (
|
||
<span className="flex items-center gap-1 text-warm-grey text-sm"><ChefHat size={14} /> {recipe.difficulty}</span>
|
||
)}
|
||
</div>
|
||
{recipe.description && <p className="text-warm-grey mt-2 text-sm">{recipe.description}</p>}
|
||
</div>
|
||
|
||
{/* Tags */}
|
||
{recipe.tags && recipe.tags.length > 0 && (
|
||
<div className="flex flex-wrap gap-1">
|
||
{recipe.tags.map((tag) => (
|
||
<span key={tag} className="text-xs bg-sand/50 text-warm-grey px-2 py-0.5 rounded-full">#{tag}</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Serving Calculator */}
|
||
<div className="bg-primary-light/30 rounded-2xl p-4">
|
||
<div className="flex items-center justify-between">
|
||
<span className="flex items-center gap-2 text-sm font-medium text-espresso">
|
||
<Users size={16} /> Portionen
|
||
</span>
|
||
<div className="flex items-center gap-3">
|
||
<button
|
||
onClick={() => setServingScale(Math.max(1, currentServings - 1))}
|
||
className="w-9 h-9 rounded-full bg-surface border border-sand flex items-center justify-center text-espresso active:bg-sand transition-colors"
|
||
>
|
||
<Minus size={16} />
|
||
</button>
|
||
<span className="font-display text-xl text-espresso min-w-[2ch] text-center">{currentServings}</span>
|
||
<button
|
||
onClick={() => setServingScale(currentServings + 1)}
|
||
className="w-9 h-9 rounded-full bg-surface border border-sand flex items-center justify-center text-espresso active:bg-sand transition-colors"
|
||
>
|
||
<Plus size={16} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
{servingScale !== null && servingScale !== originalServings && (
|
||
<button
|
||
onClick={() => setServingScale(null)}
|
||
className="text-xs text-primary mt-2 underline"
|
||
>
|
||
Original ({originalServings}) zurücksetzen
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{/* Ingredients */}
|
||
{Object.keys(ingredientGroups).length > 0 && (
|
||
<div>
|
||
<h2 className="font-display text-lg text-espresso mb-3">Zutaten</h2>
|
||
{Object.entries(ingredientGroups).map(([group, items]) => (
|
||
<div key={group} className="mb-3">
|
||
{Object.keys(ingredientGroups).length > 1 && (
|
||
<h3 className="font-semibold text-sm text-warm-grey mb-1">{group}</h3>
|
||
)}
|
||
<ul className="space-y-1">
|
||
{items!.map((ing, i) => (
|
||
<motion.li
|
||
key={i}
|
||
className="flex gap-2 text-sm text-espresso py-1 border-b border-sand/50"
|
||
initial={{ opacity: 0, x: -10 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ delay: i * 0.03 }}
|
||
>
|
||
<span className="text-warm-grey min-w-[60px]">
|
||
{ing.amount ? `${scaleAmount(ing.amount)} ${ing.unit || ''}`.trim() : ''}
|
||
</span>
|
||
<span>{ing.name}</span>
|
||
</motion.li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Add to shopping list */}
|
||
{recipe.ingredients && recipe.ingredients.length > 0 && (
|
||
<button
|
||
onClick={() => shoppingMutation.mutate()}
|
||
disabled={shoppingMutation.isPending}
|
||
className="w-full flex items-center justify-center gap-2 bg-secondary text-white px-4 py-3 rounded-xl font-medium transition-colors hover:bg-secondary/90 disabled:opacity-50 min-h-[44px]"
|
||
>
|
||
<ShoppingCart size={18} />
|
||
{shoppingMutation.isPending ? 'Wird hinzugefügt...' : '🛒 Zur Einkaufsliste'}
|
||
</button>
|
||
)}
|
||
|
||
{/* Steps */}
|
||
{recipe.steps && recipe.steps.length > 0 && (
|
||
<div>
|
||
<h2 className="font-display text-lg text-espresso mb-3">Zubereitung</h2>
|
||
<ol className="space-y-4">
|
||
{recipe.steps.map((step, i) => (
|
||
<motion.li
|
||
key={i}
|
||
className="flex gap-3"
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: i * 0.05 }}
|
||
>
|
||
<span className="flex-shrink-0 w-7 h-7 rounded-full bg-primary text-white text-sm flex items-center justify-center font-medium">
|
||
{step.step_number || i + 1}
|
||
</span>
|
||
<div className="text-sm text-espresso pt-1">
|
||
<p>{step.instruction}</p>
|
||
{step.timer_minutes && (
|
||
<span className="inline-flex items-center gap-1 mt-1 text-xs text-primary">
|
||
<Clock size={12} /> {step.timer_label || 'Timer'}: {step.timer_minutes} min
|
||
</span>
|
||
)}
|
||
</div>
|
||
</motion.li>
|
||
))}
|
||
</ol>
|
||
</div>
|
||
)}
|
||
|
||
{/* Notes */}
|
||
<div>
|
||
<h2 className="font-display text-lg text-espresso mb-3">Notizen</h2>
|
||
|
||
{/* Existing notes */}
|
||
{recipe.notes && recipe.notes.length > 0 && (
|
||
<div className="space-y-2 mb-3">
|
||
{recipe.notes.map((note) => (
|
||
<motion.div
|
||
key={note.id}
|
||
className="bg-primary-light/30 rounded-xl p-3 text-sm text-espresso flex items-start gap-2"
|
||
initial={{ opacity: 0, scale: 0.95 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
>
|
||
<span className="flex-1">📝 {note.content}</span>
|
||
<button
|
||
onClick={() => deleteNoteMutation.mutate(note.id)}
|
||
className="text-warm-grey hover:text-berry p-1 flex-shrink-0"
|
||
>
|
||
<Trash2 size={14} />
|
||
</button>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Add note */}
|
||
<div className="flex gap-2">
|
||
<input
|
||
type="text"
|
||
value={noteText}
|
||
onChange={(e) => setNoteText(e.target.value)}
|
||
onKeyDown={(e) => { if (e.key === 'Enter' && noteText.trim()) noteMutation.mutate(noteText.trim()) }}
|
||
placeholder="Notiz hinzufügen..."
|
||
className="flex-1 bg-surface border border-sand rounded-xl px-4 py-3 text-sm text-espresso placeholder:text-warm-grey/50 focus:outline-none focus:ring-2 focus:ring-primary/30 min-h-[44px]"
|
||
/>
|
||
<button
|
||
onClick={() => noteText.trim() && noteMutation.mutate(noteText.trim())}
|
||
disabled={!noteText.trim() || noteMutation.isPending}
|
||
className="bg-primary text-white rounded-xl px-4 min-h-[44px] min-w-[44px] flex items-center justify-center disabled:opacity-50 transition-colors"
|
||
>
|
||
<Send size={18} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Floating Re-Roll Button */}
|
||
{fromRandom && (
|
||
<button
|
||
onClick={handleReroll}
|
||
disabled={rerolling}
|
||
className="fixed bottom-20 right-4 z-50 w-12 h-12 rounded-full bg-gradient-to-r from-primary to-secondary text-white shadow-lg flex items-center justify-center active:scale-95 transition-transform disabled:opacity-50"
|
||
title="Nochmal würfeln"
|
||
>
|
||
<Dices size={20} className={rerolling ? 'animate-spin' : ''} />
|
||
</button>
|
||
)}
|
||
</motion.div>
|
||
)
|
||
}
|