inital working version
This commit is contained in:
Stefan Hardegger
319
frontend/src/app/stories/[id]/detail/page.tsx
Normal file
319
frontend/src/app/stories/[id]/detail/page.tsx
Normal file
@@ -0,0 +1,319 @@
|
||||
'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 } from '../../../../types/api';
|
||||
import AppLayout from '../../../../components/layout/AppLayout';
|
||||
import Button from '../../../../components/ui/Button';
|
||||
import LoadingSpinner from '../../../../components/ui/LoadingSpinner';
|
||||
|
||||
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 [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);
|
||||
}
|
||||
} 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) => {
|
||||
const wordsPerMinute = 200; // Average reading speed
|
||||
const minutes = Math.ceil(wordCount / wordsPerMinute);
|
||||
return minutes;
|
||||
};
|
||||
|
||||
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>
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user