Nils-Johan Gynther
71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useCallback } from 'react';
|
|
import type { Product } from '../../../../features/inventory/types';
|
|
import AddToPantryForm from '../../../baslager/AddToPantryForm';
|
|
import PantryList from '../../../baslager/PantryList';
|
|
import { useAuthFetch } from '../../../../lib/use-auth-fetch';
|
|
|
|
type PantryItem = {
|
|
id: number;
|
|
productId: number;
|
|
createdAt: string;
|
|
updatedAt: string;
|
|
product: Product;
|
|
};
|
|
|
|
export default function PantryView() {
|
|
const [pantryItems, setPantryItems] = useState<PantryItem[]>([]);
|
|
const [products, setProducts] = useState<Product[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const authFetch = useAuthFetch();
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const [pantryRes, prodRes] = await Promise.all([
|
|
authFetch('/api/pantry'),
|
|
fetch('/api/products'),
|
|
]);
|
|
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()]);
|
|
setPantryItems(pantry);
|
|
setProducts(prods);
|
|
} 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} onDeleted={load} />
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|