restructuring
This commit is contained in:
Stefan Hardegger
@@ -1,564 +1,39 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState, useRef, useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
import { useRouter, useSearchParams } from 'next/navigation';
|
import { useRouter, useSearchParams } from 'next/navigation';
|
||||||
import { useAuth } from '../../contexts/AuthContext';
|
|
||||||
import AppLayout from '../../components/layout/AppLayout';
|
|
||||||
import { Input, Textarea } from '../../components/ui/Input';
|
|
||||||
import Button from '../../components/ui/Button';
|
|
||||||
import TagInput from '../../components/stories/TagInput';
|
|
||||||
import RichTextEditor from '../../components/stories/RichTextEditor';
|
|
||||||
import ImageUpload from '../../components/ui/ImageUpload';
|
|
||||||
import { storyApi, authorApi } from '../../lib/api';
|
|
||||||
|
|
||||||
export default function AddStoryPage() {
|
export default function AddStoryRedirectPage() {
|
||||||
const [importMode, setImportMode] = useState<'manual' | 'url'>('manual');
|
|
||||||
const [importUrl, setImportUrl] = useState('');
|
|
||||||
const [scraping, setScraping] = useState(false);
|
|
||||||
const [formData, setFormData] = useState({
|
|
||||||
title: '',
|
|
||||||
summary: '',
|
|
||||||
authorName: '',
|
|
||||||
contentHtml: '',
|
|
||||||
sourceUrl: '',
|
|
||||||
tags: [] as string[],
|
|
||||||
seriesName: '',
|
|
||||||
volume: '',
|
|
||||||
});
|
|
||||||
|
|
||||||
const [coverImage, setCoverImage] = useState<File | null>(null);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
|
||||||
const [duplicateWarning, setDuplicateWarning] = useState<{
|
|
||||||
show: boolean;
|
|
||||||
count: number;
|
|
||||||
duplicates: Array<{
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
authorName: string;
|
|
||||||
createdAt: string;
|
|
||||||
}>;
|
|
||||||
}>({ show: false, count: 0, duplicates: [] });
|
|
||||||
const [checkingDuplicates, setCheckingDuplicates] = useState(false);
|
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const { isAuthenticated } = useAuth();
|
|
||||||
|
|
||||||
// Pre-fill author if authorId is provided in URL
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
// Redirect to the new /import route while preserving query parameters
|
||||||
|
const mode = searchParams.get('mode');
|
||||||
const authorId = searchParams.get('authorId');
|
const authorId = searchParams.get('authorId');
|
||||||
if (authorId) {
|
const from = searchParams.get('from');
|
||||||
const loadAuthor = async () => {
|
|
||||||
try {
|
|
||||||
const author = await authorApi.getAuthor(authorId);
|
|
||||||
setFormData(prev => ({
|
|
||||||
...prev,
|
|
||||||
authorName: author.name
|
|
||||||
}));
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to load author:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
loadAuthor();
|
|
||||||
}
|
|
||||||
}, [searchParams]);
|
|
||||||
|
|
||||||
// Load pending story data from bulk combine operation
|
|
||||||
useEffect(() => {
|
|
||||||
const fromBulkCombine = searchParams.get('from') === 'bulk-combine';
|
|
||||||
if (fromBulkCombine) {
|
|
||||||
const pendingStoryData = localStorage.getItem('pendingStory');
|
|
||||||
if (pendingStoryData) {
|
|
||||||
try {
|
|
||||||
const storyData = JSON.parse(pendingStoryData);
|
|
||||||
setFormData(prev => ({
|
|
||||||
...prev,
|
|
||||||
title: storyData.title || '',
|
|
||||||
authorName: storyData.author || '',
|
|
||||||
contentHtml: storyData.content || '',
|
|
||||||
sourceUrl: storyData.sourceUrl || '',
|
|
||||||
summary: storyData.summary || '',
|
|
||||||
tags: storyData.tags || []
|
|
||||||
}));
|
|
||||||
// Clear the pending data
|
|
||||||
localStorage.removeItem('pendingStory');
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to load pending story data:', error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [searchParams]);
|
|
||||||
|
|
||||||
// Check for duplicates when title and author are both present
|
|
||||||
useEffect(() => {
|
|
||||||
const checkDuplicates = async () => {
|
|
||||||
const title = formData.title.trim();
|
|
||||||
const authorName = formData.authorName.trim();
|
|
||||||
|
|
||||||
// Don't check if user isn't authenticated or if title/author are empty
|
|
||||||
if (!isAuthenticated || !title || !authorName) {
|
|
||||||
setDuplicateWarning({ show: false, count: 0, duplicates: [] });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Debounce the check to avoid too many API calls
|
|
||||||
const timeoutId = setTimeout(async () => {
|
|
||||||
try {
|
|
||||||
setCheckingDuplicates(true);
|
|
||||||
const result = await storyApi.checkDuplicate(title, authorName);
|
|
||||||
|
|
||||||
if (result.hasDuplicates) {
|
|
||||||
setDuplicateWarning({
|
|
||||||
show: true,
|
|
||||||
count: result.count,
|
|
||||||
duplicates: result.duplicates
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
setDuplicateWarning({ show: false, count: 0, duplicates: [] });
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to check for duplicates:', error);
|
|
||||||
// Clear any existing duplicate warnings on error
|
|
||||||
setDuplicateWarning({ show: false, count: 0, duplicates: [] });
|
|
||||||
// Don't show error to user as this is just a helpful warning
|
|
||||||
// Authentication errors will be handled by the API interceptor
|
|
||||||
} finally {
|
|
||||||
setCheckingDuplicates(false);
|
|
||||||
}
|
|
||||||
}, 500); // 500ms debounce
|
|
||||||
|
|
||||||
return () => clearTimeout(timeoutId);
|
|
||||||
};
|
|
||||||
|
|
||||||
checkDuplicates();
|
|
||||||
}, [formData.title, formData.authorName, isAuthenticated]);
|
|
||||||
|
|
||||||
const handleInputChange = (field: string) => (
|
|
||||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
|
||||||
) => {
|
|
||||||
setFormData(prev => ({
|
|
||||||
...prev,
|
|
||||||
[field]: e.target.value
|
|
||||||
}));
|
|
||||||
|
|
||||||
// Clear error when user starts typing
|
let redirectUrl = '/import';
|
||||||
if (errors[field]) {
|
const queryParams = new URLSearchParams();
|
||||||
setErrors(prev => ({ ...prev, [field]: '' }));
|
|
||||||
}
|
if (mode) queryParams.set('mode', mode);
|
||||||
};
|
if (authorId) queryParams.set('authorId', authorId);
|
||||||
|
if (from) queryParams.set('from', from);
|
||||||
const handleContentChange = (html: string) => {
|
|
||||||
setFormData(prev => ({ ...prev, contentHtml: html }));
|
const queryString = queryParams.toString();
|
||||||
if (errors.contentHtml) {
|
if (queryString) {
|
||||||
setErrors(prev => ({ ...prev, contentHtml: '' }));
|
redirectUrl += '?' + queryString;
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleTagsChange = (tags: string[]) => {
|
|
||||||
setFormData(prev => ({ ...prev, tags }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleImportFromUrl = async () => {
|
|
||||||
if (!importUrl.trim()) {
|
|
||||||
setErrors({ importUrl: 'URL is required' });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setScraping(true);
|
|
||||||
setErrors({});
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch('/scrape/story', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ url: importUrl }),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
const errorData = await response.json();
|
|
||||||
throw new Error(errorData.error || 'Failed to scrape story');
|
|
||||||
}
|
|
||||||
|
|
||||||
const scrapedStory = await response.json();
|
|
||||||
|
|
||||||
// Pre-fill the form with scraped data
|
|
||||||
setFormData({
|
|
||||||
title: scrapedStory.title || '',
|
|
||||||
summary: scrapedStory.summary || '',
|
|
||||||
authorName: scrapedStory.author || '',
|
|
||||||
contentHtml: scrapedStory.content || '',
|
|
||||||
sourceUrl: scrapedStory.sourceUrl || importUrl,
|
|
||||||
tags: scrapedStory.tags || [],
|
|
||||||
seriesName: '',
|
|
||||||
volume: '',
|
|
||||||
});
|
|
||||||
|
|
||||||
// Switch to manual mode so user can edit the pre-filled data
|
|
||||||
setImportMode('manual');
|
|
||||||
setImportUrl('');
|
|
||||||
|
|
||||||
// Show success message
|
|
||||||
setErrors({ success: 'Story data imported successfully! Review and edit as needed before saving.' });
|
|
||||||
} catch (error: any) {
|
|
||||||
console.error('Failed to import story:', error);
|
|
||||||
setErrors({ importUrl: error.message });
|
|
||||||
} finally {
|
|
||||||
setScraping(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const validateForm = () => {
|
|
||||||
const newErrors: Record<string, string> = {};
|
|
||||||
|
|
||||||
if (!formData.title.trim()) {
|
|
||||||
newErrors.title = 'Title is required';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!formData.authorName.trim()) {
|
router.replace(redirectUrl);
|
||||||
newErrors.authorName = 'Author name is required';
|
}, [router, searchParams]);
|
||||||
}
|
|
||||||
|
|
||||||
if (!formData.contentHtml.trim()) {
|
|
||||||
newErrors.contentHtml = 'Story content is required';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (formData.seriesName && !formData.volume) {
|
|
||||||
newErrors.volume = 'Volume number is required when series is specified';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (formData.volume && !formData.seriesName.trim()) {
|
|
||||||
newErrors.seriesName = 'Series name is required when volume is specified';
|
|
||||||
}
|
|
||||||
|
|
||||||
setErrors(newErrors);
|
|
||||||
return Object.keys(newErrors).length === 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
if (!validateForm()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
// First, create the story with JSON data
|
|
||||||
const storyData = {
|
|
||||||
title: formData.title,
|
|
||||||
summary: formData.summary || undefined,
|
|
||||||
contentHtml: formData.contentHtml,
|
|
||||||
sourceUrl: formData.sourceUrl || undefined,
|
|
||||||
volume: formData.seriesName ? parseInt(formData.volume) : undefined,
|
|
||||||
seriesName: formData.seriesName || undefined,
|
|
||||||
authorName: formData.authorName || undefined,
|
|
||||||
tagNames: formData.tags.length > 0 ? formData.tags : undefined,
|
|
||||||
};
|
|
||||||
|
|
||||||
const story = await storyApi.createStory(storyData);
|
|
||||||
|
|
||||||
// If there's a cover image, upload it separately
|
|
||||||
if (coverImage) {
|
|
||||||
await storyApi.uploadCover(story.id, coverImage);
|
|
||||||
}
|
|
||||||
|
|
||||||
router.push(`/stories/${story.id}`);
|
|
||||||
} catch (error: any) {
|
|
||||||
console.error('Failed to create story:', error);
|
|
||||||
const errorMessage = error.response?.data?.message || 'Failed to create story';
|
|
||||||
setErrors({ submit: errorMessage });
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppLayout>
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
<div className="max-w-4xl mx-auto">
|
<div className="text-center">
|
||||||
<div className="mb-8">
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
|
||||||
<h1 className="text-3xl font-bold theme-header">Add New Story</h1>
|
<p className="text-gray-600">Redirecting...</p>
|
||||||
<p className="theme-text mt-2">
|
|
||||||
Add a story to your personal collection
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Import Mode Toggle */}
|
|
||||||
<div className="mb-8">
|
|
||||||
<div className="flex border-b border-gray-200 dark:border-gray-700">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setImportMode('manual')}
|
|
||||||
className={`px-6 py-3 text-sm font-medium border-b-2 transition-colors ${
|
|
||||||
importMode === 'manual'
|
|
||||||
? 'border-theme-accent text-theme-accent'
|
|
||||||
: 'border-transparent theme-text hover:text-theme-accent'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Manual Entry
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setImportMode('url')}
|
|
||||||
className={`px-6 py-3 text-sm font-medium border-b-2 transition-colors ${
|
|
||||||
importMode === 'url'
|
|
||||||
? 'border-theme-accent text-theme-accent'
|
|
||||||
: 'border-transparent theme-text hover:text-theme-accent'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Import from URL
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* URL Import Section */}
|
|
||||||
{importMode === 'url' && (
|
|
||||||
<div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-6 mb-8">
|
|
||||||
<h3 className="text-lg font-medium theme-header mb-4">Import Story from URL</h3>
|
|
||||||
<p className="theme-text text-sm mb-4">
|
|
||||||
Enter a URL from a supported story site to automatically extract the story content, title, author, and other metadata.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
<Input
|
|
||||||
label="Story URL"
|
|
||||||
type="url"
|
|
||||||
value={importUrl}
|
|
||||||
onChange={(e) => setImportUrl(e.target.value)}
|
|
||||||
placeholder="https://example.com/story-url"
|
|
||||||
error={errors.importUrl}
|
|
||||||
disabled={scraping}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="flex gap-3">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
onClick={handleImportFromUrl}
|
|
||||||
loading={scraping}
|
|
||||||
disabled={!importUrl.trim() || scraping}
|
|
||||||
>
|
|
||||||
{scraping ? 'Importing...' : 'Import Story'}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => setImportMode('manual')}
|
|
||||||
disabled={scraping}
|
|
||||||
>
|
|
||||||
Enter Manually Instead
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border-t pt-4 mt-4">
|
|
||||||
<p className="text-sm theme-text mb-2">
|
|
||||||
Need to import multiple stories at once?
|
|
||||||
</p>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="secondary"
|
|
||||||
onClick={() => router.push('/stories/import/bulk')}
|
|
||||||
disabled={scraping}
|
|
||||||
size="sm"
|
|
||||||
>
|
|
||||||
Bulk Import Multiple URLs
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-xs theme-text">
|
|
||||||
<p className="font-medium mb-1">Supported Sites:</p>
|
|
||||||
<p>Archive of Our Own, DeviantArt, FanFiction.Net, Literotica, Royal Road, Wattpad, and more</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Success Message */}
|
|
||||||
{errors.success && (
|
|
||||||
<div className="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg mb-6">
|
|
||||||
<p className="text-green-800 dark:text-green-200">{errors.success}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{importMode === 'manual' && (
|
|
||||||
<form onSubmit={handleSubmit} className="space-y-6">
|
|
||||||
{/* Title */}
|
|
||||||
<Input
|
|
||||||
label="Title *"
|
|
||||||
value={formData.title}
|
|
||||||
onChange={handleInputChange('title')}
|
|
||||||
placeholder="Enter the story title"
|
|
||||||
error={errors.title}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Author */}
|
|
||||||
<Input
|
|
||||||
label="Author *"
|
|
||||||
value={formData.authorName}
|
|
||||||
onChange={handleInputChange('authorName')}
|
|
||||||
placeholder="Enter the author's name"
|
|
||||||
error={errors.authorName}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Duplicate Warning */}
|
|
||||||
{duplicateWarning.show && (
|
|
||||||
<div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
<div className="text-yellow-600 dark:text-yellow-400 mt-0.5">
|
|
||||||
⚠️
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 className="font-medium text-yellow-800 dark:text-yellow-200">
|
|
||||||
Potential Duplicate Detected
|
|
||||||
</h4>
|
|
||||||
<p className="text-sm text-yellow-700 dark:text-yellow-300 mt-1">
|
|
||||||
Found {duplicateWarning.count} existing {duplicateWarning.count === 1 ? 'story' : 'stories'} with the same title and author:
|
|
||||||
</p>
|
|
||||||
<ul className="mt-2 space-y-1">
|
|
||||||
{duplicateWarning.duplicates.map((duplicate, index) => (
|
|
||||||
<li key={duplicate.id} className="text-sm text-yellow-700 dark:text-yellow-300">
|
|
||||||
• <span className="font-medium">{duplicate.title}</span> by {duplicate.authorName}
|
|
||||||
<span className="text-xs ml-2">
|
|
||||||
(added {new Date(duplicate.createdAt).toLocaleDateString()})
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
<p className="text-xs text-yellow-600 dark:text-yellow-400 mt-2">
|
|
||||||
You can still create this story if it's different from the existing ones.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Checking indicator */}
|
|
||||||
{checkingDuplicates && (
|
|
||||||
<div className="flex items-center gap-2 text-sm theme-text">
|
|
||||||
<div className="animate-spin w-4 h-4 border-2 border-theme-accent border-t-transparent rounded-full"></div>
|
|
||||||
Checking for duplicates...
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Summary */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium theme-header mb-2">
|
|
||||||
Summary
|
|
||||||
</label>
|
|
||||||
<Textarea
|
|
||||||
value={formData.summary}
|
|
||||||
onChange={handleInputChange('summary')}
|
|
||||||
placeholder="Brief summary or description of the story..."
|
|
||||||
rows={3}
|
|
||||||
/>
|
|
||||||
<p className="text-sm theme-text mt-1">
|
|
||||||
Optional summary that will be displayed on the story detail page
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Cover Image Upload */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium theme-header mb-2">
|
|
||||||
Cover Image
|
|
||||||
</label>
|
|
||||||
<ImageUpload
|
|
||||||
onImageSelect={setCoverImage}
|
|
||||||
accept="image/jpeg,image/png"
|
|
||||||
maxSizeMB={5}
|
|
||||||
aspectRatio="3:4"
|
|
||||||
placeholder="Drop a cover image here or click to select"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium theme-header mb-2">
|
|
||||||
Story Content *
|
|
||||||
</label>
|
|
||||||
<RichTextEditor
|
|
||||||
value={formData.contentHtml}
|
|
||||||
onChange={handleContentChange}
|
|
||||||
placeholder="Write or paste your story content here..."
|
|
||||||
error={errors.contentHtml}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Tags */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium theme-header mb-2">
|
|
||||||
Tags
|
|
||||||
</label>
|
|
||||||
<TagInput
|
|
||||||
tags={formData.tags}
|
|
||||||
onChange={handleTagsChange}
|
|
||||||
placeholder="Add tags to categorize your story..."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Series and Volume */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<Input
|
|
||||||
label="Series (optional)"
|
|
||||||
value={formData.seriesName}
|
|
||||||
onChange={handleInputChange('seriesName')}
|
|
||||||
placeholder="Enter series name if part of a series"
|
|
||||||
error={errors.seriesName}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Input
|
|
||||||
label="Volume/Part (optional)"
|
|
||||||
type="number"
|
|
||||||
min="1"
|
|
||||||
value={formData.volume}
|
|
||||||
onChange={handleInputChange('volume')}
|
|
||||||
placeholder="Enter volume/part number"
|
|
||||||
error={errors.volume}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Source URL */}
|
|
||||||
<Input
|
|
||||||
label="Source URL (optional)"
|
|
||||||
type="url"
|
|
||||||
value={formData.sourceUrl}
|
|
||||||
onChange={handleInputChange('sourceUrl')}
|
|
||||||
placeholder="https://example.com/original-story-url"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Submit Error */}
|
|
||||||
{errors.submit && (
|
|
||||||
<div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
|
||||||
<p className="text-red-800 dark:text-red-200">{errors.submit}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Actions */}
|
|
||||||
<div className="flex justify-end gap-4 pt-6">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => router.back()}
|
|
||||||
disabled={loading}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
loading={loading}
|
|
||||||
disabled={!formData.title || !formData.authorName || !formData.contentHtml}
|
|
||||||
>
|
|
||||||
Add Story
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</AppLayout>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -211,7 +211,7 @@ export default function AuthorDetailPage() {
|
|||||||
<p className="theme-text">
|
<p className="theme-text">
|
||||||
{stories.length} {stories.length === 1 ? 'story' : 'stories'}
|
{stories.length} {stories.length === 1 ? 'story' : 'stories'}
|
||||||
</p>
|
</p>
|
||||||
<Button href={`/add-story?authorId=${authorId}`}>
|
<Button href={`/import?authorId=${authorId}`}>
|
||||||
Add Story
|
Add Story
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
@@ -220,7 +220,7 @@ export default function AuthorDetailPage() {
|
|||||||
{stories.length === 0 ? (
|
{stories.length === 0 ? (
|
||||||
<div className="text-center py-12 theme-card theme-shadow rounded-lg">
|
<div className="text-center py-12 theme-card theme-shadow rounded-lg">
|
||||||
<p className="theme-text text-lg mb-4">No stories by this author yet.</p>
|
<p className="theme-text text-lg mb-4">No stories by this author yet.</p>
|
||||||
<Button href="/add-story">Add a Story</Button>
|
<Button href="/import">Add a Story</Button>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
|
|||||||
380
frontend/src/app/import/bulk/page.tsx
Normal file
380
frontend/src/app/import/bulk/page.tsx
Normal file
@@ -0,0 +1,380 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import BulkImportProgress from '@/components/BulkImportProgress';
|
||||||
|
import ImportLayout from '@/components/layout/ImportLayout';
|
||||||
|
import Button from '@/components/ui/Button';
|
||||||
|
import { Textarea } from '@/components/ui/Input';
|
||||||
|
|
||||||
|
interface ImportResult {
|
||||||
|
url: string;
|
||||||
|
status: 'imported' | 'skipped' | 'error';
|
||||||
|
reason?: string;
|
||||||
|
title?: string;
|
||||||
|
author?: string;
|
||||||
|
error?: string;
|
||||||
|
storyId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface BulkImportResponse {
|
||||||
|
results: ImportResult[];
|
||||||
|
summary: {
|
||||||
|
total: number;
|
||||||
|
imported: number;
|
||||||
|
skipped: number;
|
||||||
|
errors: number;
|
||||||
|
};
|
||||||
|
combinedStory?: {
|
||||||
|
title: string;
|
||||||
|
author: string;
|
||||||
|
content: string;
|
||||||
|
summary?: string;
|
||||||
|
sourceUrl: string;
|
||||||
|
tags?: string[];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function BulkImportPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [urls, setUrls] = useState('');
|
||||||
|
const [combineIntoOne, setCombineIntoOne] = useState(false);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [results, setResults] = useState<BulkImportResponse | null>(null);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [sessionId, setSessionId] = useState<string | null>(null);
|
||||||
|
const [showProgress, setShowProgress] = useState(false);
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if (!urls.trim()) {
|
||||||
|
setError('Please enter at least one URL');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsLoading(true);
|
||||||
|
setError(null);
|
||||||
|
setResults(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Parse URLs from textarea (one per line)
|
||||||
|
const urlList = urls
|
||||||
|
.split('\n')
|
||||||
|
.map(url => url.trim())
|
||||||
|
.filter(url => url.length > 0);
|
||||||
|
|
||||||
|
if (urlList.length === 0) {
|
||||||
|
setError('Please enter at least one valid URL');
|
||||||
|
setIsLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (urlList.length > 200) {
|
||||||
|
setError('Maximum 200 URLs allowed per bulk import');
|
||||||
|
setIsLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate session ID for progress tracking
|
||||||
|
const newSessionId = `bulk-import-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
||||||
|
setSessionId(newSessionId);
|
||||||
|
setShowProgress(true);
|
||||||
|
|
||||||
|
// Get auth token for server-side API calls
|
||||||
|
const token = localStorage.getItem('auth-token');
|
||||||
|
|
||||||
|
const response = await fetch('/scrape/bulk', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': token ? `Bearer ${token}` : '',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ urls: urlList, combineIntoOne, sessionId: newSessionId }),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(errorData.error || 'Failed to start bulk import');
|
||||||
|
}
|
||||||
|
|
||||||
|
const startData = await response.json();
|
||||||
|
console.log('Bulk import started:', startData);
|
||||||
|
|
||||||
|
// The progress component will handle the rest via SSE
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Bulk import error:', err);
|
||||||
|
setError(err instanceof Error ? err.message : 'Failed to import stories');
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReset = () => {
|
||||||
|
setUrls('');
|
||||||
|
setCombineIntoOne(false);
|
||||||
|
setResults(null);
|
||||||
|
setError(null);
|
||||||
|
setSessionId(null);
|
||||||
|
setShowProgress(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleProgressComplete = (data?: any) => {
|
||||||
|
// Progress component will handle this when the operation completes
|
||||||
|
setShowProgress(false);
|
||||||
|
setIsLoading(false);
|
||||||
|
|
||||||
|
// Handle completion data
|
||||||
|
if (data) {
|
||||||
|
if (data.combinedStory && combineIntoOne) {
|
||||||
|
// For combine mode, redirect to import page with the combined content
|
||||||
|
localStorage.setItem('pendingStory', JSON.stringify(data.combinedStory));
|
||||||
|
router.push('/import?from=bulk-combine');
|
||||||
|
return;
|
||||||
|
} else if (data.results && data.summary) {
|
||||||
|
// For individual mode, show the results
|
||||||
|
setResults({
|
||||||
|
results: data.results,
|
||||||
|
summary: data.summary
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fallback: just hide progress and let user know it completed
|
||||||
|
console.log('Import completed successfully');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleProgressError = (errorMessage: string) => {
|
||||||
|
setError(errorMessage);
|
||||||
|
setIsLoading(false);
|
||||||
|
setShowProgress(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'imported': return 'text-green-700 bg-green-50 border-green-200';
|
||||||
|
case 'skipped': return 'text-yellow-700 bg-yellow-50 border-yellow-200';
|
||||||
|
case 'error': return 'text-red-700 bg-red-50 border-red-200';
|
||||||
|
default: return 'text-gray-700 bg-gray-50 border-gray-200';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusIcon = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'imported': return '✓';
|
||||||
|
case 'skipped': return '⚠';
|
||||||
|
case 'error': return '✗';
|
||||||
|
default: return '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ImportLayout
|
||||||
|
title="Bulk Import Stories"
|
||||||
|
description="Import multiple stories at once by providing a list of URLs"
|
||||||
|
>
|
||||||
|
|
||||||
|
{!results ? (
|
||||||
|
// Import Form
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="urls" className="block text-sm font-medium theme-header mb-2">
|
||||||
|
Story URLs
|
||||||
|
</label>
|
||||||
|
<p className="text-sm theme-text mb-3">
|
||||||
|
Enter one URL per line. Maximum 200 URLs per import.
|
||||||
|
</p>
|
||||||
|
<Textarea
|
||||||
|
id="urls"
|
||||||
|
value={urls}
|
||||||
|
onChange={(e) => setUrls(e.target.value)}
|
||||||
|
placeholder="https://example.com/story1
|
||||||
|
https://example.com/story2
|
||||||
|
https://example.com/story3"
|
||||||
|
rows={12}
|
||||||
|
disabled={isLoading}
|
||||||
|
/>
|
||||||
|
<p className="mt-2 text-sm theme-text">
|
||||||
|
URLs: {urls.split('\n').filter(url => url.trim().length > 0).length}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center">
|
||||||
|
<input
|
||||||
|
id="combine-into-one"
|
||||||
|
type="checkbox"
|
||||||
|
checked={combineIntoOne}
|
||||||
|
onChange={(e) => setCombineIntoOne(e.target.checked)}
|
||||||
|
className="h-4 w-4 theme-accent focus:ring-theme-accent theme-border rounded"
|
||||||
|
disabled={isLoading}
|
||||||
|
/>
|
||||||
|
<label htmlFor="combine-into-one" className="ml-2 block text-sm theme-text">
|
||||||
|
Combine all URL content into a single story
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{combineIntoOne && (
|
||||||
|
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
||||||
|
<div className="text-sm text-blue-800 dark:text-blue-200">
|
||||||
|
<p className="font-medium mb-2">Combined Story Mode:</p>
|
||||||
|
<ul className="list-disc list-inside space-y-1 text-blue-700 dark:text-blue-300">
|
||||||
|
<li>All URLs will be scraped and their content combined into one story</li>
|
||||||
|
<li>Story title and author will be taken from the first URL</li>
|
||||||
|
<li>Import will fail if any URL has no content (title/author can be empty)</li>
|
||||||
|
<li>You'll be redirected to the story creation page to review and edit</li>
|
||||||
|
{urls.split('\n').filter(url => url.trim().length > 0).length > 50 && (
|
||||||
|
<li className="text-yellow-700 dark:text-yellow-300 font-medium">⚠️ Large imports (50+ URLs) may take several minutes and could be truncated if too large</li>
|
||||||
|
)}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
|
||||||
|
<div className="flex">
|
||||||
|
<div className="ml-3">
|
||||||
|
<h3 className="text-sm font-medium text-red-800 dark:text-red-200">Error</h3>
|
||||||
|
<div className="mt-2 text-sm text-red-700 dark:text-red-300">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading || !urls.trim()}
|
||||||
|
loading={isLoading}
|
||||||
|
>
|
||||||
|
{isLoading ? 'Importing...' : 'Start Import'}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="secondary"
|
||||||
|
onClick={handleReset}
|
||||||
|
disabled={isLoading}
|
||||||
|
>
|
||||||
|
Clear
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Progress Component */}
|
||||||
|
{showProgress && sessionId && (
|
||||||
|
<BulkImportProgress
|
||||||
|
sessionId={sessionId}
|
||||||
|
onComplete={handleProgressComplete}
|
||||||
|
onError={handleProgressError}
|
||||||
|
combineMode={combineIntoOne}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Fallback loading indicator if progress isn't shown yet */}
|
||||||
|
{isLoading && !showProgress && (
|
||||||
|
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-theme-accent mr-3"></div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-blue-800 dark:text-blue-200">Starting import...</p>
|
||||||
|
<p className="text-sm text-blue-600 dark:text-blue-300">
|
||||||
|
Preparing to process {urls.split('\n').filter(url => url.trim().length > 0).length} URLs.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
) : (
|
||||||
|
// Results
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Summary */}
|
||||||
|
<div className="theme-card theme-shadow rounded-lg p-6">
|
||||||
|
<h2 className="text-xl font-semibold theme-header mb-4">Import Summary</h2>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-2xl font-bold theme-header">{results.summary.total}</div>
|
||||||
|
<div className="text-sm theme-text">Total URLs</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-2xl font-bold text-green-600 dark:text-green-400">{results.summary.imported}</div>
|
||||||
|
<div className="text-sm theme-text">Imported</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-2xl font-bold text-yellow-600 dark:text-yellow-400">{results.summary.skipped}</div>
|
||||||
|
<div className="text-sm theme-text">Skipped</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-2xl font-bold text-red-600 dark:text-red-400">{results.summary.errors}</div>
|
||||||
|
<div className="text-sm theme-text">Errors</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Detailed Results */}
|
||||||
|
<div className="theme-card theme-shadow rounded-lg">
|
||||||
|
<div className="px-6 py-4 border-b theme-border">
|
||||||
|
<h3 className="text-lg font-medium theme-header">Detailed Results</h3>
|
||||||
|
</div>
|
||||||
|
<div className="divide-y theme-border">
|
||||||
|
{results.results.map((result, index) => (
|
||||||
|
<div key={index} className="p-6">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${getStatusColor(result.status)}`}>
|
||||||
|
{getStatusIcon(result.status)} {result.status.charAt(0).toUpperCase() + result.status.slice(1)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm theme-header font-medium truncate mb-1">
|
||||||
|
{result.url}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{result.title && result.author && (
|
||||||
|
<p className="text-sm theme-text mb-1">
|
||||||
|
"{result.title}" by {result.author}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{result.reason && (
|
||||||
|
<p className="text-sm theme-text">
|
||||||
|
{result.reason}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{result.error && (
|
||||||
|
<p className="text-sm text-red-600 dark:text-red-400">
|
||||||
|
Error: {result.error}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<Button onClick={handleReset}>
|
||||||
|
Import More URLs
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
onClick={() => router.push('/library')}
|
||||||
|
>
|
||||||
|
View Stories
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</ImportLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
409
frontend/src/app/import/epub/page.tsx
Normal file
409
frontend/src/app/import/epub/page.tsx
Normal file
@@ -0,0 +1,409 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { DocumentArrowUpIcon } from '@heroicons/react/24/outline';
|
||||||
|
import Button from '@/components/ui/Button';
|
||||||
|
import { Input } from '@/components/ui/Input';
|
||||||
|
import ImportLayout from '@/components/layout/ImportLayout';
|
||||||
|
|
||||||
|
interface EPUBImportResponse {
|
||||||
|
success: boolean;
|
||||||
|
message: string;
|
||||||
|
storyId?: string;
|
||||||
|
storyTitle?: string;
|
||||||
|
totalChapters?: number;
|
||||||
|
wordCount?: number;
|
||||||
|
readingPosition?: any;
|
||||||
|
warnings?: string[];
|
||||||
|
errors?: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function EPUBImportPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [isValidating, setIsValidating] = useState(false);
|
||||||
|
const [validationResult, setValidationResult] = useState<any>(null);
|
||||||
|
const [importResult, setImportResult] = useState<EPUBImportResponse | null>(null);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// Import options
|
||||||
|
const [authorName, setAuthorName] = useState<string>('');
|
||||||
|
const [seriesName, setSeriesName] = useState<string>('');
|
||||||
|
const [seriesVolume, setSeriesVolume] = useState<string>('');
|
||||||
|
const [tags, setTags] = useState<string>('');
|
||||||
|
const [preserveReadingPosition, setPreserveReadingPosition] = useState(true);
|
||||||
|
const [overwriteExisting, setOverwriteExisting] = useState(false);
|
||||||
|
const [createMissingAuthor, setCreateMissingAuthor] = useState(true);
|
||||||
|
const [createMissingSeries, setCreateMissingSeries] = useState(true);
|
||||||
|
|
||||||
|
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const file = e.target.files?.[0];
|
||||||
|
if (file) {
|
||||||
|
setSelectedFile(file);
|
||||||
|
setValidationResult(null);
|
||||||
|
setImportResult(null);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
if (file.name.toLowerCase().endsWith('.epub')) {
|
||||||
|
await validateFile(file);
|
||||||
|
} else {
|
||||||
|
setError('Please select a valid EPUB file (.epub extension)');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const validateFile = async (file: File) => {
|
||||||
|
setIsValidating(true);
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem('auth-token');
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('file', file);
|
||||||
|
|
||||||
|
const response = await fetch('/api/stories/epub/validate', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Authorization': token ? `Bearer ${token}` : '',
|
||||||
|
},
|
||||||
|
body: formData,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const result = await response.json();
|
||||||
|
setValidationResult(result);
|
||||||
|
if (!result.valid) {
|
||||||
|
setError('EPUB file validation failed: ' + result.errors.join(', '));
|
||||||
|
}
|
||||||
|
} else if (response.status === 401 || response.status === 403) {
|
||||||
|
setError('Authentication required. Please log in.');
|
||||||
|
} else {
|
||||||
|
setError('Failed to validate EPUB file');
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
setError('Error validating EPUB file: ' + (err as Error).message);
|
||||||
|
} finally {
|
||||||
|
setIsValidating(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if (!selectedFile) {
|
||||||
|
setError('Please select an EPUB file');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (validationResult && !validationResult.valid) {
|
||||||
|
setError('Cannot import invalid EPUB file');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsLoading(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem('auth-token');
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('file', selectedFile);
|
||||||
|
|
||||||
|
if (authorName) formData.append('authorName', authorName);
|
||||||
|
if (seriesName) formData.append('seriesName', seriesName);
|
||||||
|
if (seriesVolume) formData.append('seriesVolume', seriesVolume);
|
||||||
|
if (tags) {
|
||||||
|
const tagList = tags.split(',').map(t => t.trim()).filter(t => t.length > 0);
|
||||||
|
tagList.forEach(tag => formData.append('tags', tag));
|
||||||
|
}
|
||||||
|
|
||||||
|
formData.append('preserveReadingPosition', preserveReadingPosition.toString());
|
||||||
|
formData.append('overwriteExisting', overwriteExisting.toString());
|
||||||
|
formData.append('createMissingAuthor', createMissingAuthor.toString());
|
||||||
|
formData.append('createMissingSeries', createMissingSeries.toString());
|
||||||
|
|
||||||
|
const response = await fetch('/api/stories/epub/import', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Authorization': token ? `Bearer ${token}` : '',
|
||||||
|
},
|
||||||
|
body: formData,
|
||||||
|
});
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
|
||||||
|
if (response.ok && result.success) {
|
||||||
|
setImportResult(result);
|
||||||
|
} else if (response.status === 401 || response.status === 403) {
|
||||||
|
setError('Authentication required. Please log in.');
|
||||||
|
} else {
|
||||||
|
setError(result.message || 'Failed to import EPUB');
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
setError('Error importing EPUB: ' + (err as Error).message);
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
setSelectedFile(null);
|
||||||
|
setValidationResult(null);
|
||||||
|
setImportResult(null);
|
||||||
|
setError(null);
|
||||||
|
setAuthorName('');
|
||||||
|
setSeriesName('');
|
||||||
|
setSeriesVolume('');
|
||||||
|
setTags('');
|
||||||
|
};
|
||||||
|
|
||||||
|
if (importResult?.success) {
|
||||||
|
return (
|
||||||
|
<ImportLayout
|
||||||
|
title="EPUB Import Successful"
|
||||||
|
description="Your EPUB has been successfully imported into StoryCove"
|
||||||
|
>
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-6">
|
||||||
|
<h2 className="text-xl font-semibold text-green-600 dark:text-green-400 mb-2">Import Completed</h2>
|
||||||
|
<p className="theme-text">
|
||||||
|
Your EPUB has been successfully imported into StoryCove.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="theme-card theme-shadow rounded-lg p-6">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<span className="font-semibold theme-header">Story Title:</span>
|
||||||
|
<p className="theme-text">{importResult.storyTitle}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{importResult.wordCount && (
|
||||||
|
<div>
|
||||||
|
<span className="font-semibold theme-header">Word Count:</span>
|
||||||
|
<p className="theme-text">{importResult.wordCount.toLocaleString()} words</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{importResult.totalChapters && (
|
||||||
|
<div>
|
||||||
|
<span className="font-semibold theme-header">Chapters:</span>
|
||||||
|
<p className="theme-text">{importResult.totalChapters}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{importResult.warnings && importResult.warnings.length > 0 && (
|
||||||
|
<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
|
||||||
|
<strong className="text-yellow-800 dark:text-yellow-200">Warnings:</strong>
|
||||||
|
<ul className="list-disc list-inside mt-2 text-yellow-700 dark:text-yellow-300">
|
||||||
|
{importResult.warnings.map((warning, index) => (
|
||||||
|
<li key={index}>{warning}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex gap-4 mt-6">
|
||||||
|
<Button
|
||||||
|
onClick={() => router.push(`/stories/${importResult.storyId}`)}
|
||||||
|
>
|
||||||
|
View Story
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={resetForm}
|
||||||
|
variant="secondary"
|
||||||
|
>
|
||||||
|
Import Another EPUB
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ImportLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ImportLayout
|
||||||
|
title="Import EPUB"
|
||||||
|
description="Upload an EPUB file to import it as a story into your library"
|
||||||
|
>
|
||||||
|
{error && (
|
||||||
|
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
|
||||||
|
<p className="text-red-800 dark:text-red-200">{error}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
{/* File Upload */}
|
||||||
|
<div className="theme-card theme-shadow rounded-lg p-6">
|
||||||
|
<div className="mb-4">
|
||||||
|
<h3 className="text-lg font-semibold theme-header mb-2">Select EPUB File</h3>
|
||||||
|
<p className="theme-text">
|
||||||
|
Choose an EPUB file from your device to import.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="epub-file" className="block text-sm font-medium theme-header mb-1">EPUB File</label>
|
||||||
|
<Input
|
||||||
|
id="epub-file"
|
||||||
|
type="file"
|
||||||
|
accept=".epub,application/epub+zip"
|
||||||
|
onChange={handleFileChange}
|
||||||
|
disabled={isLoading || isValidating}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{selectedFile && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<DocumentArrowUpIcon className="h-5 w-5 theme-text" />
|
||||||
|
<span className="text-sm theme-text">
|
||||||
|
{selectedFile.name} ({(selectedFile.size / 1024 / 1024).toFixed(2)} MB)
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isValidating && (
|
||||||
|
<div className="text-sm theme-accent">
|
||||||
|
Validating EPUB file...
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{validationResult && (
|
||||||
|
<div className="text-sm">
|
||||||
|
{validationResult.valid ? (
|
||||||
|
<span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-200">
|
||||||
|
Valid EPUB
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-200">
|
||||||
|
Invalid EPUB
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Import Options */}
|
||||||
|
<div className="theme-card theme-shadow rounded-lg p-6">
|
||||||
|
<div className="mb-4">
|
||||||
|
<h3 className="text-lg font-semibold theme-header mb-2">Import Options</h3>
|
||||||
|
<p className="theme-text">
|
||||||
|
Configure how the EPUB should be imported.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="author-name" className="block text-sm font-medium theme-header mb-1">Author Name (Override)</label>
|
||||||
|
<Input
|
||||||
|
id="author-name"
|
||||||
|
value={authorName}
|
||||||
|
onChange={(e) => setAuthorName(e.target.value)}
|
||||||
|
placeholder="Leave empty to use EPUB metadata"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="series-name" className="block text-sm font-medium theme-header mb-1">Series Name</label>
|
||||||
|
<Input
|
||||||
|
id="series-name"
|
||||||
|
value={seriesName}
|
||||||
|
onChange={(e) => setSeriesName(e.target.value)}
|
||||||
|
placeholder="Optional: Add to a series"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{seriesName && (
|
||||||
|
<div>
|
||||||
|
<label htmlFor="series-volume" className="block text-sm font-medium theme-header mb-1">Series Volume</label>
|
||||||
|
<Input
|
||||||
|
id="series-volume"
|
||||||
|
type="number"
|
||||||
|
value={seriesVolume}
|
||||||
|
onChange={(e) => setSeriesVolume(e.target.value)}
|
||||||
|
placeholder="Volume number in series"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="tags" className="block text-sm font-medium theme-header mb-1">Tags</label>
|
||||||
|
<Input
|
||||||
|
id="tags"
|
||||||
|
value={tags}
|
||||||
|
onChange={(e) => setTags(e.target.value)}
|
||||||
|
placeholder="Comma-separated tags (e.g., fantasy, adventure, romance)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="preserve-reading-position"
|
||||||
|
checked={preserveReadingPosition}
|
||||||
|
onChange={(e) => setPreserveReadingPosition(e.target.checked)}
|
||||||
|
className="mr-2"
|
||||||
|
/>
|
||||||
|
<label htmlFor="preserve-reading-position" className="text-sm theme-text">
|
||||||
|
Preserve reading position from EPUB metadata
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="create-missing-author"
|
||||||
|
checked={createMissingAuthor}
|
||||||
|
onChange={(e) => setCreateMissingAuthor(e.target.checked)}
|
||||||
|
className="mr-2"
|
||||||
|
/>
|
||||||
|
<label htmlFor="create-missing-author" className="text-sm theme-text">
|
||||||
|
Create author if not found
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="create-missing-series"
|
||||||
|
checked={createMissingSeries}
|
||||||
|
onChange={(e) => setCreateMissingSeries(e.target.checked)}
|
||||||
|
className="mr-2"
|
||||||
|
/>
|
||||||
|
<label htmlFor="create-missing-series" className="text-sm theme-text">
|
||||||
|
Create series if not found
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="overwrite-existing"
|
||||||
|
checked={overwriteExisting}
|
||||||
|
onChange={(e) => setOverwriteExisting(e.target.checked)}
|
||||||
|
className="mr-2"
|
||||||
|
/>
|
||||||
|
<label htmlFor="overwrite-existing" className="text-sm theme-text">
|
||||||
|
Overwrite existing story with same title and author
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Submit Button */}
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
disabled={!selectedFile || isLoading || isValidating || (validationResult && !validationResult.valid)}
|
||||||
|
loading={isLoading}
|
||||||
|
>
|
||||||
|
{isLoading ? 'Importing...' : 'Import EPUB'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</ImportLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
526
frontend/src/app/import/page.tsx
Normal file
526
frontend/src/app/import/page.tsx
Normal file
@@ -0,0 +1,526 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useRef, useEffect } from 'react';
|
||||||
|
import { useRouter, useSearchParams } from 'next/navigation';
|
||||||
|
import { useAuth } from '../../contexts/AuthContext';
|
||||||
|
import ImportLayout from '../../components/layout/ImportLayout';
|
||||||
|
import { Input, Textarea } from '../../components/ui/Input';
|
||||||
|
import Button from '../../components/ui/Button';
|
||||||
|
import TagInput from '../../components/stories/TagInput';
|
||||||
|
import RichTextEditor from '../../components/stories/RichTextEditor';
|
||||||
|
import ImageUpload from '../../components/ui/ImageUpload';
|
||||||
|
import { storyApi, authorApi } from '../../lib/api';
|
||||||
|
|
||||||
|
export default function AddStoryPage() {
|
||||||
|
const [importMode, setImportMode] = useState<'manual' | 'url'>('manual');
|
||||||
|
const [importUrl, setImportUrl] = useState('');
|
||||||
|
const [scraping, setScraping] = useState(false);
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
title: '',
|
||||||
|
summary: '',
|
||||||
|
authorName: '',
|
||||||
|
contentHtml: '',
|
||||||
|
sourceUrl: '',
|
||||||
|
tags: [] as string[],
|
||||||
|
seriesName: '',
|
||||||
|
volume: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const [coverImage, setCoverImage] = useState<File | null>(null);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||||
|
const [duplicateWarning, setDuplicateWarning] = useState<{
|
||||||
|
show: boolean;
|
||||||
|
count: number;
|
||||||
|
duplicates: Array<{
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
authorName: string;
|
||||||
|
createdAt: string;
|
||||||
|
}>;
|
||||||
|
}>({ show: false, count: 0, duplicates: [] });
|
||||||
|
const [checkingDuplicates, setCheckingDuplicates] = useState(false);
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const { isAuthenticated } = useAuth();
|
||||||
|
|
||||||
|
// Handle URL parameters
|
||||||
|
useEffect(() => {
|
||||||
|
const authorId = searchParams.get('authorId');
|
||||||
|
const mode = searchParams.get('mode');
|
||||||
|
|
||||||
|
// Set import mode if specified in URL
|
||||||
|
if (mode === 'url') {
|
||||||
|
setImportMode('url');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pre-fill author if authorId is provided in URL
|
||||||
|
if (authorId) {
|
||||||
|
const loadAuthor = async () => {
|
||||||
|
try {
|
||||||
|
const author = await authorApi.getAuthor(authorId);
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
authorName: author.name
|
||||||
|
}));
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to load author:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
loadAuthor();
|
||||||
|
}
|
||||||
|
}, [searchParams]);
|
||||||
|
|
||||||
|
// Load pending story data from bulk combine operation
|
||||||
|
useEffect(() => {
|
||||||
|
const fromBulkCombine = searchParams.get('from') === 'bulk-combine';
|
||||||
|
if (fromBulkCombine) {
|
||||||
|
const pendingStoryData = localStorage.getItem('pendingStory');
|
||||||
|
if (pendingStoryData) {
|
||||||
|
try {
|
||||||
|
const storyData = JSON.parse(pendingStoryData);
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
title: storyData.title || '',
|
||||||
|
authorName: storyData.author || '',
|
||||||
|
contentHtml: storyData.content || '',
|
||||||
|
sourceUrl: storyData.sourceUrl || '',
|
||||||
|
summary: storyData.summary || '',
|
||||||
|
tags: storyData.tags || []
|
||||||
|
}));
|
||||||
|
// Clear the pending data
|
||||||
|
localStorage.removeItem('pendingStory');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to load pending story data:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [searchParams]);
|
||||||
|
|
||||||
|
// Check for duplicates when title and author are both present
|
||||||
|
useEffect(() => {
|
||||||
|
const checkDuplicates = async () => {
|
||||||
|
const title = formData.title.trim();
|
||||||
|
const authorName = formData.authorName.trim();
|
||||||
|
|
||||||
|
// Don't check if user isn't authenticated or if title/author are empty
|
||||||
|
if (!isAuthenticated || !title || !authorName) {
|
||||||
|
setDuplicateWarning({ show: false, count: 0, duplicates: [] });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Debounce the check to avoid too many API calls
|
||||||
|
const timeoutId = setTimeout(async () => {
|
||||||
|
try {
|
||||||
|
setCheckingDuplicates(true);
|
||||||
|
const result = await storyApi.checkDuplicate(title, authorName);
|
||||||
|
|
||||||
|
if (result.hasDuplicates) {
|
||||||
|
setDuplicateWarning({
|
||||||
|
show: true,
|
||||||
|
count: result.count,
|
||||||
|
duplicates: result.duplicates
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
setDuplicateWarning({ show: false, count: 0, duplicates: [] });
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to check for duplicates:', error);
|
||||||
|
// Clear any existing duplicate warnings on error
|
||||||
|
setDuplicateWarning({ show: false, count: 0, duplicates: [] });
|
||||||
|
// Don't show error to user as this is just a helpful warning
|
||||||
|
// Authentication errors will be handled by the API interceptor
|
||||||
|
} finally {
|
||||||
|
setCheckingDuplicates(false);
|
||||||
|
}
|
||||||
|
}, 500); // 500ms debounce
|
||||||
|
|
||||||
|
return () => clearTimeout(timeoutId);
|
||||||
|
};
|
||||||
|
|
||||||
|
checkDuplicates();
|
||||||
|
}, [formData.title, formData.authorName, isAuthenticated]);
|
||||||
|
|
||||||
|
const handleInputChange = (field: string) => (
|
||||||
|
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||||
|
) => {
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
[field]: e.target.value
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Clear error when user starts typing
|
||||||
|
if (errors[field]) {
|
||||||
|
setErrors(prev => ({ ...prev, [field]: '' }));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleContentChange = (html: string) => {
|
||||||
|
setFormData(prev => ({ ...prev, contentHtml: html }));
|
||||||
|
if (errors.contentHtml) {
|
||||||
|
setErrors(prev => ({ ...prev, contentHtml: '' }));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTagsChange = (tags: string[]) => {
|
||||||
|
setFormData(prev => ({ ...prev, tags }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleImportFromUrl = async () => {
|
||||||
|
if (!importUrl.trim()) {
|
||||||
|
setErrors({ importUrl: 'URL is required' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setScraping(true);
|
||||||
|
setErrors({});
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/scrape/story', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ url: importUrl }),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(errorData.error || 'Failed to scrape story');
|
||||||
|
}
|
||||||
|
|
||||||
|
const scrapedStory = await response.json();
|
||||||
|
|
||||||
|
// Pre-fill the form with scraped data
|
||||||
|
setFormData({
|
||||||
|
title: scrapedStory.title || '',
|
||||||
|
summary: scrapedStory.summary || '',
|
||||||
|
authorName: scrapedStory.author || '',
|
||||||
|
contentHtml: scrapedStory.content || '',
|
||||||
|
sourceUrl: scrapedStory.sourceUrl || importUrl,
|
||||||
|
tags: scrapedStory.tags || [],
|
||||||
|
seriesName: '',
|
||||||
|
volume: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
// Switch to manual mode so user can edit the pre-filled data
|
||||||
|
setImportMode('manual');
|
||||||
|
setImportUrl('');
|
||||||
|
|
||||||
|
// Show success message
|
||||||
|
setErrors({ success: 'Story data imported successfully! Review and edit as needed before saving.' });
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('Failed to import story:', error);
|
||||||
|
setErrors({ importUrl: error.message });
|
||||||
|
} finally {
|
||||||
|
setScraping(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const validateForm = () => {
|
||||||
|
const newErrors: Record<string, string> = {};
|
||||||
|
|
||||||
|
if (!formData.title.trim()) {
|
||||||
|
newErrors.title = 'Title is required';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.authorName.trim()) {
|
||||||
|
newErrors.authorName = 'Author name is required';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.contentHtml.trim()) {
|
||||||
|
newErrors.contentHtml = 'Story content is required';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (formData.seriesName && !formData.volume) {
|
||||||
|
newErrors.volume = 'Volume number is required when series is specified';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (formData.volume && !formData.seriesName.trim()) {
|
||||||
|
newErrors.seriesName = 'Series name is required when volume is specified';
|
||||||
|
}
|
||||||
|
|
||||||
|
setErrors(newErrors);
|
||||||
|
return Object.keys(newErrors).length === 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if (!validateForm()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// First, create the story with JSON data
|
||||||
|
const storyData = {
|
||||||
|
title: formData.title,
|
||||||
|
summary: formData.summary || undefined,
|
||||||
|
contentHtml: formData.contentHtml,
|
||||||
|
sourceUrl: formData.sourceUrl || undefined,
|
||||||
|
volume: formData.seriesName ? parseInt(formData.volume) : undefined,
|
||||||
|
seriesName: formData.seriesName || undefined,
|
||||||
|
authorName: formData.authorName || undefined,
|
||||||
|
tagNames: formData.tags.length > 0 ? formData.tags : undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
const story = await storyApi.createStory(storyData);
|
||||||
|
|
||||||
|
// If there's a cover image, upload it separately
|
||||||
|
if (coverImage) {
|
||||||
|
await storyApi.uploadCover(story.id, coverImage);
|
||||||
|
}
|
||||||
|
|
||||||
|
router.push(`/stories/${story.id}`);
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('Failed to create story:', error);
|
||||||
|
const errorMessage = error.response?.data?.message || 'Failed to create story';
|
||||||
|
setErrors({ submit: errorMessage });
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ImportLayout
|
||||||
|
title="Add New Story"
|
||||||
|
description="Add a story to your personal collection"
|
||||||
|
>
|
||||||
|
{/* URL Import Section */}
|
||||||
|
{importMode === 'url' && (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-6">
|
||||||
|
<h3 className="text-lg font-medium theme-header mb-4">Import Story from URL</h3>
|
||||||
|
<p className="theme-text text-sm mb-4">
|
||||||
|
Enter a URL from a supported story site to automatically extract the story content, title, author, and other metadata.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Input
|
||||||
|
label="Story URL"
|
||||||
|
type="url"
|
||||||
|
value={importUrl}
|
||||||
|
onChange={(e) => setImportUrl(e.target.value)}
|
||||||
|
placeholder="https://example.com/story-url"
|
||||||
|
error={errors.importUrl}
|
||||||
|
disabled={scraping}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
onClick={handleImportFromUrl}
|
||||||
|
loading={scraping}
|
||||||
|
disabled={!importUrl.trim() || scraping}
|
||||||
|
>
|
||||||
|
{scraping ? 'Importing...' : 'Import Story'}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => setImportMode('manual')}
|
||||||
|
disabled={scraping}
|
||||||
|
>
|
||||||
|
Enter Manually Instead
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-xs theme-text">
|
||||||
|
<p className="font-medium mb-1">Supported Sites:</p>
|
||||||
|
<p>Archive of Our Own, DeviantArt, FanFiction.Net, Literotica, Royal Road, Wattpad, and more</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Success Message */}
|
||||||
|
{errors.success && (
|
||||||
|
<div className="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg mb-6">
|
||||||
|
<p className="text-green-800 dark:text-green-200">{errors.success}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Manual Entry Form */}
|
||||||
|
{importMode === 'manual' && (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
{/* Title */}
|
||||||
|
<Input
|
||||||
|
label="Title *"
|
||||||
|
value={formData.title}
|
||||||
|
onChange={handleInputChange('title')}
|
||||||
|
placeholder="Enter the story title"
|
||||||
|
error={errors.title}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Author */}
|
||||||
|
<Input
|
||||||
|
label="Author *"
|
||||||
|
value={formData.authorName}
|
||||||
|
onChange={handleInputChange('authorName')}
|
||||||
|
placeholder="Enter the author's name"
|
||||||
|
error={errors.authorName}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Duplicate Warning */}
|
||||||
|
{duplicateWarning.show && (
|
||||||
|
<div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className="text-yellow-600 dark:text-yellow-400 mt-0.5">
|
||||||
|
⚠️
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="font-medium text-yellow-800 dark:text-yellow-200">
|
||||||
|
Potential Duplicate Detected
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-yellow-700 dark:text-yellow-300 mt-1">
|
||||||
|
Found {duplicateWarning.count} existing {duplicateWarning.count === 1 ? 'story' : 'stories'} with the same title and author:
|
||||||
|
</p>
|
||||||
|
<ul className="mt-2 space-y-1">
|
||||||
|
{duplicateWarning.duplicates.map((duplicate, index) => (
|
||||||
|
<li key={duplicate.id} className="text-sm text-yellow-700 dark:text-yellow-300">
|
||||||
|
• <span className="font-medium">{duplicate.title}</span> by {duplicate.authorName}
|
||||||
|
<span className="text-xs ml-2">
|
||||||
|
(added {new Date(duplicate.createdAt).toLocaleDateString()})
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<p className="text-xs text-yellow-600 dark:text-yellow-400 mt-2">
|
||||||
|
You can still create this story if it's different from the existing ones.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Checking indicator */}
|
||||||
|
{checkingDuplicates && (
|
||||||
|
<div className="flex items-center gap-2 text-sm theme-text">
|
||||||
|
<div className="animate-spin w-4 h-4 border-2 border-theme-accent border-t-transparent rounded-full"></div>
|
||||||
|
Checking for duplicates...
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Summary */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium theme-header mb-2">
|
||||||
|
Summary
|
||||||
|
</label>
|
||||||
|
<Textarea
|
||||||
|
value={formData.summary}
|
||||||
|
onChange={handleInputChange('summary')}
|
||||||
|
placeholder="Brief summary or description of the story..."
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
|
<p className="text-sm theme-text mt-1">
|
||||||
|
Optional summary that will be displayed on the story detail page
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Cover Image Upload */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium theme-header mb-2">
|
||||||
|
Cover Image
|
||||||
|
</label>
|
||||||
|
<ImageUpload
|
||||||
|
onImageSelect={setCoverImage}
|
||||||
|
accept="image/jpeg,image/png"
|
||||||
|
maxSizeMB={5}
|
||||||
|
aspectRatio="3:4"
|
||||||
|
placeholder="Drop a cover image here or click to select"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium theme-header mb-2">
|
||||||
|
Story Content *
|
||||||
|
</label>
|
||||||
|
<RichTextEditor
|
||||||
|
value={formData.contentHtml}
|
||||||
|
onChange={handleContentChange}
|
||||||
|
placeholder="Write or paste your story content here..."
|
||||||
|
error={errors.contentHtml}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tags */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium theme-header mb-2">
|
||||||
|
Tags
|
||||||
|
</label>
|
||||||
|
<TagInput
|
||||||
|
tags={formData.tags}
|
||||||
|
onChange={handleTagsChange}
|
||||||
|
placeholder="Add tags to categorize your story..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Series and Volume */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<Input
|
||||||
|
label="Series (optional)"
|
||||||
|
value={formData.seriesName}
|
||||||
|
onChange={handleInputChange('seriesName')}
|
||||||
|
placeholder="Enter series name if part of a series"
|
||||||
|
error={errors.seriesName}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Input
|
||||||
|
label="Volume/Part (optional)"
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
value={formData.volume}
|
||||||
|
onChange={handleInputChange('volume')}
|
||||||
|
placeholder="Enter volume/part number"
|
||||||
|
error={errors.volume}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Source URL */}
|
||||||
|
<Input
|
||||||
|
label="Source URL (optional)"
|
||||||
|
type="url"
|
||||||
|
value={formData.sourceUrl}
|
||||||
|
onChange={handleInputChange('sourceUrl')}
|
||||||
|
placeholder="https://example.com/original-story-url"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Submit Error */}
|
||||||
|
{errors.submit && (
|
||||||
|
<div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
||||||
|
<p className="text-red-800 dark:text-red-200">{errors.submit}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex justify-end gap-4 pt-6">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => router.back()}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
loading={loading}
|
||||||
|
disabled={!formData.title || !formData.authorName || !formData.contentHtml}
|
||||||
|
>
|
||||||
|
Add Story
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</ImportLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -163,10 +163,10 @@ export default function LibraryPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<Button href="/add-story">
|
<Button href="/import">
|
||||||
Add New Story
|
Add New Story
|
||||||
</Button>
|
</Button>
|
||||||
<Button href="/stories/import/epub" variant="secondary">
|
<Button href="/import/epub" variant="secondary">
|
||||||
📖 Import EPUB
|
📖 Import EPUB
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
@@ -277,7 +277,7 @@ export default function LibraryPage() {
|
|||||||
Clear Filters
|
Clear Filters
|
||||||
</Button>
|
</Button>
|
||||||
) : (
|
) : (
|
||||||
<Button href="/add-story">
|
<Button href="/import">
|
||||||
Add Your First Story
|
Add Your First Story
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -1,395 +1,20 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState } from 'react';
|
import { useEffect } from 'react';
|
||||||
import { useRouter } from 'next/navigation';
|
import { useRouter } from 'next/navigation';
|
||||||
import Link from 'next/link';
|
|
||||||
import { ArrowLeftIcon } from '@heroicons/react/24/outline';
|
|
||||||
import BulkImportProgress from '@/components/BulkImportProgress';
|
|
||||||
|
|
||||||
interface ImportResult {
|
export default function BulkImportRedirectPage() {
|
||||||
url: string;
|
|
||||||
status: 'imported' | 'skipped' | 'error';
|
|
||||||
reason?: string;
|
|
||||||
title?: string;
|
|
||||||
author?: string;
|
|
||||||
error?: string;
|
|
||||||
storyId?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface BulkImportResponse {
|
|
||||||
results: ImportResult[];
|
|
||||||
summary: {
|
|
||||||
total: number;
|
|
||||||
imported: number;
|
|
||||||
skipped: number;
|
|
||||||
errors: number;
|
|
||||||
};
|
|
||||||
combinedStory?: {
|
|
||||||
title: string;
|
|
||||||
author: string;
|
|
||||||
content: string;
|
|
||||||
summary?: string;
|
|
||||||
sourceUrl: string;
|
|
||||||
tags?: string[];
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function BulkImportPage() {
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [urls, setUrls] = useState('');
|
|
||||||
const [combineIntoOne, setCombineIntoOne] = useState(false);
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
|
||||||
const [results, setResults] = useState<BulkImportResponse | null>(null);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [sessionId, setSessionId] = useState<string | null>(null);
|
|
||||||
const [showProgress, setShowProgress] = useState(false);
|
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
useEffect(() => {
|
||||||
e.preventDefault();
|
router.replace('/import/bulk');
|
||||||
|
}, [router]);
|
||||||
if (!urls.trim()) {
|
|
||||||
setError('Please enter at least one URL');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsLoading(true);
|
|
||||||
setError(null);
|
|
||||||
setResults(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Parse URLs from textarea (one per line)
|
|
||||||
const urlList = urls
|
|
||||||
.split('\n')
|
|
||||||
.map(url => url.trim())
|
|
||||||
.filter(url => url.length > 0);
|
|
||||||
|
|
||||||
if (urlList.length === 0) {
|
|
||||||
setError('Please enter at least one valid URL');
|
|
||||||
setIsLoading(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (urlList.length > 200) {
|
|
||||||
setError('Maximum 200 URLs allowed per bulk import');
|
|
||||||
setIsLoading(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Generate session ID for progress tracking
|
|
||||||
const newSessionId = `bulk-import-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
|
||||||
setSessionId(newSessionId);
|
|
||||||
setShowProgress(true);
|
|
||||||
|
|
||||||
// Get auth token for server-side API calls
|
|
||||||
const token = localStorage.getItem('auth-token');
|
|
||||||
|
|
||||||
const response = await fetch('/scrape/bulk', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Authorization': token ? `Bearer ${token}` : '',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ urls: urlList, combineIntoOne, sessionId: newSessionId }),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
const errorData = await response.json();
|
|
||||||
throw new Error(errorData.error || 'Failed to start bulk import');
|
|
||||||
}
|
|
||||||
|
|
||||||
const startData = await response.json();
|
|
||||||
console.log('Bulk import started:', startData);
|
|
||||||
|
|
||||||
// The progress component will handle the rest via SSE
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Bulk import error:', err);
|
|
||||||
setError(err instanceof Error ? err.message : 'Failed to import stories');
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleReset = () => {
|
|
||||||
setUrls('');
|
|
||||||
setCombineIntoOne(false);
|
|
||||||
setResults(null);
|
|
||||||
setError(null);
|
|
||||||
setSessionId(null);
|
|
||||||
setShowProgress(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleProgressComplete = (data?: any) => {
|
|
||||||
// Progress component will handle this when the operation completes
|
|
||||||
setShowProgress(false);
|
|
||||||
setIsLoading(false);
|
|
||||||
|
|
||||||
// Handle completion data
|
|
||||||
if (data) {
|
|
||||||
if (data.combinedStory && combineIntoOne) {
|
|
||||||
// For combine mode, redirect to add story page with the combined content
|
|
||||||
localStorage.setItem('pendingStory', JSON.stringify(data.combinedStory));
|
|
||||||
router.push('/add-story?from=bulk-combine');
|
|
||||||
return;
|
|
||||||
} else if (data.results && data.summary) {
|
|
||||||
// For individual mode, show the results
|
|
||||||
setResults({
|
|
||||||
results: data.results,
|
|
||||||
summary: data.summary
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fallback: just hide progress and let user know it completed
|
|
||||||
console.log('Import completed successfully');
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleProgressError = (errorMessage: string) => {
|
|
||||||
setError(errorMessage);
|
|
||||||
setIsLoading(false);
|
|
||||||
setShowProgress(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const getStatusColor = (status: string) => {
|
|
||||||
switch (status) {
|
|
||||||
case 'imported': return 'text-green-700 bg-green-50 border-green-200';
|
|
||||||
case 'skipped': return 'text-yellow-700 bg-yellow-50 border-yellow-200';
|
|
||||||
case 'error': return 'text-red-700 bg-red-50 border-red-200';
|
|
||||||
default: return 'text-gray-700 bg-gray-50 border-gray-200';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getStatusIcon = (status: string) => {
|
|
||||||
switch (status) {
|
|
||||||
case 'imported': return '✓';
|
|
||||||
case 'skipped': return '⚠';
|
|
||||||
case 'error': return '✗';
|
|
||||||
default: return '';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto px-4 py-6">
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
<div className="max-w-4xl mx-auto">
|
<div className="text-center">
|
||||||
{/* Header */}
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
|
||||||
<div className="mb-6">
|
<p className="text-gray-600">Redirecting...</p>
|
||||||
<div className="flex items-center gap-4 mb-4">
|
|
||||||
<Link
|
|
||||||
href="/library"
|
|
||||||
className="inline-flex items-center text-blue-600 hover:text-blue-800"
|
|
||||||
>
|
|
||||||
<ArrowLeftIcon className="h-4 w-4 mr-1" />
|
|
||||||
Back to Library
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">Bulk Import Stories</h1>
|
|
||||||
<p className="text-gray-600">
|
|
||||||
Import multiple stories at once by providing a list of URLs. Each URL will be scraped
|
|
||||||
and automatically added to your story collection.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{!results ? (
|
|
||||||
// Import Form
|
|
||||||
<form onSubmit={handleSubmit} className="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label htmlFor="urls" className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Story URLs
|
|
||||||
</label>
|
|
||||||
<p className="text-sm text-gray-500 mb-3">
|
|
||||||
Enter one URL per line. Maximum 200 URLs per import.
|
|
||||||
</p>
|
|
||||||
<textarea
|
|
||||||
id="urls"
|
|
||||||
value={urls}
|
|
||||||
onChange={(e) => setUrls(e.target.value)}
|
|
||||||
placeholder="https://example.com/story1 https://example.com/story2 https://example.com/story3"
|
|
||||||
className="w-full h-64 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
||||||
disabled={isLoading}
|
|
||||||
/>
|
|
||||||
<p className="mt-2 text-sm text-gray-500">
|
|
||||||
URLs: {urls.split('\n').filter(url => url.trim().length > 0).length}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center">
|
|
||||||
<input
|
|
||||||
id="combine-into-one"
|
|
||||||
type="checkbox"
|
|
||||||
checked={combineIntoOne}
|
|
||||||
onChange={(e) => setCombineIntoOne(e.target.checked)}
|
|
||||||
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
|
||||||
disabled={isLoading}
|
|
||||||
/>
|
|
||||||
<label htmlFor="combine-into-one" className="ml-2 block text-sm text-gray-700">
|
|
||||||
Combine all URL content into a single story
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{combineIntoOne && (
|
|
||||||
<div className="bg-blue-50 border border-blue-200 rounded-md p-4">
|
|
||||||
<div className="text-sm text-blue-800">
|
|
||||||
<p className="font-medium mb-2">Combined Story Mode:</p>
|
|
||||||
<ul className="list-disc list-inside space-y-1 text-blue-700">
|
|
||||||
<li>All URLs will be scraped and their content combined into one story</li>
|
|
||||||
<li>Story title and author will be taken from the first URL</li>
|
|
||||||
<li>Import will fail if any URL has no content (title/author can be empty)</li>
|
|
||||||
<li>You'll be redirected to the story creation page to review and edit</li>
|
|
||||||
{urls.split('\n').filter(url => url.trim().length > 0).length > 50 && (
|
|
||||||
<li className="text-yellow-700 font-medium">⚠️ Large imports (50+ URLs) may take several minutes and could be truncated if too large</li>
|
|
||||||
)}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<div className="bg-red-50 border border-red-200 rounded-md p-4">
|
|
||||||
<div className="flex">
|
|
||||||
<div className="ml-3">
|
|
||||||
<h3 className="text-sm font-medium text-red-800">Error</h3>
|
|
||||||
<div className="mt-2 text-sm text-red-700">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex gap-4">
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={isLoading || !urls.trim()}
|
|
||||||
className="px-6 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
>
|
|
||||||
{isLoading ? 'Importing...' : 'Start Import'}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleReset}
|
|
||||||
disabled={isLoading}
|
|
||||||
className="px-6 py-2 bg-gray-600 text-white font-medium rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
>
|
|
||||||
Clear
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Progress Component */}
|
|
||||||
{showProgress && sessionId && (
|
|
||||||
<BulkImportProgress
|
|
||||||
sessionId={sessionId}
|
|
||||||
onComplete={handleProgressComplete}
|
|
||||||
onError={handleProgressError}
|
|
||||||
combineMode={combineIntoOne}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Fallback loading indicator if progress isn't shown yet */}
|
|
||||||
{isLoading && !showProgress && (
|
|
||||||
<div className="bg-blue-50 border border-blue-200 rounded-md p-4">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600 mr-3"></div>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-medium text-blue-800">Starting import...</p>
|
|
||||||
<p className="text-sm text-blue-600">
|
|
||||||
Preparing to process {urls.split('\n').filter(url => url.trim().length > 0).length} URLs.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</form>
|
|
||||||
) : (
|
|
||||||
// Results
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Summary */}
|
|
||||||
<div className="bg-white border border-gray-200 rounded-lg p-6">
|
|
||||||
<h2 className="text-xl font-semibold text-gray-900 mb-4">Import Summary</h2>
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-2xl font-bold text-gray-900">{results.summary.total}</div>
|
|
||||||
<div className="text-sm text-gray-600">Total URLs</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-2xl font-bold text-green-600">{results.summary.imported}</div>
|
|
||||||
<div className="text-sm text-gray-600">Imported</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-2xl font-bold text-yellow-600">{results.summary.skipped}</div>
|
|
||||||
<div className="text-sm text-gray-600">Skipped</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-2xl font-bold text-red-600">{results.summary.errors}</div>
|
|
||||||
<div className="text-sm text-gray-600">Errors</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Detailed Results */}
|
|
||||||
<div className="bg-white border border-gray-200 rounded-lg">
|
|
||||||
<div className="px-6 py-4 border-b border-gray-200">
|
|
||||||
<h3 className="text-lg font-medium text-gray-900">Detailed Results</h3>
|
|
||||||
</div>
|
|
||||||
<div className="divide-y divide-gray-200">
|
|
||||||
{results.results.map((result, index) => (
|
|
||||||
<div key={index} className="p-6">
|
|
||||||
<div className="flex items-start justify-between">
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="flex items-center gap-2 mb-2">
|
|
||||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${getStatusColor(result.status)}`}>
|
|
||||||
{getStatusIcon(result.status)} {result.status.charAt(0).toUpperCase() + result.status.slice(1)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="text-sm text-gray-900 font-medium truncate mb-1">
|
|
||||||
{result.url}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{result.title && result.author && (
|
|
||||||
<p className="text-sm text-gray-600 mb-1">
|
|
||||||
"{result.title}" by {result.author}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{result.reason && (
|
|
||||||
<p className="text-sm text-gray-500">
|
|
||||||
{result.reason}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{result.error && (
|
|
||||||
<p className="text-sm text-red-600">
|
|
||||||
Error: {result.error}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Actions */}
|
|
||||||
<div className="flex gap-4">
|
|
||||||
<button
|
|
||||||
onClick={handleReset}
|
|
||||||
className="px-6 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
|
||||||
>
|
|
||||||
Import More URLs
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<Link
|
|
||||||
href="/library"
|
|
||||||
className="px-6 py-2 bg-gray-600 text-white font-medium rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
|
|
||||||
>
|
|
||||||
View Stories
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,432 +1,21 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState } from 'react';
|
import { useEffect } from 'react';
|
||||||
import { useRouter } from 'next/navigation';
|
import { useRouter } from 'next/navigation';
|
||||||
import Link from 'next/link';
|
|
||||||
import { ArrowLeftIcon, DocumentArrowUpIcon } from '@heroicons/react/24/outline';
|
|
||||||
import Button from '@/components/ui/Button';
|
|
||||||
import { Input } from '@/components/ui/Input';
|
|
||||||
|
|
||||||
interface EPUBImportResponse {
|
export default function EpubImportRedirectPage() {
|
||||||
success: boolean;
|
|
||||||
message: string;
|
|
||||||
storyId?: string;
|
|
||||||
storyTitle?: string;
|
|
||||||
totalChapters?: number;
|
|
||||||
wordCount?: number;
|
|
||||||
readingPosition?: any;
|
|
||||||
warnings?: string[];
|
|
||||||
errors?: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function EPUBImportPage() {
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
|
||||||
const [isValidating, setIsValidating] = useState(false);
|
|
||||||
const [validationResult, setValidationResult] = useState<any>(null);
|
|
||||||
const [importResult, setImportResult] = useState<EPUBImportResponse | null>(null);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
// Import options
|
|
||||||
const [authorName, setAuthorName] = useState<string>('');
|
|
||||||
const [seriesName, setSeriesName] = useState<string>('');
|
|
||||||
const [seriesVolume, setSeriesVolume] = useState<string>('');
|
|
||||||
const [tags, setTags] = useState<string>('');
|
|
||||||
const [preserveReadingPosition, setPreserveReadingPosition] = useState(true);
|
|
||||||
const [overwriteExisting, setOverwriteExisting] = useState(false);
|
|
||||||
const [createMissingAuthor, setCreateMissingAuthor] = useState(true);
|
|
||||||
const [createMissingSeries, setCreateMissingSeries] = useState(true);
|
|
||||||
|
|
||||||
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
useEffect(() => {
|
||||||
const file = e.target.files?.[0];
|
router.replace('/import/epub');
|
||||||
if (file) {
|
}, [router]);
|
||||||
setSelectedFile(file);
|
|
||||||
setValidationResult(null);
|
|
||||||
setImportResult(null);
|
|
||||||
setError(null);
|
|
||||||
|
|
||||||
if (file.name.toLowerCase().endsWith('.epub')) {
|
|
||||||
await validateFile(file);
|
|
||||||
} else {
|
|
||||||
setError('Please select a valid EPUB file (.epub extension)');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const validateFile = async (file: File) => {
|
|
||||||
setIsValidating(true);
|
|
||||||
try {
|
|
||||||
const token = localStorage.getItem('auth-token');
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append('file', file);
|
|
||||||
|
|
||||||
const response = await fetch('/api/stories/epub/validate', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Authorization': token ? `Bearer ${token}` : '',
|
|
||||||
},
|
|
||||||
body: formData,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
const result = await response.json();
|
|
||||||
setValidationResult(result);
|
|
||||||
if (!result.valid) {
|
|
||||||
setError('EPUB file validation failed: ' + result.errors.join(', '));
|
|
||||||
}
|
|
||||||
} else if (response.status === 401 || response.status === 403) {
|
|
||||||
setError('Authentication required. Please log in.');
|
|
||||||
} else {
|
|
||||||
setError('Failed to validate EPUB file');
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
setError('Error validating EPUB file: ' + (err as Error).message);
|
|
||||||
} finally {
|
|
||||||
setIsValidating(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
if (!selectedFile) {
|
|
||||||
setError('Please select an EPUB file');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (validationResult && !validationResult.valid) {
|
|
||||||
setError('Cannot import invalid EPUB file');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsLoading(true);
|
|
||||||
setError(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const token = localStorage.getItem('auth-token');
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append('file', selectedFile);
|
|
||||||
|
|
||||||
if (authorName) formData.append('authorName', authorName);
|
|
||||||
if (seriesName) formData.append('seriesName', seriesName);
|
|
||||||
if (seriesVolume) formData.append('seriesVolume', seriesVolume);
|
|
||||||
if (tags) {
|
|
||||||
const tagList = tags.split(',').map(t => t.trim()).filter(t => t.length > 0);
|
|
||||||
tagList.forEach(tag => formData.append('tags', tag));
|
|
||||||
}
|
|
||||||
|
|
||||||
formData.append('preserveReadingPosition', preserveReadingPosition.toString());
|
|
||||||
formData.append('overwriteExisting', overwriteExisting.toString());
|
|
||||||
formData.append('createMissingAuthor', createMissingAuthor.toString());
|
|
||||||
formData.append('createMissingSeries', createMissingSeries.toString());
|
|
||||||
|
|
||||||
const response = await fetch('/api/stories/epub/import', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Authorization': token ? `Bearer ${token}` : '',
|
|
||||||
},
|
|
||||||
body: formData,
|
|
||||||
});
|
|
||||||
|
|
||||||
const result = await response.json();
|
|
||||||
|
|
||||||
if (response.ok && result.success) {
|
|
||||||
setImportResult(result);
|
|
||||||
} else if (response.status === 401 || response.status === 403) {
|
|
||||||
setError('Authentication required. Please log in.');
|
|
||||||
} else {
|
|
||||||
setError(result.message || 'Failed to import EPUB');
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
setError('Error importing EPUB: ' + (err as Error).message);
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const resetForm = () => {
|
|
||||||
setSelectedFile(null);
|
|
||||||
setValidationResult(null);
|
|
||||||
setImportResult(null);
|
|
||||||
setError(null);
|
|
||||||
setAuthorName('');
|
|
||||||
setSeriesName('');
|
|
||||||
setSeriesVolume('');
|
|
||||||
setTags('');
|
|
||||||
};
|
|
||||||
|
|
||||||
if (importResult?.success) {
|
|
||||||
return (
|
|
||||||
<div className="container mx-auto px-4 py-8">
|
|
||||||
<div className="mb-6">
|
|
||||||
<Link
|
|
||||||
href="/library"
|
|
||||||
className="inline-flex items-center text-blue-600 hover:text-blue-800 mb-4"
|
|
||||||
>
|
|
||||||
<ArrowLeftIcon className="h-4 w-4 mr-2" />
|
|
||||||
Back to Library
|
|
||||||
</Link>
|
|
||||||
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
|
|
||||||
EPUB Import Successful
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6">
|
|
||||||
<div className="mb-6">
|
|
||||||
<h2 className="text-xl font-semibold text-green-600 mb-2">Import Completed</h2>
|
|
||||||
<p className="text-gray-600 dark:text-gray-300">
|
|
||||||
Your EPUB has been successfully imported into StoryCove.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<span className="font-semibold text-gray-700 dark:text-gray-300">Story Title:</span>
|
|
||||||
<p className="text-gray-900 dark:text-white">{importResult.storyTitle}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{importResult.wordCount && (
|
|
||||||
<div>
|
|
||||||
<span className="font-semibold text-gray-700 dark:text-gray-300">Word Count:</span>
|
|
||||||
<p className="text-gray-900 dark:text-white">{importResult.wordCount.toLocaleString()} words</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{importResult.totalChapters && (
|
|
||||||
<div>
|
|
||||||
<span className="font-semibold text-gray-700 dark:text-gray-300">Chapters:</span>
|
|
||||||
<p className="text-gray-900 dark:text-white">{importResult.totalChapters}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{importResult.warnings && importResult.warnings.length > 0 && (
|
|
||||||
<div className="bg-yellow-50 border border-yellow-200 rounded-md p-4">
|
|
||||||
<strong className="text-yellow-800">Warnings:</strong>
|
|
||||||
<ul className="list-disc list-inside mt-2 text-yellow-700">
|
|
||||||
{importResult.warnings.map((warning, index) => (
|
|
||||||
<li key={index}>{warning}</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex gap-4 mt-6">
|
|
||||||
<Button
|
|
||||||
onClick={() => router.push(`/stories/${importResult.storyId}`)}
|
|
||||||
className="bg-blue-600 hover:bg-blue-700 text-white"
|
|
||||||
>
|
|
||||||
View Story
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={resetForm}
|
|
||||||
variant="secondary"
|
|
||||||
>
|
|
||||||
Import Another EPUB
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto px-4 py-8">
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
<div className="mb-6">
|
<div className="text-center">
|
||||||
<Link
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
|
||||||
href="/library"
|
<p className="text-gray-600">Redirecting...</p>
|
||||||
className="inline-flex items-center text-blue-600 hover:text-blue-800 mb-4"
|
|
||||||
>
|
|
||||||
<ArrowLeftIcon className="h-4 w-4 mr-2" />
|
|
||||||
Back to Library
|
|
||||||
</Link>
|
|
||||||
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
|
|
||||||
Import EPUB
|
|
||||||
</h1>
|
|
||||||
<p className="text-gray-600 dark:text-gray-300 mt-2">
|
|
||||||
Upload an EPUB file to import it as a story into your library.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{error && (
|
|
||||||
<div className="bg-red-50 border border-red-200 rounded-md p-4 mb-6">
|
|
||||||
<p className="text-red-700">{error}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<form onSubmit={handleSubmit} className="space-y-6">
|
|
||||||
{/* File Upload */}
|
|
||||||
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6">
|
|
||||||
<div className="mb-4">
|
|
||||||
<h3 className="text-lg font-semibold mb-2">Select EPUB File</h3>
|
|
||||||
<p className="text-gray-600 dark:text-gray-300">
|
|
||||||
Choose an EPUB file from your device to import.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<label htmlFor="epub-file" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">EPUB File</label>
|
|
||||||
<Input
|
|
||||||
id="epub-file"
|
|
||||||
type="file"
|
|
||||||
accept=".epub,application/epub+zip"
|
|
||||||
onChange={handleFileChange}
|
|
||||||
disabled={isLoading || isValidating}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{selectedFile && (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<DocumentArrowUpIcon className="h-5 w-5" />
|
|
||||||
<span className="text-sm text-gray-600">
|
|
||||||
{selectedFile.name} ({(selectedFile.size / 1024 / 1024).toFixed(2)} MB)
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{isValidating && (
|
|
||||||
<div className="text-sm text-blue-600">
|
|
||||||
Validating EPUB file...
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{validationResult && (
|
|
||||||
<div className="text-sm">
|
|
||||||
{validationResult.valid ? (
|
|
||||||
<span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
|
|
||||||
Valid EPUB
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-red-100 text-red-800">
|
|
||||||
Invalid EPUB
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Import Options */}
|
|
||||||
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6">
|
|
||||||
<div className="mb-4">
|
|
||||||
<h3 className="text-lg font-semibold mb-2">Import Options</h3>
|
|
||||||
<p className="text-gray-600 dark:text-gray-300">
|
|
||||||
Configure how the EPUB should be imported.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<label htmlFor="author-name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Author Name (Override)</label>
|
|
||||||
<Input
|
|
||||||
id="author-name"
|
|
||||||
value={authorName}
|
|
||||||
onChange={(e) => setAuthorName(e.target.value)}
|
|
||||||
placeholder="Leave empty to use EPUB metadata"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="series-name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Series Name</label>
|
|
||||||
<Input
|
|
||||||
id="series-name"
|
|
||||||
value={seriesName}
|
|
||||||
onChange={(e) => setSeriesName(e.target.value)}
|
|
||||||
placeholder="Optional: Add to a series"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{seriesName && (
|
|
||||||
<div>
|
|
||||||
<label htmlFor="series-volume" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Series Volume</label>
|
|
||||||
<Input
|
|
||||||
id="series-volume"
|
|
||||||
type="number"
|
|
||||||
value={seriesVolume}
|
|
||||||
onChange={(e) => setSeriesVolume(e.target.value)}
|
|
||||||
placeholder="Volume number in series"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="tags" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tags</label>
|
|
||||||
<Input
|
|
||||||
id="tags"
|
|
||||||
value={tags}
|
|
||||||
onChange={(e) => setTags(e.target.value)}
|
|
||||||
placeholder="Comma-separated tags (e.g., fantasy, adventure, romance)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="preserve-reading-position"
|
|
||||||
checked={preserveReadingPosition}
|
|
||||||
onChange={(e) => setPreserveReadingPosition(e.target.checked)}
|
|
||||||
className="mr-2"
|
|
||||||
/>
|
|
||||||
<label htmlFor="preserve-reading-position" className="text-sm text-gray-700 dark:text-gray-300">
|
|
||||||
Preserve reading position from EPUB metadata
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="create-missing-author"
|
|
||||||
checked={createMissingAuthor}
|
|
||||||
onChange={(e) => setCreateMissingAuthor(e.target.checked)}
|
|
||||||
className="mr-2"
|
|
||||||
/>
|
|
||||||
<label htmlFor="create-missing-author" className="text-sm text-gray-700 dark:text-gray-300">
|
|
||||||
Create author if not found
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="create-missing-series"
|
|
||||||
checked={createMissingSeries}
|
|
||||||
onChange={(e) => setCreateMissingSeries(e.target.checked)}
|
|
||||||
className="mr-2"
|
|
||||||
/>
|
|
||||||
<label htmlFor="create-missing-series" className="text-sm text-gray-700 dark:text-gray-300">
|
|
||||||
Create series if not found
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="overwrite-existing"
|
|
||||||
checked={overwriteExisting}
|
|
||||||
onChange={(e) => setOverwriteExisting(e.target.checked)}
|
|
||||||
className="mr-2"
|
|
||||||
/>
|
|
||||||
<label htmlFor="overwrite-existing" className="text-sm text-gray-700 dark:text-gray-300">
|
|
||||||
Overwrite existing story with same title and author
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Submit Button */}
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
disabled={!selectedFile || isLoading || isValidating || (validationResult && !validationResult.valid)}
|
|
||||||
className="bg-blue-600 hover:bg-blue-700 text-white"
|
|
||||||
>
|
|
||||||
{isLoading ? 'Importing...' : 'Import EPUB'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
21
frontend/src/app/stories/import/page.tsx
Normal file
21
frontend/src/app/stories/import/page.tsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
|
||||||
|
export default function ImportRedirectPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
router.replace('/import');
|
||||||
|
}, [router]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
|
||||||
|
<p className="text-gray-600">Redirecting...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -17,22 +17,22 @@ export default function Header() {
|
|||||||
|
|
||||||
const addStoryItems = [
|
const addStoryItems = [
|
||||||
{
|
{
|
||||||
href: '/add-story',
|
href: '/import',
|
||||||
label: 'Manual Entry',
|
label: 'Manual Entry',
|
||||||
description: 'Add a story by manually entering details'
|
description: 'Add a story by manually entering details'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
href: '/stories/import',
|
href: '/import?mode=url',
|
||||||
label: 'Import from URL',
|
label: 'Import from URL',
|
||||||
description: 'Import a single story from a website'
|
description: 'Import a single story from a website'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
href: '/stories/import/epub',
|
href: '/import/epub',
|
||||||
label: 'Import EPUB',
|
label: 'Import EPUB',
|
||||||
description: 'Import a story from an EPUB file'
|
description: 'Import a story from an EPUB file'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
href: '/stories/import/bulk',
|
href: '/import/bulk',
|
||||||
label: 'Bulk Import',
|
label: 'Bulk Import',
|
||||||
description: 'Import multiple stories from a list of URLs'
|
description: 'Import multiple stories from a list of URLs'
|
||||||
}
|
}
|
||||||
@@ -157,28 +157,28 @@ export default function Header() {
|
|||||||
<div className="font-medium theme-text mb-1">Add Story</div>
|
<div className="font-medium theme-text mb-1">Add Story</div>
|
||||||
<div className="pl-4 space-y-1">
|
<div className="pl-4 space-y-1">
|
||||||
<Link
|
<Link
|
||||||
href="/add-story"
|
href="/import"
|
||||||
className="block theme-text hover:theme-accent transition-colors text-sm py-1"
|
className="block theme-text hover:theme-accent transition-colors text-sm py-1"
|
||||||
onClick={() => setIsMenuOpen(false)}
|
onClick={() => setIsMenuOpen(false)}
|
||||||
>
|
>
|
||||||
Manual Entry
|
Manual Entry
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href="/stories/import"
|
href="/import?mode=url"
|
||||||
className="block theme-text hover:theme-accent transition-colors text-sm py-1"
|
className="block theme-text hover:theme-accent transition-colors text-sm py-1"
|
||||||
onClick={() => setIsMenuOpen(false)}
|
onClick={() => setIsMenuOpen(false)}
|
||||||
>
|
>
|
||||||
Import from URL
|
Import from URL
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href="/stories/import/epub"
|
href="/import/epub"
|
||||||
className="block theme-text hover:theme-accent transition-colors text-sm py-1"
|
className="block theme-text hover:theme-accent transition-colors text-sm py-1"
|
||||||
onClick={() => setIsMenuOpen(false)}
|
onClick={() => setIsMenuOpen(false)}
|
||||||
>
|
>
|
||||||
Import EPUB
|
Import EPUB
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href="/stories/import/bulk"
|
href="/import/bulk"
|
||||||
className="block theme-text hover:theme-accent transition-colors text-sm py-1"
|
className="block theme-text hover:theme-accent transition-colors text-sm py-1"
|
||||||
onClick={() => setIsMenuOpen(false)}
|
onClick={() => setIsMenuOpen(false)}
|
||||||
>
|
>
|
||||||
|
|||||||
128
frontend/src/components/layout/ImportLayout.tsx
Normal file
128
frontend/src/components/layout/ImportLayout.tsx
Normal file
@@ -0,0 +1,128 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { ReactNode } from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { usePathname, useSearchParams } from 'next/navigation';
|
||||||
|
import AppLayout from './AppLayout';
|
||||||
|
|
||||||
|
interface ImportTab {
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
href: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ImportLayoutProps {
|
||||||
|
children: ReactNode;
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const importTabs: ImportTab[] = [
|
||||||
|
{
|
||||||
|
id: 'manual',
|
||||||
|
label: 'Manual Entry',
|
||||||
|
href: '/import',
|
||||||
|
description: 'Add a story by manually entering details'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'url',
|
||||||
|
label: 'Import from URL',
|
||||||
|
href: '/import?mode=url',
|
||||||
|
description: 'Import a single story from a website'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'epub',
|
||||||
|
label: 'Import EPUB',
|
||||||
|
href: '/import/epub',
|
||||||
|
description: 'Import a story from an EPUB file'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'bulk',
|
||||||
|
label: 'Bulk Import',
|
||||||
|
href: '/import/bulk',
|
||||||
|
description: 'Import multiple stories from a list of URLs'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function ImportLayout({ children, title, description }: ImportLayoutProps) {
|
||||||
|
const pathname = usePathname();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const mode = searchParams.get('mode');
|
||||||
|
|
||||||
|
// Determine which tab is active
|
||||||
|
const getActiveTab = () => {
|
||||||
|
if (pathname === '/import') {
|
||||||
|
return mode === 'url' ? 'url' : 'manual';
|
||||||
|
} else if (pathname === '/import/epub') {
|
||||||
|
return 'epub';
|
||||||
|
} else if (pathname === '/import/bulk') {
|
||||||
|
return 'bulk';
|
||||||
|
}
|
||||||
|
return 'manual';
|
||||||
|
};
|
||||||
|
|
||||||
|
const activeTab = getActiveTab();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AppLayout>
|
||||||
|
<div className="max-w-4xl mx-auto space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="text-center">
|
||||||
|
<h1 className="text-3xl font-bold theme-header">{title}</h1>
|
||||||
|
{description && (
|
||||||
|
<p className="theme-text mt-2 text-lg">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tab Navigation */}
|
||||||
|
<div className="theme-card theme-shadow rounded-lg overflow-hidden">
|
||||||
|
{/* Tab Headers */}
|
||||||
|
<div className="flex border-b theme-border overflow-x-auto">
|
||||||
|
{importTabs.map((tab) => (
|
||||||
|
<Link
|
||||||
|
key={tab.id}
|
||||||
|
href={tab.href}
|
||||||
|
className={`flex-1 min-w-0 px-4 py-3 text-sm font-medium text-center transition-colors whitespace-nowrap ${
|
||||||
|
activeTab === tab.id
|
||||||
|
? 'theme-accent-bg text-white border-b-2 border-transparent'
|
||||||
|
: 'theme-text hover:theme-accent-light hover:theme-accent-text'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="truncate">
|
||||||
|
{tab.label}
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tab Descriptions */}
|
||||||
|
<div className="px-6 py-4 bg-gray-50 dark:bg-gray-800/50">
|
||||||
|
<div className="flex items-center justify-center">
|
||||||
|
<p className="text-sm theme-text text-center">
|
||||||
|
{importTabs.find(tab => tab.id === activeTab)?.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tab Content */}
|
||||||
|
<div className="p-6">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Actions */}
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<Link
|
||||||
|
href="/library"
|
||||||
|
className="theme-text hover:theme-accent transition-colors text-sm"
|
||||||
|
>
|
||||||
|
← Back to Library
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AppLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user