374 lines
14 KiB
TypeScript
374 lines
14 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import { useParams, useRouter } from 'next/navigation';
|
||
import Link from 'next/link';
|
||
import Image from 'next/image';
|
||
import { storyApi, seriesApi, getImageUrl } from '../../../../lib/api';
|
||
import { Story, Collection } from '../../../../types/api';
|
||
import AppLayout from '../../../../components/layout/AppLayout';
|
||
import Button from '../../../../components/ui/Button';
|
||
import LoadingSpinner from '../../../../components/ui/LoadingSpinner';
|
||
import { calculateReadingTime } from '../../../../lib/settings';
|
||
|
||
export default function StoryDetailPage() {
|
||
const params = useParams();
|
||
const router = useRouter();
|
||
const storyId = params.id as string;
|
||
|
||
const [story, setStory] = useState<Story | null>(null);
|
||
const [seriesStories, setSeriesStories] = useState<Story[]>([]);
|
||
const [collections, setCollections] = useState<Collection[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [updating, setUpdating] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const loadStoryData = async () => {
|
||
try {
|
||
setLoading(true);
|
||
const storyData = await storyApi.getStory(storyId);
|
||
setStory(storyData);
|
||
|
||
// Load series stories if this story is part of a series
|
||
if (storyData.seriesId) {
|
||
const seriesData = await seriesApi.getSeriesStories(storyData.seriesId);
|
||
setSeriesStories(seriesData);
|
||
}
|
||
|
||
// Load collections that contain this story
|
||
const collectionsData = await storyApi.getStoryCollections(storyId);
|
||
setCollections(collectionsData);
|
||
} catch (error) {
|
||
console.error('Failed to load story data:', error);
|
||
router.push('/library');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
if (storyId) {
|
||
loadStoryData();
|
||
}
|
||
}, [storyId, router]);
|
||
|
||
const handleRatingClick = async (newRating: number) => {
|
||
if (updating || !story) return;
|
||
|
||
try {
|
||
setUpdating(true);
|
||
await storyApi.updateRating(story.id, newRating);
|
||
setStory(prev => prev ? { ...prev, rating: newRating } : null);
|
||
} catch (error) {
|
||
console.error('Failed to update rating:', error);
|
||
} finally {
|
||
setUpdating(false);
|
||
}
|
||
};
|
||
|
||
const formatDate = (dateString: string) => {
|
||
return new Date(dateString).toLocaleDateString('en-US', {
|
||
year: 'numeric',
|
||
month: 'long',
|
||
day: 'numeric'
|
||
});
|
||
};
|
||
|
||
const estimateReadingTime = (wordCount: number) => {
|
||
return calculateReadingTime(wordCount);
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<AppLayout>
|
||
<div className="flex items-center justify-center py-20">
|
||
<LoadingSpinner size="lg" />
|
||
</div>
|
||
</AppLayout>
|
||
);
|
||
}
|
||
|
||
if (!story) {
|
||
return (
|
||
<AppLayout>
|
||
<div className="text-center py-20">
|
||
<h1 className="text-2xl font-bold theme-header mb-4">Story Not Found</h1>
|
||
<Button href="/library">Back to Library</Button>
|
||
</div>
|
||
</AppLayout>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<AppLayout>
|
||
<div className="max-w-6xl mx-auto">
|
||
{/* Header Actions */}
|
||
<div className="flex justify-between items-center mb-6">
|
||
<Button href="/library" variant="ghost">
|
||
← Back to Library
|
||
</Button>
|
||
<div className="flex gap-2">
|
||
<Button href={`/stories/${story.id}`}>
|
||
Read Story
|
||
</Button>
|
||
<Button href={`/stories/${story.id}/edit`} variant="ghost">
|
||
Edit
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-12 gap-8">
|
||
{/* Left Column - Cover */}
|
||
<div className="md:col-span-4 lg:col-span-3">
|
||
{/* Cover Image */}
|
||
<div className="aspect-[3/4] bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden max-w-sm mx-auto">
|
||
{story.coverPath ? (
|
||
<Image
|
||
src={getImageUrl(story.coverPath)}
|
||
alt={story.title}
|
||
width={300}
|
||
height={400}
|
||
className="w-full h-full object-cover"
|
||
unoptimized
|
||
/>
|
||
) : (
|
||
<div className="w-full h-full flex items-center justify-center theme-text text-6xl">
|
||
📖
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* Right Column - Story Details */}
|
||
<div className="md:col-span-8 lg:col-span-9 space-y-6">
|
||
{/* Title and Author */}
|
||
<div>
|
||
<h1 className="text-4xl font-bold theme-header mb-2">
|
||
{story.title}
|
||
</h1>
|
||
<Link
|
||
href={`/authors/${story.authorId}`}
|
||
className="text-xl theme-accent hover:underline"
|
||
>
|
||
by {story.authorName}
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Quick Stats and Rating */}
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
{/* Quick Stats */}
|
||
<div className="theme-card theme-shadow rounded-lg p-4 space-y-3">
|
||
<h3 className="font-semibold theme-header mb-3">Details</h3>
|
||
<div className="flex justify-between items-center">
|
||
<span className="theme-text">Word Count:</span>
|
||
<span className="font-medium theme-header">
|
||
{story.wordCount.toLocaleString()}
|
||
</span>
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<span className="theme-text">Reading Time:</span>
|
||
<span className="font-medium theme-header">
|
||
~{estimateReadingTime(story.wordCount)} min
|
||
</span>
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<span className="theme-text">Added:</span>
|
||
<span className="font-medium theme-header">
|
||
{formatDate(story.createdAt)}
|
||
</span>
|
||
</div>
|
||
{story.updatedAt !== story.createdAt && (
|
||
<div className="flex justify-between items-center">
|
||
<span className="theme-text">Updated:</span>
|
||
<span className="font-medium theme-header">
|
||
{formatDate(story.updatedAt)}
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Rating */}
|
||
<div className="theme-card theme-shadow rounded-lg p-4">
|
||
<h3 className="font-semibold theme-header mb-3">Your Rating</h3>
|
||
<div className="flex gap-1">
|
||
{[1, 2, 3, 4, 5].map((star) => (
|
||
<button
|
||
key={star}
|
||
onClick={() => handleRatingClick(star)}
|
||
className={`text-3xl transition-colors ${
|
||
star <= (story.rating || 0)
|
||
? 'text-yellow-400'
|
||
: 'text-gray-300 dark:text-gray-600 hover:text-yellow-300'
|
||
} ${updating ? 'cursor-not-allowed' : 'cursor-pointer'}`}
|
||
disabled={updating}
|
||
>
|
||
★
|
||
</button>
|
||
))}
|
||
</div>
|
||
{story.rating && (
|
||
<p className="text-sm theme-text mt-2">
|
||
{story.rating}/5 stars
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Series Info */}
|
||
{story.seriesName && (
|
||
<div className="theme-card theme-shadow rounded-lg p-4">
|
||
<h3 className="font-semibold theme-header mb-2">Part of Series</h3>
|
||
<p className="theme-text">
|
||
<strong>{story.seriesName}</strong>
|
||
{story.volume && ` - Volume ${story.volume}`}
|
||
</p>
|
||
|
||
{/* Series Navigation */}
|
||
{seriesStories.length > 1 && (
|
||
<div className="mt-4">
|
||
<h4 className="text-sm font-medium theme-header mb-2">
|
||
Other stories in this series:
|
||
</h4>
|
||
<div className="space-y-1">
|
||
{seriesStories
|
||
.filter(s => s.id !== story.id)
|
||
.slice(0, 5)
|
||
.map((seriesStory) => (
|
||
<Link
|
||
key={seriesStory.id}
|
||
href={`/stories/${seriesStory.id}/detail`}
|
||
className="block text-sm theme-accent hover:underline"
|
||
>
|
||
{seriesStory.volume && `${seriesStory.volume}. `}
|
||
{seriesStory.title}
|
||
</Link>
|
||
))}
|
||
{seriesStories.length > 6 && (
|
||
<p className="text-sm theme-text">
|
||
+{seriesStories.length - 6} more stories
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Collections */}
|
||
{collections.length > 0 && (
|
||
<div className="theme-card theme-shadow rounded-lg p-4">
|
||
<h3 className="font-semibold theme-header mb-3">
|
||
Part of Collections ({collections.length})
|
||
</h3>
|
||
<div className="space-y-2">
|
||
{collections.map((collection) => (
|
||
<Link
|
||
key={collection.id}
|
||
href={`/collections/${collection.id}`}
|
||
className="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
{collection.coverImagePath ? (
|
||
<img
|
||
src={getImageUrl(collection.coverImagePath)}
|
||
alt={`${collection.name} cover`}
|
||
className="w-8 h-10 object-cover rounded"
|
||
/>
|
||
) : (
|
||
<div className="w-8 h-10 bg-gradient-to-br from-blue-100 to-purple-100 rounded flex items-center justify-center">
|
||
<span className="text-xs font-bold text-gray-600">
|
||
{collection.storyCount}
|
||
</span>
|
||
</div>
|
||
)}
|
||
<div className="flex-1 min-w-0">
|
||
<h4 className="font-medium theme-header truncate">
|
||
{collection.name}
|
||
</h4>
|
||
<p className="text-sm theme-text opacity-70">
|
||
{collection.storyCount} {collection.storyCount === 1 ? 'story' : 'stories'}
|
||
{collection.estimatedReadingTime && (
|
||
<span> • ~{Math.ceil(collection.estimatedReadingTime / 60)}h reading</span>
|
||
)}
|
||
</p>
|
||
</div>
|
||
{collection.rating && (
|
||
<div className="flex-shrink-0">
|
||
<span className="text-yellow-400">★</span>
|
||
<span className="text-sm theme-text ml-1">{collection.rating}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Summary */}
|
||
{story.summary && (
|
||
<div className="theme-card theme-shadow rounded-lg p-6">
|
||
<h3 className="text-xl font-semibold theme-header mb-4">Summary</h3>
|
||
<div className="theme-text prose prose-gray dark:prose-invert max-w-none">
|
||
<p className="whitespace-pre-wrap leading-relaxed">
|
||
{story.summary}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Tags */}
|
||
{story.tags && story.tags.length > 0 && (
|
||
<div className="theme-card theme-shadow rounded-lg p-4">
|
||
<h3 className="font-semibold theme-header mb-3">Tags</h3>
|
||
<div className="flex flex-wrap gap-2">
|
||
{story.tags.map((tag) => (
|
||
<span
|
||
key={tag.id}
|
||
className="px-3 py-1 text-sm rounded-full theme-accent-bg text-white"
|
||
>
|
||
{tag.name}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Source URL */}
|
||
{story.sourceUrl && (
|
||
<div className="theme-card theme-shadow rounded-lg p-4">
|
||
<h3 className="font-semibold theme-header mb-2">Source</h3>
|
||
<a
|
||
href={story.sourceUrl}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="theme-accent hover:underline break-all"
|
||
>
|
||
{story.sourceUrl}
|
||
</a>
|
||
</div>
|
||
)}
|
||
|
||
{/* Action Buttons */}
|
||
<div className="flex gap-4 pt-6">
|
||
<Button
|
||
href={`/stories/${story.id}`}
|
||
className="flex-1"
|
||
size="lg"
|
||
>
|
||
📚 Start Reading
|
||
</Button>
|
||
<Button
|
||
href={`/stories/${story.id}/edit`}
|
||
variant="ghost"
|
||
size="lg"
|
||
>
|
||
✏️ Edit Story
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</AppLayout>
|
||
);
|
||
} |