nilsjohan/recipe-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add recipe deletion functionality and enhance inventory consumption details

Browse Source
This commit is contained in:
Nils-Johan Gynther
2026-04-10 18:44:06 +02:00
parent a743f832a2
commit dd17656e4c
7 changed files with 174 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/recipes/[id]/edit/page.tsx
+37 -10
View File
@@ -20,6 +20,7 @@ export default function EditRecipePage() {
const [products, setProducts] = useState<Product[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [isSaving, setIsSaving] = useState(false);
const [isDeleting, setIsDeleting] = useState(false);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
@@ -239,19 +240,45 @@ export default function EditRecipePage() {
</div>
)}
<div style={{ display: 'flex', gap: '1rem' }}>
<button type="button" onClick={addIngredient} style={{ padding: '0.5rem' }}>
Lägg till ingrediens
</button>
<button type="submit" disabled={isSaving} style={{ padding: '0.5rem' }}>
{isSaving ? 'Uppdaterar...' : 'Uppdatera recept'}
</button>
<div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', justifyContent: 'space-between' }}>
<div style={{ display: 'flex', gap: '1rem' }}>
<button type="button" onClick={addIngredient} style={{ padding: '0.5rem' }}>
Lägg till ingrediens
</button>
<button type="submit" disabled={isSaving || isDeleting} style={{ padding: '0.5rem' }}>
{isSaving ? 'Uppdaterar...' : 'Uppdatera recept'}
</button>
<button
type="button"
onClick={() => router.push('/recipes')}
style={{ padding: '0.5rem', background: '#f0f0f0', color: '#333', border: '1px solid #ccc', borderRadius: '4px', cursor: 'pointer' }}
>
Avbryt
</button>
</div>
<button
type="button"
onClick={() => router.push('/recipes')}
style={{ padding: '0.5rem', background: '#f0f0f0', color: '#333', border: '1px solid #ccc', borderRadius: '4px', cursor: 'pointer' }}
disabled={isSaving || isDeleting}
onClick={async () => {
if (!confirm('Är du säker på att du vill radera detta recept? Detta kan inte ångras.')) return;
setIsDeleting(true);
setError(null);
try {
const res = await fetch(`/api/recipes/${recipeId}`, { method: 'DELETE' });
if (!res.ok) {
const errorMessage = await parseErrorResponse(res);
throw new Error(errorMessage);
}
router.push('/recipes');
} catch (err) {
setError(err instanceof Error ? err.message : 'Kunde inte radera receptet.');
} finally {
setIsDeleting(false);
}
}}
style={{ padding: '0.5rem 1rem', background: '#c0392b', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
>
Avbryt
{isDeleting ? 'Raderar...' : 'Radera recept'}
</button>
</div>
</form>