84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { collectionApi } from '../../../lib/api';
|
|
import AppLayout from '../../../components/layout/AppLayout';
|
|
import CollectionForm from '../../../components/collections/CollectionForm';
|
|
import { Collection } from '../../../types/api';
|
|
|
|
export default function NewCollectionPage() {
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const router = useRouter();
|
|
|
|
const handleSubmit = async (formData: {
|
|
name: string;
|
|
description?: string;
|
|
tags?: string[];
|
|
storyIds?: string[];
|
|
coverImage?: File;
|
|
}) => {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
let collection: Collection;
|
|
|
|
if (formData.coverImage) {
|
|
collection = await collectionApi.createCollectionWithImage({
|
|
name: formData.name,
|
|
description: formData.description,
|
|
tags: formData.tags,
|
|
storyIds: formData.storyIds,
|
|
coverImage: formData.coverImage,
|
|
});
|
|
} else {
|
|
collection = await collectionApi.createCollection({
|
|
name: formData.name,
|
|
description: formData.description,
|
|
tagNames: formData.tags,
|
|
storyIds: formData.storyIds,
|
|
});
|
|
}
|
|
|
|
// Redirect to the new collection's detail page
|
|
router.push(`/collections/${collection.id}`);
|
|
} catch (err: any) {
|
|
console.error('Failed to create collection:', err);
|
|
setError(err.response?.data?.message || 'Failed to create collection');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
router.push('/collections');
|
|
};
|
|
|
|
return (
|
|
<AppLayout>
|
|
<div className="max-w-2xl mx-auto">
|
|
<div className="mb-6">
|
|
<h1 className="text-3xl font-bold theme-header">Create New Collection</h1>
|
|
<p className="theme-text mt-2">
|
|
Organize your stories into a curated collection for better reading experience.
|
|
</p>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="mb-6 p-4 bg-red-100 border border-red-300 text-red-700 rounded-lg">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<CollectionForm
|
|
onSubmit={handleSubmit}
|
|
onCancel={handleCancel}
|
|
loading={loading}
|
|
submitLabel="Create Collection"
|
|
/>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
} |