Nils-Johan Gynther
97 lines
3.0 KiB
TypeScript
97 lines
3.0 KiB
TypeScript
'use client';
|
||
|
||
import { useTransition } from 'react';
|
||
import { removePantryItem } from './actions';
|
||
|
||
type PantryItem = {
|
||
id: number;
|
||
product: { id: number; name: string; canonicalName: string | null; category: string | null };
|
||
};
|
||
|
||
type Props = {
|
||
items: PantryItem[];
|
||
};
|
||
|
||
export default function PantryList({ items }: Props) {
|
||
const [isPending, startTransition] = useTransition();
|
||
|
||
function handleRemove(id: number, name: string) {
|
||
if (!confirm(`Ta bort "${name}" från baslagret?`)) return;
|
||
startTransition(async () => {
|
||
await removePantryItem(id);
|
||
});
|
||
}
|
||
|
||
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;
|
||
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',
|
||
}}
|
||
>
|
||
<span>{displayName}</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => handleRemove(item.id, displayName)}
|
||
disabled={isPending}
|
||
style={{
|
||
background: 'none',
|
||
border: 'none',
|
||
color: '#c00',
|
||
cursor: isPending ? 'not-allowed' : 'pointer',
|
||
fontSize: '1.1rem',
|
||
padding: '0.2rem 0.5rem',
|
||
lineHeight: 1,
|
||
}}
|
||
title="Ta bort från baslagret"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</section>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|