feat: add TypeScript definitions for next-auth session with accessToken and user details
Test Suite / test (24.15.0) (push) Has been cancelled
Test Suite / test (24.15.0) (push) Has been cancelled
This commit is contained in:
Nils-Johan Gynther
@@ -0,0 +1,447 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useTransition } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { parseErrorResponse } from '../../lib/error-handler';
|
||||
import type {
|
||||
Recipe,
|
||||
RecipeInventoryPreview,
|
||||
} from '../../features/inventory/types';
|
||||
|
||||
type Props = {
|
||||
recipes: Recipe[];
|
||||
};
|
||||
|
||||
function getStatusStyle(status: 'enough' | 'missing' | 'unit_mismatch') {
|
||||
if (status === 'enough') {
|
||||
return {
|
||||
label: 'Räcker',
|
||||
color: '#1f5f2c',
|
||||
background: '#ecf8ee',
|
||||
border: '#b9e0bf',
|
||||
};
|
||||
}
|
||||
|
||||
if (status === 'missing') {
|
||||
return {
|
||||
label: 'Saknas',
|
||||
color: '#8b0000',
|
||||
background: '#ffeaea',
|
||||
border: '#f1b5b5',
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
label: 'Enhetskonflikt',
|
||||
color: '#8a4b00',
|
||||
background: '#fff4e5',
|
||||
border: '#f0cf9b',
|
||||
};
|
||||
}
|
||||
|
||||
function formatDate(value: string | null) {
|
||||
if (!value) return null;
|
||||
return new Date(value).toLocaleDateString('sv-SE');
|
||||
}
|
||||
|
||||
function isWeightUnit(unit: string): boolean {
|
||||
return ['kg', 'g', 'mg', 'ml', 'l'].includes(unit.trim().toLowerCase());
|
||||
}
|
||||
|
||||
function isPieceUnit(unit: string): boolean {
|
||||
return ['st', 'stycke'].includes(unit.trim().toLowerCase());
|
||||
}
|
||||
|
||||
export default function RecipePreview({ recipes }: Props) {
|
||||
const [selectedRecipeId, setSelectedRecipeId] = useState('');
|
||||
const [preview, setPreview] = useState<RecipeInventoryPreview | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
const selectAndLoad = (id: string) => {
|
||||
setSelectedRecipeId(id);
|
||||
setError(null);
|
||||
setPreview(null);
|
||||
|
||||
startTransition(async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/recipe-preview-proxy?id=${id}`, {
|
||||
method: 'GET',
|
||||
cache: 'no-store',
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const errorMessage = await parseErrorResponse(res);
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
|
||||
const data: RecipeInventoryPreview = await res.json();
|
||||
setPreview(data);
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : 'Ett okänt fel inträffade.';
|
||||
setError(message);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const loadPreview = () => {
|
||||
setError(null);
|
||||
setPreview(null);
|
||||
|
||||
if (!selectedRecipeId) {
|
||||
setError('Välj ett recept.');
|
||||
return;
|
||||
}
|
||||
|
||||
startTransition(async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/recipe-preview-proxy?id=${selectedRecipeId}`, {
|
||||
method: 'GET',
|
||||
cache: 'no-store',
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const errorMessage = await parseErrorResponse(res);
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
|
||||
const data: RecipeInventoryPreview = await res.json();
|
||||
setPreview(data);
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : 'Ett okänt fel inträffade.';
|
||||
setError(message);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const listedRecipes = recipes.slice(0, 10);
|
||||
|
||||
return (
|
||||
<section style={{ display: 'grid', gap: '1rem' }}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: '1rem', alignItems: 'start' }}>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '8px',
|
||||
padding: '1rem',
|
||||
display: 'grid',
|
||||
gap: '0.75rem',
|
||||
}}
|
||||
>
|
||||
<h2 style={{ margin: 0 }}>Recept mot hemmavaror</h2>
|
||||
|
||||
<label>
|
||||
Recept
|
||||
<br />
|
||||
<select
|
||||
value={selectedRecipeId}
|
||||
onChange={(e) => setSelectedRecipeId(e.target.value)}
|
||||
style={{ width: '100%', padding: '0.5rem' }}
|
||||
>
|
||||
<option value="">Välj recept</option>
|
||||
{recipes.map((recipe) => (
|
||||
<option key={recipe.id} value={recipe.id}>
|
||||
{recipe.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<div style={{ display: 'flex', gap: '0.75rem' }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={loadPreview}
|
||||
disabled={isPending}
|
||||
style={{ padding: '0.6rem 1rem' }}
|
||||
>
|
||||
{isPending ? 'Hämtar preview...' : 'Visa preview'}
|
||||
</button>
|
||||
{selectedRecipeId && (
|
||||
<Link
|
||||
href={`/recipes/${selectedRecipeId}/edit`}
|
||||
style={{
|
||||
padding: '0.6rem 1rem',
|
||||
background: '#f0f0f0',
|
||||
color: '#333',
|
||||
border: '1px solid #ccc',
|
||||
borderRadius: '4px',
|
||||
textDecoration: 'none',
|
||||
cursor: 'pointer',
|
||||
display: 'inline-block',
|
||||
}}
|
||||
>
|
||||
Redigera recept
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error ? <p style={{ color: 'crimson', margin: 0 }}>{error}</p> : null}
|
||||
</div>
|
||||
|
||||
{/* Receptlista till höger */}
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '8px',
|
||||
padding: '1rem',
|
||||
minWidth: '180px',
|
||||
maxWidth: '220px',
|
||||
}}
|
||||
>
|
||||
<h3 style={{ margin: '0 0 0.75rem 0', fontSize: '1rem' }}>Mina recept</h3>
|
||||
<ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: '0.4rem' }}>
|
||||
{listedRecipes.map((recipe) => (
|
||||
<li key={recipe.id}>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isPending}
|
||||
onClick={() => selectAndLoad(String(recipe.id))}
|
||||
style={{
|
||||
width: '100%',
|
||||
textAlign: 'left',
|
||||
padding: '0.4rem 0.6rem',
|
||||
background: String(recipe.id) === selectedRecipeId ? '#e8f0fe' : 'transparent',
|
||||
border: `1px solid ${String(recipe.id) === selectedRecipeId ? '#4285f4' : '#eee'}`,
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontWeight: String(recipe.id) === selectedRecipeId ? 600 : 400,
|
||||
color: String(recipe.id) === selectedRecipeId ? '#1a56db' : '#333',
|
||||
fontSize: '0.9rem',
|
||||
}}
|
||||
>
|
||||
{recipe.name}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(() => {
|
||||
const selected = recipes.find((r) => String(r.id) === selectedRecipeId);
|
||||
if (!selected?.instructions) return null;
|
||||
return (
|
||||
<article
|
||||
style={{
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '8px',
|
||||
padding: '1rem',
|
||||
display: 'grid',
|
||||
gap: '0.5rem',
|
||||
}}
|
||||
>
|
||||
<h3 style={{ margin: 0 }}>Instruktioner – {selected.name}</h3>
|
||||
<p style={{ margin: 0, whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>
|
||||
{selected.instructions}
|
||||
</p>
|
||||
</article>
|
||||
);
|
||||
})()}
|
||||
|
||||
{preview && preview.summary.missingCount > 0 && (
|
||||
<article
|
||||
style={{
|
||||
border: '1px solid #f1b5b5',
|
||||
borderRadius: '8px',
|
||||
padding: '1rem',
|
||||
display: 'grid',
|
||||
gap: '0.5rem',
|
||||
background: '#ffeaea',
|
||||
}}
|
||||
>
|
||||
<h3 style={{ margin: 0, color: '#8b0000' }}>
|
||||
Saknade ingredienser ({preview.summary.missingCount})
|
||||
</h3>
|
||||
<ul style={{ margin: 0, paddingLeft: '1.25rem', display: 'grid', gap: '0.25rem' }}>
|
||||
{preview.ingredients
|
||||
.filter((ing) => ing.status === 'missing')
|
||||
.map((ing) => (
|
||||
<li key={ing.ingredientId}>
|
||||
<strong>{ing.productName}</strong> — saknas{' '}
|
||||
{ing.missingQuantity} {ing.requiredUnit}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</article>
|
||||
)}
|
||||
|
||||
{preview ? (
|
||||
<section style={{ display: 'grid', gap: '1rem' }}>
|
||||
<article
|
||||
style={{
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '8px',
|
||||
padding: '1rem',
|
||||
display: 'grid',
|
||||
gap: '0.5rem',
|
||||
}}
|
||||
>
|
||||
<h3 style={{ margin: 0 }}>{preview.recipe.name}</h3>
|
||||
{preview.recipe.description ? <div>{preview.recipe.description}</div> : null}
|
||||
|
||||
<div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
|
||||
<span>Ingredienser: {preview.summary.totalIngredients}</span>
|
||||
<span>Räcker: {preview.summary.enoughCount}</span>
|
||||
<span>Saknas: {preview.summary.missingCount}</span>
|
||||
<span>Enhetskonflikter: {preview.summary.unitMismatchCount}</span>
|
||||
<strong>
|
||||
{preview.summary.canCookExactly
|
||||
? 'Kan lagas exakt'
|
||||
: 'Kan inte lagas exakt ännu'}
|
||||
</strong>
|
||||
</div>
|
||||
|
||||
{preview.summary.unitMismatchCount > 0 && (
|
||||
<div
|
||||
style={{
|
||||
padding: '0.75rem',
|
||||
background: '#fff4e5',
|
||||
border: '1px solid #f0cf9b',
|
||||
borderRadius: '4px',
|
||||
color: '#8a4b00',
|
||||
fontSize: '0.9rem',
|
||||
marginTop: '0.5rem',
|
||||
}}
|
||||
>
|
||||
<strong>⚠️ Enhetskonflikt!</strong> {preview.summary.unitMismatchCount} ingrediens
|
||||
{preview.summary.unitMismatchCount !== 1 ? 'er har' : ' har'} olika enheter än vad som finns i hemmavaror.
|
||||
<br />
|
||||
<span style={{ fontSize: '0.85rem', marginTop: '0.25rem', display: 'block' }}>
|
||||
T.ex. receptet säger "0.5 st" men du har lagrat "1.3 kg". Du kan antingen:
|
||||
<ul style={{ margin: '0.5rem 0 0 1rem', paddingLeft: '1rem' }}>
|
||||
<li>Redigera receptet för att matcha dina enheter</li>
|
||||
<li>Lagra ingrediensen med samma enhet som receptet använder</li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
|
||||
<div style={{ display: 'grid', gap: '0.75rem' }}>
|
||||
{preview.ingredients.map((ingredient) => {
|
||||
const statusStyle = getStatusStyle(ingredient.status);
|
||||
|
||||
return (
|
||||
<article
|
||||
key={ingredient.ingredientId}
|
||||
style={{
|
||||
border: `1px solid ${statusStyle.border}`,
|
||||
borderRadius: '8px',
|
||||
padding: '1rem',
|
||||
display: 'grid',
|
||||
gap: '0.75rem',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
gap: '1rem',
|
||||
flexWrap: 'wrap',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<strong>{ingredient.productName}</strong>
|
||||
<div>
|
||||
Krävs: {ingredient.requiredQuantity} {ingredient.requiredUnit}
|
||||
</div>
|
||||
{ingredient.note ? <div>Notering: {ingredient.note}</div> : null}
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
padding: '0.3rem 0.6rem',
|
||||
borderRadius: '999px',
|
||||
background: statusStyle.background,
|
||||
color: statusStyle.color,
|
||||
border: `1px solid ${statusStyle.border}`,
|
||||
fontSize: '0.85rem',
|
||||
fontWeight: 600,
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{statusStyle.label}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gap: '0.35rem' }}>
|
||||
<div>
|
||||
Tillgängligt i jämförbar enhet: {ingredient.availableQuantity}{' '}
|
||||
{ingredient.availableUnit || ''}
|
||||
</div>
|
||||
|
||||
{ingredient.status === 'missing' ? (
|
||||
<div>
|
||||
Saknas: {ingredient.missingQuantity} {ingredient.requiredUnit}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{ingredient.status === 'unit_mismatch' ? (
|
||||
<div
|
||||
style={{
|
||||
padding: '0.5rem',
|
||||
background: '#fff4e5',
|
||||
border: '1px solid #f0cf9b',
|
||||
borderRadius: '4px',
|
||||
fontSize: '0.9rem',
|
||||
marginTop: '0.25rem',
|
||||
}}
|
||||
>
|
||||
<strong>Enhetsproblem:</strong> Receptet kräver {ingredient.requiredUnit} men hemmavaror lagras i andra enheter.
|
||||
Uppdatera receptet eller lagra ingrediensen med rätt enhet.
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{ingredient.matchingInventoryItems.length > 0 ? (
|
||||
<div style={{ display: 'grid', gap: '0.35rem' }}>
|
||||
<strong>Matchande inventory</strong>
|
||||
{ingredient.matchingInventoryItems.map((item) => (
|
||||
<div key={item.id}>
|
||||
#{item.id}: {item.quantity} {item.unit}
|
||||
{item.brand ? `, ${item.brand}` : ''}
|
||||
{item.location ? `, ${item.location}` : ''}
|
||||
{item.bestBeforeDate ? `, bäst före ${formatDate(item.bestBeforeDate)}` : ''}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{ingredient.otherInventoryItems && ingredient.otherInventoryItems.length > 0 ? (
|
||||
<div style={{ display: 'grid', gap: '0.35rem' }}>
|
||||
<strong>Andra enheter:</strong>
|
||||
{ingredient.otherInventoryItems.map((item) => {
|
||||
const weight = isWeightUnit(item.unit);
|
||||
const pieces = isPieceUnit(ingredient.requiredUnit);
|
||||
const pieces2 = isPieceUnit(item.unit);
|
||||
const weight2 = isWeightUnit(ingredient.requiredUnit);
|
||||
|
||||
return (
|
||||
<div key={item.id}>
|
||||
#{item.id}: {item.quantity} {item.unit}
|
||||
{item.canConvert ? (
|
||||
<span> ≈ {(item.convertedQuantity || 0).toFixed(2)} {ingredient.requiredUnit}</span>
|
||||
) : (
|
||||
<span>
|
||||
{weight && pieces
|
||||
? ' (kan inte konvertera vikt till stycken)'
|
||||
: pieces2 && weight2
|
||||
? ' (kan inte konvertera stycken till vikt)'
|
||||
: ' (kan inte konvertera)'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user