482 lines
16 KiB
TypeScript
482 lines
16 KiB
TypeScript
'use client';
|
||
|
||
import { useState, 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 AuthorSelector from '../../components/stories/AuthorSelector';
|
||
import SeriesSelector from '../../components/stories/SeriesSelector';
|
||
import { storyApi, authorApi } from '../../lib/api';
|
||
|
||
export default function AddStoryPage() {
|
||
const [formData, setFormData] = useState({
|
||
title: '',
|
||
summary: '',
|
||
authorName: '',
|
||
authorId: undefined as string | undefined,
|
||
contentHtml: '',
|
||
sourceUrl: '',
|
||
tags: [] as string[],
|
||
seriesName: '',
|
||
seriesId: undefined as string | undefined,
|
||
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 from = searchParams.get('from');
|
||
|
||
// 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,
|
||
authorId: author.id
|
||
}));
|
||
} catch (error) {
|
||
console.error('Failed to load author:', error);
|
||
}
|
||
};
|
||
loadAuthor();
|
||
}
|
||
|
||
// Handle URL import data
|
||
if (from === 'url-import') {
|
||
const title = searchParams.get('title') || '';
|
||
const summary = searchParams.get('summary') || '';
|
||
const author = searchParams.get('author') || '';
|
||
const sourceUrl = searchParams.get('sourceUrl') || '';
|
||
const tagsParam = searchParams.get('tags');
|
||
const content = searchParams.get('content') || '';
|
||
|
||
let tags: string[] = [];
|
||
try {
|
||
tags = tagsParam ? JSON.parse(tagsParam) : [];
|
||
} catch (error) {
|
||
console.error('Failed to parse tags:', error);
|
||
tags = [];
|
||
}
|
||
|
||
setFormData(prev => ({
|
||
...prev,
|
||
title,
|
||
summary,
|
||
authorName: author,
|
||
authorId: undefined, // Reset author ID when importing from URL
|
||
contentHtml: content,
|
||
sourceUrl,
|
||
tags
|
||
}));
|
||
|
||
// Show success message
|
||
setErrors({ success: 'Story data imported successfully! Review and edit as needed before saving.' });
|
||
}
|
||
}, [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 || '',
|
||
authorId: undefined, // Reset author ID for bulk combined stories
|
||
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 handleAuthorChange = (authorName: string, authorId?: string) => {
|
||
setFormData(prev => ({
|
||
...prev,
|
||
authorName,
|
||
authorId: authorId // This will be undefined if creating new author, which clears the existing ID
|
||
}));
|
||
|
||
// Clear error when user changes author
|
||
if (errors.authorName) {
|
||
setErrors(prev => ({ ...prev, authorName: '' }));
|
||
}
|
||
};
|
||
|
||
const handleSeriesChange = (seriesName: string, seriesId?: string) => {
|
||
setFormData(prev => ({
|
||
...prev,
|
||
seriesName,
|
||
seriesId: seriesId // This will be undefined if creating new series, which clears the existing ID
|
||
}));
|
||
|
||
// Clear error when user changes series
|
||
if (errors.seriesName) {
|
||
setErrors(prev => ({ ...prev, seriesName: '' }));
|
||
}
|
||
};
|
||
|
||
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,
|
||
// Send seriesId if we have it (existing series), otherwise send seriesName (new series)
|
||
...(formData.seriesId ? { seriesId: formData.seriesId } : { seriesName: formData.seriesName || undefined }),
|
||
// Send authorId if we have it (existing author), otherwise send authorName (new author)
|
||
...(formData.authorId ? { authorId: formData.authorId } : { authorName: formData.authorName }),
|
||
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}/detail`);
|
||
} 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"
|
||
>
|
||
{/* 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>
|
||
)}
|
||
|
||
<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 Selector */}
|
||
<AuthorSelector
|
||
label="Author *"
|
||
value={formData.authorName}
|
||
onChange={handleAuthorChange}
|
||
placeholder="Select or enter author 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">
|
||
<SeriesSelector
|
||
label="Series (optional)"
|
||
value={formData.seriesName}
|
||
onChange={handleSeriesChange}
|
||
placeholder="Select or enter series name if part of a series"
|
||
error={errors.seriesName}
|
||
authorId={formData.authorId}
|
||
/>
|
||
|
||
<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>
|
||
);
|
||
} |