refactor: remove unused load function and related logic in PantryView component
This commit is contained in:
Nils-Johan Gynther
@@ -98,129 +98,3 @@ export default function PantryList({ items, onDeleted }: Props) {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
async function handleRemove(id: number, name: string) {
|
|
||||||
if (!confirm(`Ta bort "${name}" från baslagret?`)) return;
|
|
||||||
const res = await fetch(`/api/admin/pantry-item/${id}`, { method: 'DELETE' });
|
|
||||||
if (res.ok) {
|
|
||||||
if (onDeleted) onDeleted();
|
|
||||||
else router.refresh();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (items.length === 0) {
|
|
||||||
return (
|
|
||||||
<p style={{ color: '#888', fontStyle: 'italic' }}>
|
|
||||||
Baslagret är tomt. Lägg till produkter ovan.
|
|
||||||
</p>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Gruppera per kategori
|
|
||||||
const grouped = items.reduce<Record<string, PantryItem[]>>((acc, item) => {
|
|
||||||
const cat = item.product.category || 'Övrigt';
|
|
||||||
if (!acc[cat]) acc[cat] = [];
|
|
||||||
acc[cat].push(item);
|
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
|
|
||||||
const sortedCategories = Object.keys(grouped).sort((a, b) => {
|
|
||||||
if (a === 'Övrigt') return 1;
|
|
||||||
if (b === 'Övrigt') return -1;
|
|
||||||
return a.localeCompare(b, 'sv');
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ display: 'grid', gap: '1.5rem' }}>
|
|
||||||
{sortedCategories.map((category) => (
|
|
||||||
<section key={category}>
|
|
||||||
<h3 style={{ margin: '0 0 0.5rem', fontSize: '1rem', color: '#555', fontWeight: 600 }}>
|
|
||||||
{category}
|
|
||||||
</h3>
|
|
||||||
<div style={{ display: 'grid', gap: '0.4rem' }}>
|
|
||||||
{grouped[category].map((item) => {
|
|
||||||
const displayName = item.product.canonicalName || item.product.name;
|
|
||||||
const invItems = inventoryByProductId[item.product.id] || [];
|
|
||||||
const hasInventory = invItems.length > 0;
|
|
||||||
|
|
||||||
// Summera per enhet för visning
|
|
||||||
const unitSummary = invItems.reduce<Record<string, number>>((acc, inv) => {
|
|
||||||
const u = inv.unit || '?';
|
|
||||||
acc[u] = (acc[u] || 0) + parseFloat(inv.quantity || '0');
|
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
const inventoryText = Object.entries(unitSummary)
|
|
||||||
.map(([u, q]) => `${q % 1 === 0 ? q : q.toFixed(1)} ${u}`)
|
|
||||||
.join(', ');
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={item.id}
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
padding: '0.6rem 0.75rem',
|
|
||||||
border: '1px solid #eee',
|
|
||||||
borderRadius: '6px',
|
|
||||||
background: '#fafafa',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', minWidth: 0 }}>
|
|
||||||
<span style={{ minWidth: '1.1rem', textAlign: 'center', fontSize: '1rem' }}>
|
|
||||||
{hasInventory ? '✓' : '○'}
|
|
||||||
</span>
|
|
||||||
<span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{displayName}</span>
|
|
||||||
{hasInventory ? (
|
|
||||||
<span style={{
|
|
||||||
fontSize: '0.78rem',
|
|
||||||
color: '#1f5f2c',
|
|
||||||
background: '#ecf8ee',
|
|
||||||
border: '1px solid #b9e0bf',
|
|
||||||
borderRadius: '4px',
|
|
||||||
padding: '0.1rem 0.45rem',
|
|
||||||
whiteSpace: 'nowrap',
|
|
||||||
}}>
|
|
||||||
{inventoryText}
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span style={{
|
|
||||||
fontSize: '0.78rem',
|
|
||||||
color: '#888',
|
|
||||||
background: '#f5f5f5',
|
|
||||||
border: '1px solid #ddd',
|
|
||||||
borderRadius: '4px',
|
|
||||||
padding: '0.1rem 0.45rem',
|
|
||||||
whiteSpace: 'nowrap',
|
|
||||||
}}>
|
|
||||||
Saknas i inventariet
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => handleRemove(item.id, displayName)}
|
|
||||||
style={{
|
|
||||||
background: 'none',
|
|
||||||
border: 'none',
|
|
||||||
color: '#c00',
|
|
||||||
cursor: 'pointer',
|
|
||||||
fontSize: '1.1rem',
|
|
||||||
padding: '0.2rem 0.5rem',
|
|
||||||
lineHeight: 1,
|
|
||||||
flexShrink: 0,
|
|
||||||
}}
|
|
||||||
title="Ta bort från baslagret"
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -68,60 +68,3 @@ export default function PantryView() {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const load = useCallback(async () => {
|
|
||||||
setLoading(true);
|
|
||||||
setError(null);
|
|
||||||
try {
|
|
||||||
const [pantryRes, prodRes, invRes] = await Promise.all([
|
|
||||||
authFetch('/api/pantry'),
|
|
||||||
fetch('/api/products'),
|
|
||||||
authFetch('/api/inventory').catch(() => null),
|
|
||||||
]);
|
|
||||||
if (!pantryRes.ok) throw new Error('Kunde inte hämta baslager');
|
|
||||||
if (!prodRes.ok) throw new Error('Kunde inte hämta produkter');
|
|
||||||
const [pantry, prods] = await Promise.all([pantryRes.json(), prodRes.json()]);
|
|
||||||
const inv: InventoryItem[] = invRes?.ok ? await invRes.json() : [];
|
|
||||||
setPantryItems(pantry);
|
|
||||||
setProducts(prods);
|
|
||||||
const byProd = inv.reduce<Record<number, InventoryItem[]>>((acc, item) => {
|
|
||||||
if (!acc[item.productId]) acc[item.productId] = [];
|
|
||||||
acc[item.productId].push(item);
|
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
setInventoryByProductId(byProd);
|
|
||||||
} catch (e) {
|
|
||||||
setError(e instanceof Error ? e.message : 'Okänt fel');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [authFetch]);
|
|
||||||
|
|
||||||
useEffect(() => { load(); }, [load]);
|
|
||||||
|
|
||||||
if (loading) return <p style={{ color: '#888' }}>Laddar baslager…</p>;
|
|
||||||
if (error) return <p style={{ color: '#c00' }}>{error}</p>;
|
|
||||||
|
|
||||||
const pantryProductIds = new Set(pantryItems.map((i) => i.productId));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<p style={{ color: '#555', marginBottom: '1rem' }}>
|
|
||||||
Produkter du alltid räknar med att ha hemma. Lägg till och ta bort varor i ditt baslager.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<section style={{ marginBottom: '2rem' }}>
|
|
||||||
<h2 style={{ fontSize: '1.1rem', marginBottom: '0.75rem' }}>Lägg till produkt</h2>
|
|
||||||
<AddToPantryForm products={products} pantryProductIds={pantryProductIds} onCreated={load} />
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2 style={{ fontSize: '1.1rem', marginBottom: '0.75rem' }}>
|
|
||||||
{pantryItems.length} {pantryItems.length === 1 ? 'produkt' : 'produkter'} i baslagret
|
|
||||||
</h2>
|
|
||||||
<PantryList items={pantryItems} inventoryByProductId={inventoryByProductId} onDeleted={load} />
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user