init push
This commit is contained in:
nadja
174
frontend/src/pages/RecipeDetail.jsx
Normal file
174
frontend/src/pages/RecipeDetail.jsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate, Link } from 'react-router-dom';
|
||||
import { fetchRecipe, updateRecipe, deleteRecipe } from '../api';
|
||||
import CategoryBadge from '../components/CategoryBadge';
|
||||
import IngredientList from '../components/IngredientList';
|
||||
import StepList from '../components/StepList';
|
||||
|
||||
const CATEGORIES = ['Frühstück', 'Hauptgericht', 'Dessert', 'Snack', 'Getränk', 'Sonstiges'];
|
||||
|
||||
export default function RecipeDetail() {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [recipe, setRecipe] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [form, setForm] = useState({});
|
||||
|
||||
useEffect(() => { load(); }, [id]);
|
||||
|
||||
const load = async () => {
|
||||
try {
|
||||
const data = await fetchRecipe(id);
|
||||
setRecipe(data);
|
||||
setForm(data);
|
||||
} catch (e) {
|
||||
navigate('/');
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
await updateRecipe(id, form);
|
||||
setRecipe(form);
|
||||
setEditing(false);
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!confirm('Rezept wirklich löschen?')) return;
|
||||
await deleteRecipe(id);
|
||||
navigate('/');
|
||||
};
|
||||
|
||||
const updateField = (field, value) => setForm(prev => ({ ...prev, [field]: value }));
|
||||
|
||||
if (loading) return <div className="text-center py-12 text-gray-400">Laden...</div>;
|
||||
if (!recipe) return null;
|
||||
|
||||
const videoId = recipe.tiktok_url?.match(/video\/(\d+)/)?.[1];
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<Link to="/" className="text-blue-600 hover:text-blue-700 text-sm font-medium mb-4 inline-block">
|
||||
← Zurück
|
||||
</Link>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
{videoId && (
|
||||
<div className="w-full" style={{ paddingBottom: '177.78%', position: 'relative' }}>
|
||||
<iframe
|
||||
src={`https://www.tiktok.com/embed/v2/${videoId}`}
|
||||
className="absolute inset-0 w-full h-full"
|
||||
allowFullScreen
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
{editing ? (
|
||||
<input
|
||||
type="text"
|
||||
value={form.name}
|
||||
onChange={e => updateField('name', e.target.value)}
|
||||
className="text-2xl font-bold flex-1 px-2 py-1 border border-gray-300 rounded"
|
||||
/>
|
||||
) : (
|
||||
<h1 className="text-2xl font-bold">{recipe.name}</h1>
|
||||
)}
|
||||
<CategoryBadge category={editing ? form.category : recipe.category} />
|
||||
</div>
|
||||
|
||||
{editing && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Kategorie</label>
|
||||
<select
|
||||
value={form.category}
|
||||
onChange={e => updateField('category', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||
>
|
||||
{CATEGORIES.map(c => <option key={c} value={c}>{c}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!editing && recipe.description && (
|
||||
<p className="text-gray-500">{recipe.description}</p>
|
||||
)}
|
||||
|
||||
{editing && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
|
||||
<textarea
|
||||
value={form.description}
|
||||
onChange={e => updateField('description', e.target.value)}
|
||||
rows={2}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm resize-none"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{editing ? (
|
||||
<IngredientList
|
||||
ingredients={form.ingredients}
|
||||
editable
|
||||
onChange={ingredients => updateField('ingredients', ingredients)}
|
||||
/>
|
||||
) : (
|
||||
<IngredientList ingredients={recipe.ingredients} />
|
||||
)}
|
||||
|
||||
{editing ? (
|
||||
<StepList
|
||||
steps={form.steps}
|
||||
editable
|
||||
onChange={steps => updateField('steps', steps)}
|
||||
/>
|
||||
) : (
|
||||
<StepList steps={recipe.steps} />
|
||||
)}
|
||||
|
||||
{recipe.tiktok_author && (
|
||||
<p className="text-xs text-gray-400">
|
||||
Von: @{recipe.tiktok_author}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3 pt-2 border-t border-gray-100">
|
||||
{editing ? (
|
||||
<>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg font-medium transition-colors"
|
||||
>
|
||||
Speichern
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setEditing(false); setForm(recipe); }}
|
||||
className="px-4 py-2 border border-gray-300 rounded-lg font-medium hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setEditing(true)}
|
||||
className="flex-1 border border-blue-300 text-blue-600 hover:bg-blue-50 py-2 rounded-lg font-medium transition-colors"
|
||||
>
|
||||
Bearbeiten
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
className="px-4 py-2 border border-red-300 text-red-600 hover:bg-red-50 rounded-lg font-medium transition-colors"
|
||||
>
|
||||
Löschen
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user