inital working version
This commit is contained in:
Stefan Hardegger
274
frontend/src/app/stories/[id]/page.tsx
Normal file
274
frontend/src/app/stories/[id]/page.tsx
Normal file
@@ -0,0 +1,274 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { storyApi, seriesApi } from '../../../lib/api';
|
||||
import { Story } from '../../../types/api';
|
||||
import LoadingSpinner from '../../../components/ui/LoadingSpinner';
|
||||
import Button from '../../../components/ui/Button';
|
||||
import StoryRating from '../../../components/stories/StoryRating';
|
||||
import DOMPurify from 'dompurify';
|
||||
|
||||
export default function StoryReadingPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const [story, setStory] = useState<Story | null>(null);
|
||||
const [seriesStories, setSeriesStories] = useState<Story[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [readingProgress, setReadingProgress] = useState(0);
|
||||
|
||||
const storyId = params.id as string;
|
||||
|
||||
useEffect(() => {
|
||||
const loadStory = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const storyData = await storyApi.getStory(storyId);
|
||||
setStory(storyData);
|
||||
|
||||
// Load series stories if part of a series
|
||||
if (storyData.seriesId) {
|
||||
const seriesData = await seriesApi.getSeriesStories(storyData.seriesId);
|
||||
setSeriesStories(seriesData);
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('Failed to load story:', err);
|
||||
setError(err.response?.data?.message || 'Failed to load story');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (storyId) {
|
||||
loadStory();
|
||||
}
|
||||
}, [storyId]);
|
||||
|
||||
// Track reading progress
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const article = document.querySelector('[data-reading-content]') as HTMLElement;
|
||||
if (article) {
|
||||
const scrolled = window.scrollY;
|
||||
const articleTop = article.offsetTop;
|
||||
const articleHeight = article.scrollHeight;
|
||||
const windowHeight = window.innerHeight;
|
||||
|
||||
const progress = Math.min(100, Math.max(0,
|
||||
((scrolled - articleTop + windowHeight) / articleHeight) * 100
|
||||
));
|
||||
|
||||
setReadingProgress(progress);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, [story]);
|
||||
|
||||
const handleRatingUpdate = async (newRating: number) => {
|
||||
if (!story) return;
|
||||
|
||||
try {
|
||||
await storyApi.updateRating(story.id, newRating);
|
||||
setStory(prev => prev ? { ...prev, rating: newRating } : null);
|
||||
} catch (error) {
|
||||
console.error('Failed to update rating:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const findNextStory = (): Story | null => {
|
||||
if (!story?.seriesId || seriesStories.length <= 1) return null;
|
||||
|
||||
const currentIndex = seriesStories.findIndex(s => s.id === story.id);
|
||||
return currentIndex < seriesStories.length - 1 ? seriesStories[currentIndex + 1] : null;
|
||||
};
|
||||
|
||||
const findPreviousStory = (): Story | null => {
|
||||
if (!story?.seriesId || seriesStories.length <= 1) return null;
|
||||
|
||||
const currentIndex = seriesStories.findIndex(s => s.id === story.id);
|
||||
return currentIndex > 0 ? seriesStories[currentIndex - 1] : null;
|
||||
};
|
||||
|
||||
const nextStory = findNextStory();
|
||||
const previousStory = findPreviousStory();
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen theme-bg flex items-center justify-center">
|
||||
<LoadingSpinner size="lg" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !story) {
|
||||
return (
|
||||
<div className="min-h-screen theme-bg flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-2xl font-bold theme-header mb-4">
|
||||
{error || 'Story not found'}
|
||||
</h1>
|
||||
<Button href="/library">
|
||||
Return to Library
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const sanitizedContent = DOMPurify.sanitize(story.contentHtml);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen theme-bg">
|
||||
{/* Progress Bar */}
|
||||
<div className="fixed top-0 left-0 right-0 h-1 bg-gray-200 dark:bg-gray-700 z-50">
|
||||
<div
|
||||
className="h-full theme-accent-bg transition-all duration-200 ease-out"
|
||||
style={{ width: `${readingProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<header className="sticky top-1 z-40 theme-card theme-shadow">
|
||||
<div className="max-w-4xl mx-auto px-4 py-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/library" className="theme-text hover:theme-accent">
|
||||
← Library
|
||||
</Link>
|
||||
<Link href={`/stories/${story.id}/detail`} className="theme-text hover:theme-accent">
|
||||
📄 Details
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<StoryRating
|
||||
rating={story.rating || 0}
|
||||
onRatingChange={handleRatingUpdate}
|
||||
/>
|
||||
|
||||
<Link href={`/stories/${story.id}/edit`}>
|
||||
<Button size="sm" variant="ghost">
|
||||
Edit
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Story Content */}
|
||||
<main className="max-w-4xl mx-auto px-4 py-8">
|
||||
<article data-reading-content>
|
||||
|
||||
{/* Title and Metadata */}
|
||||
<header className="mb-8 text-center">
|
||||
<h1 className="text-4xl font-bold theme-header mb-4">
|
||||
{story.title}
|
||||
</h1>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Link
|
||||
href={`/authors/${story.authorId}`}
|
||||
className="text-xl theme-accent hover:underline"
|
||||
>
|
||||
by {story.authorName}
|
||||
</Link>
|
||||
|
||||
<div className="flex justify-center items-center gap-4 text-sm theme-text">
|
||||
<span>{story.wordCount.toLocaleString()} words</span>
|
||||
<span>•</span>
|
||||
<span>{new Date(story.createdAt).toLocaleDateString()}</span>
|
||||
{story.seriesName && (
|
||||
<>
|
||||
<span>•</span>
|
||||
<span>{story.seriesName} #{story.volume}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
{story.tags && story.tags.length > 0 && (
|
||||
<div className="flex flex-wrap justify-center gap-2 mt-4">
|
||||
{story.tags.map((tag) => (
|
||||
<span
|
||||
key={tag.id}
|
||||
className="px-3 py-1 text-sm theme-accent-bg text-white rounded-full"
|
||||
>
|
||||
{tag.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Source URL */}
|
||||
{story.sourceUrl && (
|
||||
<div className="mt-4">
|
||||
<a
|
||||
href={story.sourceUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm theme-accent hover:underline"
|
||||
>
|
||||
Original Source ↗
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{/* Story Content */}
|
||||
<div
|
||||
className="reading-content"
|
||||
dangerouslySetInnerHTML={{ __html: sanitizedContent }}
|
||||
/>
|
||||
</article>
|
||||
|
||||
{/* Series Navigation */}
|
||||
{(previousStory || nextStory) && (
|
||||
<nav className="mt-12 pt-8 border-t theme-border">
|
||||
<h3 className="text-lg font-semibold theme-header mb-4 text-center">
|
||||
Continue Reading in {story.seriesName}
|
||||
</h3>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
{previousStory ? (
|
||||
<Link
|
||||
href={`/stories/${previousStory.id}`}
|
||||
className="flex-1 max-w-md p-4 theme-card theme-shadow rounded-lg hover:shadow-lg transition-shadow"
|
||||
>
|
||||
<div className="text-sm theme-text mb-1">← Previous</div>
|
||||
<div className="font-semibold theme-header">{previousStory.title}</div>
|
||||
<div className="text-sm theme-text">Part {previousStory.volume}</div>
|
||||
</Link>
|
||||
) : (
|
||||
<div className="flex-1 max-w-md"></div>
|
||||
)}
|
||||
|
||||
{nextStory ? (
|
||||
<Link
|
||||
href={`/stories/${nextStory.id}`}
|
||||
className="flex-1 max-w-md p-4 theme-card theme-shadow rounded-lg hover:shadow-lg transition-shadow text-right"
|
||||
>
|
||||
<div className="text-sm theme-text mb-1">Next →</div>
|
||||
<div className="font-semibold theme-header">{nextStory.title}</div>
|
||||
<div className="text-sm theme-text">Part {nextStory.volume}</div>
|
||||
</Link>
|
||||
) : (
|
||||
<div className="flex-1 max-w-md"></div>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
)}
|
||||
|
||||
{/* Back to Library */}
|
||||
<div className="text-center mt-12">
|
||||
<Button href="/library" variant="ghost">
|
||||
← Return to Library
|
||||
</Button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user