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

feat(api): implement PATCH and DELETE routes for product management with error handling and logging

Browse Source
This commit is contained in:
Nils-Johan Gynther
2026-04-19 18:31:19 +02:00
parent f12e673af5
commit 051fb11714
4 changed files with 205 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/admin/products/AdminProductList.tsx
+11 -3
View File
@@ -54,10 +54,18 @@ export default function AdminProductList() {
const [aiApplying, setAiApplying] = useState(false);
const refetchProducts = useCallback(() => {
console.log('[AdminProductList] refetchProducts: starting fetch /api/products');
fetch('/api/products')
.then((r) => r.json())
.then((data) => { if (Array.isArray(data)) setProducts(data); })
.catch(() => {})
.then(async (r) => {
console.log('[AdminProductList] refetchProducts: HTTP', r.status);
if (!r.ok) throw new Error(`HTTP ${r.status}`);
return r.json();
})
.then((data) => {
console.log('[AdminProductList] refetchProducts: got', Array.isArray(data) ? data.length : 'non-array', 'products');
if (Array.isArray(data)) setProducts(data);
})
.catch((e) => console.error('[AdminProductList] refetchProducts error:', e))
.finally(() => setProductsLoading(false));
}, []);
frontend/app/admin/products/EditProductForm.tsx
+53 -28
View File
@@ -1,8 +1,8 @@
'use client';
import { useState, useTransition, useEffect } from 'react';
import { useState, useEffect } from 'react';
import type { Product } from '../../../features/inventory/types';
import { updateProductWithTags, deleteProduct, suggestProductCategory } from './actions';
import { suggestProductCategory } from './actions';
type CategoryNode = {
id: number;
@@ -36,7 +36,7 @@ const inputStyle: React.CSSProperties = {
export default function EditProductForm({ product, onSaved, onDeleted }: Props) {
const [isOpen, setIsOpen] = useState(false);
const [isPending, startTransition] = useTransition();
const [isPending, setIsPending] = useState(false);
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState(false);
const [tagInput, setTagInput] = useState(
@@ -93,41 +93,66 @@ export default function EditProductForm({ product, onSaved, onDeleted }: Props)
}
}
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
const formData = new FormData(e.currentTarget);
const rawTags = tagInput.split(',').map((t) => t.trim().toLowerCase()).filter(Boolean);
console.log('[EditProductForm] handleSubmit: PATCH /api/admin/product/', product.id);
setIsPending(true);
setError(null);
setSuccess(false);
const formData = new FormData(e.currentTarget);
if (selectedCategoryId !== '') {
formData.set('categoryId', String(selectedCategoryId));
} else {
formData.set('categoryId', '');
}
const rawTags = tagInput.split(',').map((t) => t.trim().toLowerCase()).filter(Boolean);
startTransition(async () => {
try {
const updated = await updateProductWithTags(formData, rawTags);
setSuccess(true);
setIsOpen(false);
onSaved(updated as Product);
} catch (err) {
setError(err instanceof Error ? err.message : 'Okänt fel');
try {
const res = await fetch(`/api/admin/product/${product.id}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
name: formData.get('name'),
canonicalName: formData.get('canonicalName') ?? '',
category: formData.get('category') ?? '',
subcategory: formData.get('subcategory') ?? '',
brand: formData.get('brand') ?? '',
categoryId: selectedCategoryId !== '' ? selectedCategoryId : null,
tags: rawTags,
}),
});
const data = await res.json();
console.log('[EditProductForm] handleSubmit: HTTP', res.status, data);
if (!res.ok) {
setError(data?.error ?? 'Okänt fel');
return;
}
});
setSuccess(true);
setIsOpen(false);
onSaved(data as Product);
} catch (err) {
console.error('[EditProductForm] handleSubmit error:', err);
setError(err instanceof Error ? err.message : 'Okänt fel');
} finally {
setIsPending(false);
}
}
function handleDelete() {
async function handleDelete() {
if (!confirm(`Ta bort "${product.name}"? Detta är en mjukradering och kan återställas.`)) return;
setError(null);
setSuccess(false);
startTransition(async () => {
try {
await deleteProduct(product.id);
onDeleted(product.id);
} catch (err) {
setError(err instanceof Error ? err.message : 'Okänt fel');
setIsPending(true);
console.log('[EditProductForm] handleDelete: DELETE /api/admin/product/', product.id);
try {
const res = await fetch(`/api/admin/product/${product.id}`, { method: 'DELETE' });
console.log('[EditProductForm] handleDelete: HTTP', res.status);
if (!res.ok) {
const data = await res.json().catch(() => ({}));
setError(data?.error ?? 'Kunde inte ta bort produkt');
return;
}
});
onDeleted(product.id);
} catch (err) {
console.error('[EditProductForm] handleDelete error:', err);
setError(err instanceof Error ? err.message : 'Okänt fel');
} finally {
setIsPending(false);
}
}
return (
frontend/app/admin/products/actions.ts
+8 -4
View File
@@ -61,9 +61,8 @@ export async function setProductTags(productId: number, tags: string[]) {
export async function updateProductWithTags(formData: FormData, tags: string[]) {
const id = Number(formData.get('id'));
console.log('[actions:updateProductWithTags] called for product id:', id, 'tags:', tags);
const name = String(formData.get('name') || '').trim();
const canonicalName = String(formData.get('canonicalName') || '').trim();
const category = String(formData.get('category') || '').trim();
const subcategory = String(formData.get('subcategory') || '').trim();
const brand = String(formData.get('brand') || '').trim();
const categoryIdRaw = formData.get('categoryId');
@@ -77,7 +76,7 @@ export async function updateProductWithTags(formData: FormData, tags: string[])
if (brand.length > 100) throw new Error('Varumärke får inte vara längre än 100 tecken.');
const authHeaders = await getAuthHeaders();
console.log('[actions:updateProductWithTags] auth headers present:', !!authHeaders.Authorization);\n
const res = await fetch(`${API_BASE}/api/products/${id}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json', ...authHeaders },
@@ -98,6 +97,7 @@ export async function updateProductWithTags(formData: FormData, tags: string[])
}
const updatedProduct = await res.json();
console.log('[actions:updateProductWithTags] PATCH OK, product id:', (updatedProduct as any)?.id);
const tagsRes = await fetch(`${API_BASE}/api/products/${id}/tags`, {
method: 'PUT',
@@ -111,13 +111,17 @@ export async function updateProductWithTags(formData: FormData, tags: string[])
throw new Error(`Kunde inte uppdatera taggar: ${text}`);
}
console.log('[actions:updateProductWithTags] tags PUT OK, fetching full product...');
// Fetch the complete product (includes tags, categoryRef) after both updates
const fullRes = await fetch(`${API_BASE}/api/products/${id}`, {
headers: authHeaders,
cache: 'no-store',
});
console.log('[actions:updateProductWithTags] full product fetch HTTP', fullRes.status);
if (!fullRes.ok) return updatedProduct;
return fullRes.json();
const result = await fullRes.json();
console.log('[actions:updateProductWithTags] returning full product id:', (result as any)?.id);
return result;
}
export async function deleteProduct(id: number) {