Initial microservice-importer setup with NestJS backend and Next.js frontend

2026-04-12 16:58:23 +02:00
commit 1608eb4d70
32 changed files with 1619 additions and 0 deletions
@@ -0,0 +1,168 @@
+'use client';
+
+import { useState } from 'react';
+import Navigation from '../Navigation';
+import { parseErrorResponse } from '../../lib/error-handler';
+
+export default function ImportPage() {
+  const [quickImportUrl, setQuickImportUrl] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<any>(null);
+
+  const handleQuickImport = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setResult(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', {
+        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) {
+        setResult(data);
+      }
+    } 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: '900px', margin: '0 auto' }}>
+      <Navigation />
+      <h1 style={{ marginBottom: '1.5rem' }}>Importera recept</h1>
+
+      {/* IMPORT-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 receptlänk från ICA eller annan webbsida:
+        </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/..."
+              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>
+          )}
+        </form>
+      </div>
+
+      {/* RESULT */}
+      {result && (
+        <div
+          style={{
+            background: '#ecfdf5',
+            border: '2px solid #10b981',
+            borderRadius: '8px',
+            padding: '1.5rem',
+          }}
+        >
+          <h2 style={{ margin: '0 0 1rem 0', color: '#059669' }}>✓ Recept importerat</h2>
+          <div
+            style={{
+              background: '#fff',
+              border: '1px solid #d1fae5',
+              borderRadius: '4px',
+              padding: '1rem',
+              maxHeight: '400px',
+              overflowY: 'auto',
+            }}
+          >
+            <pre
+              style={{
+                margin: 0,
+                fontSize: '0.85rem',
+                wordBreak: 'break-word',
+                whiteSpace: 'pre-wrap',
+                overflowWrap: 'break-word',
+              }}
+            >
+              {result.markdown}
+            </pre>
+          </div>
+          <p style={{ margin: '1rem 0 0 0', fontSize: '0.9rem', color: '#059669' }}>
+            Källa: {result.source === 'ica' ? 'ICA' : 'Annan webbsida'}
+          </p>
+        </div>
+      )}
+    </main>
+  );
+}