feat: add TypeScript definitions for next-auth session with accessToken and user details
Test Suite / test (24.15.0) (push) Has been cancelled

This commit is contained in:
Nils-Johan Gynther
2026-05-04 20:09:21 +02:00
parent afd2607000
commit ffe50e5151
135 changed files with 5 additions and 38 deletions
@@ -0,0 +1,87 @@
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import type { Product } from '../../features/inventory/types';
type Props = {
products: Product[];
pantryProductIds: Set<number>;
onCreated?: () => void;
};
export default function AddToPantryForm({ products, pantryProductIds, onCreated }: Props) {
const [selectedId, setSelectedId] = useState('');
const [isPending, setIsPending] = useState(false);
const [error, setError] = useState<string | null>(null);
const router = useRouter();
const available = products.filter((p) => !pantryProductIds.has(p.id));
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
if (!selectedId) return;
setError(null);
setIsPending(true);
try {
const res = await fetch('/api/admin/pantry-item', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ productId: Number(selectedId) }),
});
if (!res.ok) {
const data = await res.json().catch(() => ({}));
throw new Error(data?.error || 'Kunde inte lägga till');
}
setSelectedId('');
if (onCreated) onCreated();
else router.refresh();
} catch (err) {
setError(err instanceof Error ? err.message : 'Okänt fel');
} finally {
setIsPending(false);
}
}
return (
<form onSubmit={handleSubmit} style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', alignItems: 'center' }}>
<select
value={selectedId}
onChange={(e) => setSelectedId(e.target.value)}
required
style={{
flex: '1 1 220px',
padding: '0.6rem 0.75rem',
border: '1px solid #ddd',
borderRadius: '6px',
fontSize: '1rem',
}}
>
<option value="">Välj produkt</option>
{available.map((p) => (
<option key={p.id} value={p.id}>
{p.canonicalName || p.name}
</option>
))}
</select>
<button
type="submit"
disabled={isPending || !selectedId}
style={{
padding: '0.6rem 1.25rem',
background: '#0070f3',
color: '#fff',
border: 'none',
borderRadius: '6px',
fontWeight: 600,
cursor: isPending || !selectedId ? 'not-allowed' : 'pointer',
opacity: isPending || !selectedId ? 0.6 : 1,
fontSize: '1rem',
}}
>
{isPending ? 'Lägger till…' : 'Lägg till'}
</button>
{error && <span style={{ color: 'crimson', fontSize: '0.9rem' }}>{error}</span>}
</form>
);
}
@@ -0,0 +1,100 @@
'use client';
import { useRouter } from 'next/navigation';
type PantryItem = {
id: number;
product: { id: number; name: string; canonicalName: string | null; category: string | null };
};
type Props = {
items: PantryItem[];
onDeleted?: () => void;
};
export default function PantryList({ items, onDeleted }: Props) {
const router = useRouter();
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;
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 style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{displayName}
</span>
<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>
);
}
+36
View File
@@ -0,0 +1,36 @@
'use server';
import { revalidatePath } from 'next/cache';
import { API_BASE } from '../../lib/api';
import { getAuthHeaders } from '../../lib/auth-headers';
export async function addPantryItem(productId: number) {
const res = await fetch(`${API_BASE}/api/pantry`, {
method: 'POST',
headers: { 'Content-Type': 'application/json', ...(await getAuthHeaders()) },
body: JSON.stringify({ productId }),
cache: 'no-store',
});
if (!res.ok) {
const text = await res.text();
throw new Error(`Kunde inte lägga till i baslagret: ${text}`);
}
revalidatePath('/baslager');
}
export async function removePantryItem(id: number) {
const res = await fetch(`${API_BASE}/api/pantry/${id}`, {
method: 'DELETE',
headers: { ...(await getAuthHeaders()) },
cache: 'no-store',
});
if (!res.ok) {
const text = await res.text();
throw new Error(`Kunde inte ta bort från baslagret: ${text}`);
}
revalidatePath('/baslager');
}
+45
View File
@@ -0,0 +1,45 @@
import { fetchJson } from '../../lib/api';
import type { Product } from '../../features/inventory/types';
import Navigation from '../Navigation';
import AddToPantryForm from './AddToPantryForm';
import PantryList from './PantryList';
type PantryItem = {
id: number;
productId: number;
createdAt: string;
updatedAt: string;
product: Product;
};
export default async function BaslagerPage() {
const [pantryItems, products] = await Promise.all([
fetchJson<PantryItem[]>('/api/pantry'),
fetchJson<Product[]>('/api/products'),
]);
const pantryProductIds = new Set(pantryItems.map((i) => i.productId));
return (
<main style={{ padding: '1rem', maxWidth: '700px', margin: '0 auto' }}>
<Navigation />
<h1 style={{ marginBottom: '0.5rem' }}>Baslager</h1>
<p style={{ color: '#666', marginBottom: '1.5rem' }}>
Produkter du alltid räknar med att ha hemma.
</p>
<section style={{ marginBottom: '2rem' }}>
<h2 style={{ fontSize: '1.1rem', marginBottom: '0.75rem' }}>Lägg till produkt</h2>
<AddToPantryForm products={products} pantryProductIds={pantryProductIds} />
</section>
<section>
<h2 style={{ fontSize: '1.1rem', marginBottom: '0.75rem' }}>
{pantryItems.length} {pantryItems.length === 1 ? 'produkt' : 'produkter'} i baslagret
</h2>
<PantryList items={pantryItems} />
</section>
</main>
);
}