feat(recipes): add CreateRecipeClient component for quick recipe import
refactor(recipes): integrate Navigation component into various recipe pages
This commit is contained in:
Nils-Johan Gynther
@@ -0,0 +1,222 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useState } from 'react';
|
||||
import { parseErrorResponse } from '../../../lib/error-handler';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
export default function CreateRecipeClient() {
|
||||
const router = useRouter();
|
||||
const [quickImportUrl, setQuickImportUrl] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleQuickImport = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const input = quickImportUrl.trim();
|
||||
if (!input) {
|
||||
setError('Vänligen ange en URL eller filsökväg');
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Försök importera från URL eller fil
|
||||
const res = await fetch('/api/quick-import-proxy', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ input }),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const errorMessage = await parseErrorResponse(res);
|
||||
setError(errorMessage || 'Importen misslyckades. Kontrollera att länken eller filsökvägen är korrekt.');
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
if (data.markdown) {
|
||||
sessionStorage.setItem('prefilled_markdown', data.markdown);
|
||||
if (data.imageUrl) {
|
||||
sessionStorage.setItem('prefilled_image_url', data.imageUrl);
|
||||
}
|
||||
router.push('/recipes/write');
|
||||
}
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : 'Något oväntad gick fel';
|
||||
setError(`Fel: ${message}`);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<main style={{ padding: '1rem', maxWidth: '800px', margin: '0 auto' }}>
|
||||
<h1 style={{ marginBottom: '1.5rem' }}>Lägg till nytt recept</h1>
|
||||
|
||||
{/* SNABBIMPORT-SEKTION */}
|
||||
<div
|
||||
style={{
|
||||
background: '#fef3c7',
|
||||
border: '2px solid #f59e0b',
|
||||
borderRadius: '8px',
|
||||
padding: '1.5rem',
|
||||
marginBottom: '2rem',
|
||||
}}
|
||||
>
|
||||
<h2 style={{ margin: '0 0 0.5rem 0', fontSize: '1.1rem', color: '#92400e' }}>
|
||||
⚡ Snabbimport
|
||||
</h2>
|
||||
<p style={{ margin: '0 0 1rem 0', color: '#92400e', fontSize: '0.9rem' }}>
|
||||
Klistra in en ICA-receptlänk eller filsökväg för att importera direkt:
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleQuickImport} style={{ display: 'grid', gap: '0.75rem' }}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: '0.5rem' }}>
|
||||
<input
|
||||
type="text"
|
||||
value={quickImportUrl}
|
||||
onChange={(e) => setQuickImportUrl(e.target.value)}
|
||||
placeholder="https://www.ica.se/recept/... eller C:\recepter\file.pdf"
|
||||
style={{
|
||||
padding: '0.75rem',
|
||||
border: '1px solid #d97706',
|
||||
borderRadius: '4px',
|
||||
fontSize: '0.95rem',
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading || !quickImportUrl.trim()}
|
||||
style={{
|
||||
padding: '0.75rem 1.5rem',
|
||||
background: '#f59e0b',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: isLoading || !quickImportUrl.trim() ? 'not-allowed' : 'pointer',
|
||||
opacity: isLoading || !quickImportUrl.trim() ? 0.6 : 1,
|
||||
fontSize: '0.95rem',
|
||||
fontWeight: 600,
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{isLoading ? 'Laddar...' : '→'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p
|
||||
style={{
|
||||
margin: '0.5rem 0 0 0',
|
||||
color: '#991b1b',
|
||||
background: '#fee2e2',
|
||||
padding: '0.75rem',
|
||||
borderRadius: '4px',
|
||||
fontSize: '0.85rem',
|
||||
}}
|
||||
>
|
||||
⚠️ {error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<p style={{ margin: '0.75rem 0 0 0', color: '#92400e', fontSize: '0.8rem' }}>
|
||||
Stöds: ICA-recept, PDF-filer
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* ELLER-SEPARATOR */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '1rem',
|
||||
margin: '2rem 0',
|
||||
color: '#999',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, height: '1px', background: '#ddd' }} />
|
||||
<span style={{ fontSize: '0.9rem', fontWeight: 500 }}>eller</span>
|
||||
<div style={{ flex: 1, height: '1px', background: '#ddd' }} />
|
||||
</div>
|
||||
|
||||
{/* KLASSISKA ALTERNATIV */}
|
||||
<p style={{ marginBottom: '2rem', color: '#666' }}>
|
||||
Välj ett sätt att lägga till ett recept:
|
||||
</p>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))',
|
||||
gap: '1.5rem',
|
||||
}}
|
||||
>
|
||||
{/* Skriv in recept */}
|
||||
<Link
|
||||
href="/recipes/write"
|
||||
style={{
|
||||
padding: '2rem',
|
||||
border: '2px solid #0070f3',
|
||||
borderRadius: '8px',
|
||||
textDecoration: 'none',
|
||||
background: 'linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%)',
|
||||
transition: 'all 0.2s',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.transform = 'translateY(-4px)';
|
||||
(e.currentTarget as HTMLElement).style.boxShadow = '0 8px 16px rgba(0,112,243,0.2)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.transform = 'translateY(0)';
|
||||
(e.currentTarget as HTMLElement).style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<h2 style={{ margin: '0 0 0.5rem 0', color: '#0070f3', fontSize: '1.3rem' }}>
|
||||
✏️ Skriv in recept
|
||||
</h2>
|
||||
<p style={{ margin: 0, color: '#666', fontSize: '0.9rem' }}>
|
||||
Skriv in receptet med ingredienser och instruktioner
|
||||
</p>
|
||||
</Link>
|
||||
|
||||
{/* Importera från fil/länk */}
|
||||
<Link
|
||||
href="/recipes/import"
|
||||
style={{
|
||||
padding: '2rem',
|
||||
border: '2px solid #10b981',
|
||||
borderRadius: '8px',
|
||||
textDecoration: 'none',
|
||||
background: 'linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%)',
|
||||
transition: 'all 0.2s',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.transform = 'translateY(-4px)';
|
||||
(e.currentTarget as HTMLElement).style.boxShadow = '0 8px 16px rgba(16,185,129,0.2)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.transform = 'translateY(0)';
|
||||
(e.currentTarget as HTMLElement).style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<h2 style={{ margin: '0 0 0.5rem 0', color: '#10b981', fontSize: '1.3rem' }}>
|
||||
📥 Importera från fil
|
||||
</h2>
|
||||
<p style={{ margin: 0, color: '#666', fontSize: '0.9rem' }}>
|
||||
Ladda upp PDF, länk eller annan filtyp
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,226 +1,11 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useState } from 'react';
|
||||
import Navigation from '../../Navigation';
|
||||
import { parseErrorResponse } from '../../../lib/error-handler';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
export default function CreateRecipePage() {
|
||||
const router = useRouter();
|
||||
const [quickImportUrl, setQuickImportUrl] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleQuickImport = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const input = quickImportUrl.trim();
|
||||
if (!input) {
|
||||
setError('Vänligen ange en URL eller filsökväg');
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Försök importera från URL eller fil
|
||||
const res = await fetch('/api/quick-import-proxy', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ input }),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const errorMessage = await parseErrorResponse(res);
|
||||
setError(errorMessage || 'Importen misslyckades. Kontrollera att länken eller filsökvägen är korrekt.');
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
if (data.markdown) {
|
||||
// Omdirigera till /recipes/write med förifylld Markdown
|
||||
// Vi använder sessionStorage för att passa data mellan sidor
|
||||
sessionStorage.setItem('prefilled_markdown', data.markdown);
|
||||
if (data.imageUrl) {
|
||||
sessionStorage.setItem('prefilled_image_url', data.imageUrl);
|
||||
}
|
||||
router.push('/recipes/write');
|
||||
}
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : 'Något oväntad gick fel';
|
||||
setError(`Fel: ${message}`);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
import CreateRecipeClient from './CreateRecipeClient';
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<main style={{ padding: '1rem', maxWidth: '800px', margin: '0 auto' }}>
|
||||
<>
|
||||
<Navigation />
|
||||
<h1 style={{ marginBottom: '1.5rem' }}>Lägg till nytt recept</h1>
|
||||
|
||||
{/* SNABBIMPORT-SEKTION */}
|
||||
<div
|
||||
style={{
|
||||
background: '#fef3c7',
|
||||
border: '2px solid #f59e0b',
|
||||
borderRadius: '8px',
|
||||
padding: '1.5rem',
|
||||
marginBottom: '2rem',
|
||||
}}
|
||||
>
|
||||
<h2 style={{ margin: '0 0 0.5rem 0', fontSize: '1.1rem', color: '#92400e' }}>
|
||||
⚡ Snabbimport
|
||||
</h2>
|
||||
<p style={{ margin: '0 0 1rem 0', color: '#92400e', fontSize: '0.9rem' }}>
|
||||
Klistra in en ICA-receptlänk eller filsökväg för att importera direkt:
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleQuickImport} style={{ display: 'grid', gap: '0.75rem' }}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: '0.5rem' }}>
|
||||
<input
|
||||
type="text"
|
||||
value={quickImportUrl}
|
||||
onChange={(e) => setQuickImportUrl(e.target.value)}
|
||||
placeholder="https://www.ica.se/recept/... eller C:\recepter\file.pdf"
|
||||
style={{
|
||||
padding: '0.75rem',
|
||||
border: '1px solid #d97706',
|
||||
borderRadius: '4px',
|
||||
fontSize: '0.95rem',
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading || !quickImportUrl.trim()}
|
||||
style={{
|
||||
padding: '0.75rem 1.5rem',
|
||||
background: '#f59e0b',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: isLoading || !quickImportUrl.trim() ? 'not-allowed' : 'pointer',
|
||||
opacity: isLoading || !quickImportUrl.trim() ? 0.6 : 1,
|
||||
fontSize: '0.95rem',
|
||||
fontWeight: 600,
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{isLoading ? 'Laddar...' : '→'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p
|
||||
style={{
|
||||
margin: '0.5rem 0 0 0',
|
||||
color: '#991b1b',
|
||||
background: '#fee2e2',
|
||||
padding: '0.75rem',
|
||||
borderRadius: '4px',
|
||||
fontSize: '0.85rem',
|
||||
}}
|
||||
>
|
||||
⚠️ {error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<p style={{ margin: '0.75rem 0 0 0', color: '#92400e', fontSize: '0.8rem' }}>
|
||||
Stöds: ICA-recept, PDF-filer
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* ELLER-SEPARATOR */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '1rem',
|
||||
margin: '2rem 0',
|
||||
color: '#999',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, height: '1px', background: '#ddd' }} />
|
||||
<span style={{ fontSize: '0.9rem', fontWeight: 500 }}>eller</span>
|
||||
<div style={{ flex: 1, height: '1px', background: '#ddd' }} />
|
||||
</div>
|
||||
|
||||
{/* KLASSISKA ALTERNATIV */}
|
||||
<p style={{ marginBottom: '2rem', color: '#666' }}>
|
||||
Välj ett sätt att lägga till ett recept:
|
||||
</p>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))',
|
||||
gap: '1.5rem',
|
||||
}}
|
||||
>
|
||||
{/* Skriv in recept */}
|
||||
<Link
|
||||
href="/recipes/write"
|
||||
style={{
|
||||
padding: '2rem',
|
||||
border: '2px solid #0070f3',
|
||||
borderRadius: '8px',
|
||||
textDecoration: 'none',
|
||||
background: 'linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%)',
|
||||
transition: 'all 0.2s',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.transform = 'translateY(-4px)';
|
||||
(e.currentTarget as HTMLElement).style.boxShadow = '0 8px 16px rgba(0,112,243,0.2)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.transform = 'translateY(0)';
|
||||
(e.currentTarget as HTMLElement).style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<h2 style={{ margin: '0 0 0.5rem 0', color: '#0070f3', fontSize: '1.3rem' }}>
|
||||
✏️ Skriv in recept
|
||||
</h2>
|
||||
<p style={{ margin: 0, color: '#666', fontSize: '0.9rem' }}>
|
||||
Skriv in receptet med ingredienser och instruktioner
|
||||
</p>
|
||||
</Link>
|
||||
|
||||
{/* Importera från fil/länk */}
|
||||
<Link
|
||||
href="/recipes/import"
|
||||
style={{
|
||||
padding: '2rem',
|
||||
border: '2px solid #10b981',
|
||||
borderRadius: '8px',
|
||||
textDecoration: 'none',
|
||||
background: 'linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%)',
|
||||
transition: 'all 0.2s',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.transform = 'translateY(-4px)';
|
||||
(e.currentTarget as HTMLElement).style.boxShadow = '0 8px 16px rgba(16,185,129,0.2)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.transform = 'translateY(0)';
|
||||
(e.currentTarget as HTMLElement).style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<h2 style={{ margin: '0 0 0.5rem 0', color: '#10b981', fontSize: '1.3rem' }}>
|
||||
📥 Importera från fil
|
||||
</h2>
|
||||
<p style={{ margin: 0, color: '#666', fontSize: '0.9rem' }}>
|
||||
Ladda upp PDF, länk eller annan filtyp
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
</main>
|
||||
<CreateRecipeClient />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user