369 lines
13 KiB
TypeScript
369 lines
13 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { searchApi, storyApi } from '../../lib/api';
|
|
import { Story, Tag, FacetCount } from '../../types/api';
|
|
import AppLayout from '../../components/layout/AppLayout';
|
|
import { Input } from '../../components/ui/Input';
|
|
import Button from '../../components/ui/Button';
|
|
import StoryMultiSelect from '../../components/stories/StoryMultiSelect';
|
|
import TagFilter from '../../components/stories/TagFilter';
|
|
import LoadingSpinner from '../../components/ui/LoadingSpinner';
|
|
|
|
type ViewMode = 'grid' | 'list';
|
|
type SortOption = 'createdAt' | 'title' | 'authorName' | 'rating' | 'wordCount' | 'lastRead';
|
|
|
|
export default function LibraryPage() {
|
|
const router = useRouter();
|
|
const [stories, setStories] = useState<Story[]>([]);
|
|
const [tags, setTags] = useState<Tag[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [searchLoading, setSearchLoading] = useState(false);
|
|
const [randomLoading, setRandomLoading] = useState(false);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [selectedTags, setSelectedTags] = useState<string[]>([]);
|
|
const [viewMode, setViewMode] = useState<ViewMode>('list');
|
|
const [sortOption, setSortOption] = useState<SortOption>('lastRead');
|
|
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
|
|
const [page, setPage] = useState(0);
|
|
const [totalPages, setTotalPages] = useState(1);
|
|
const [totalElements, setTotalElements] = useState(0);
|
|
const [refreshTrigger, setRefreshTrigger] = useState(0);
|
|
|
|
|
|
|
|
// Convert facet counts to Tag objects for the UI
|
|
const convertFacetsToTags = (facets?: Record<string, FacetCount[]>): Tag[] => {
|
|
if (!facets || !facets.tagNames) {
|
|
return [];
|
|
}
|
|
|
|
return facets.tagNames.map(facet => ({
|
|
id: facet.value, // Use tag name as ID since we don't have actual IDs from search results
|
|
name: facet.value,
|
|
storyCount: facet.count
|
|
}));
|
|
};
|
|
|
|
// Debounce search to avoid too many API calls
|
|
useEffect(() => {
|
|
const debounceTimer = setTimeout(() => {
|
|
const performSearch = async () => {
|
|
try {
|
|
// Use searchLoading for background search, loading only for initial load
|
|
const isInitialLoad = stories.length === 0 && !searchQuery && selectedTags.length === 0;
|
|
if (isInitialLoad) {
|
|
setLoading(true);
|
|
} else {
|
|
setSearchLoading(true);
|
|
}
|
|
|
|
// Always use search API for consistency - use '*' for match-all when no query
|
|
const result = await searchApi.search({
|
|
query: searchQuery.trim() || '*',
|
|
page: page, // Use 0-based pagination consistently
|
|
size: 20,
|
|
tags: selectedTags.length > 0 ? selectedTags : undefined,
|
|
sortBy: sortOption,
|
|
sortDir: sortDirection,
|
|
facetBy: ['tagNames'], // Request tag facets for the filter UI
|
|
});
|
|
|
|
const currentStories = result?.results || [];
|
|
setStories(currentStories);
|
|
setTotalPages(Math.ceil((result?.totalHits || 0) / 20));
|
|
setTotalElements(result?.totalHits || 0);
|
|
|
|
// Update tags from facets - these represent all matching stories, not just current page
|
|
const resultTags = convertFacetsToTags(result?.facets);
|
|
setTags(resultTags);
|
|
} catch (error) {
|
|
console.error('Failed to load stories:', error);
|
|
setStories([]);
|
|
} finally {
|
|
setLoading(false);
|
|
setSearchLoading(false);
|
|
}
|
|
};
|
|
|
|
performSearch();
|
|
}, searchQuery ? 500 : 0); // 500ms debounce for search, immediate for other changes
|
|
|
|
return () => clearTimeout(debounceTimer);
|
|
}, [searchQuery, selectedTags, page, sortOption, sortDirection, refreshTrigger]);
|
|
|
|
// Reset page when search or filters change
|
|
const resetPage = () => {
|
|
if (page !== 0) {
|
|
setPage(0);
|
|
}
|
|
};
|
|
|
|
const handleTagToggle = (tagName: string) => {
|
|
setSelectedTags(prev => {
|
|
const newTags = prev.includes(tagName)
|
|
? prev.filter(t => t !== tagName)
|
|
: [...prev, tagName];
|
|
resetPage();
|
|
return newTags;
|
|
});
|
|
};
|
|
|
|
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setSearchQuery(e.target.value);
|
|
resetPage();
|
|
};
|
|
|
|
const handleSortChange = (newSortOption: SortOption) => {
|
|
setSortOption(newSortOption);
|
|
// Set appropriate default direction for the sort option
|
|
if (newSortOption === 'title' || newSortOption === 'authorName') {
|
|
setSortDirection('asc'); // Alphabetical fields default to ascending
|
|
} else {
|
|
setSortDirection('desc'); // Numeric/date fields default to descending
|
|
}
|
|
resetPage();
|
|
};
|
|
|
|
const toggleSortDirection = () => {
|
|
setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
|
|
resetPage();
|
|
};
|
|
|
|
const clearFilters = () => {
|
|
setSearchQuery('');
|
|
setSelectedTags([]);
|
|
resetPage();
|
|
};
|
|
|
|
const handleStoryUpdate = () => {
|
|
// Trigger reload by incrementing refresh trigger
|
|
setRefreshTrigger(prev => prev + 1);
|
|
};
|
|
|
|
const handleRandomStory = async () => {
|
|
try {
|
|
setRandomLoading(true);
|
|
|
|
// Build filter parameters based on current UI state
|
|
const filters: Record<string, any> = {};
|
|
|
|
// Include search query if present
|
|
if (searchQuery && searchQuery.trim() !== '' && searchQuery !== '*') {
|
|
filters.searchQuery = searchQuery.trim();
|
|
}
|
|
|
|
// Include all selected tags
|
|
if (selectedTags.length > 0) {
|
|
filters.tags = selectedTags;
|
|
}
|
|
|
|
console.log('Getting random story with filters:', filters);
|
|
|
|
const randomStory = await storyApi.getRandomStory(filters);
|
|
|
|
if (!randomStory) {
|
|
// No stories match the current filters
|
|
alert('No stories match your current filters. Try clearing some filters or adding more stories to your library.');
|
|
return;
|
|
}
|
|
|
|
// Navigate to the random story's reading page
|
|
router.push(`/stories/${randomStory.id}/read`);
|
|
|
|
} catch (error) {
|
|
console.error('Failed to get random story:', error);
|
|
alert('Failed to get a random story. Please try again.');
|
|
} finally {
|
|
setRandomLoading(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<AppLayout>
|
|
<div className="flex items-center justify-center py-20">
|
|
<LoadingSpinner size="lg" />
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<AppLayout>
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-3xl font-bold theme-header">Your Story Library</h1>
|
|
<p className="theme-text mt-1">
|
|
{totalElements} {totalElements === 1 ? 'story' : 'stories'}
|
|
{searchQuery || selectedTags.length > 0 ? ` found` : ` total`}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Button
|
|
onClick={handleRandomStory}
|
|
disabled={randomLoading || totalElements === 0}
|
|
variant="secondary"
|
|
>
|
|
{randomLoading ? '🎲 ...' : '🎲 Random Story'}
|
|
</Button>
|
|
<Button href="/import">
|
|
Add New Story
|
|
</Button>
|
|
<Button href="/import/epub" variant="secondary">
|
|
📖 Import EPUB
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Search and Filters */}
|
|
<div className="space-y-4">
|
|
{/* Search Bar */}
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<div className="flex-1 relative">
|
|
<Input
|
|
type="search"
|
|
placeholder="Search by title, author, or tags..."
|
|
value={searchQuery}
|
|
onChange={handleSearchChange}
|
|
className="w-full"
|
|
/>
|
|
{searchLoading && (
|
|
<div className="absolute right-3 top-1/2 transform -translate-y-1/2">
|
|
<div className="animate-spin h-4 w-4 border-2 border-theme-accent border-t-transparent rounded-full"></div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* View Mode Toggle */}
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => setViewMode('grid')}
|
|
className={`p-2 rounded-lg transition-colors ${
|
|
viewMode === 'grid'
|
|
? 'theme-accent-bg text-white'
|
|
: 'theme-card theme-text hover:bg-opacity-80'
|
|
}`}
|
|
aria-label="Grid view"
|
|
>
|
|
⊞
|
|
</button>
|
|
<button
|
|
onClick={() => setViewMode('list')}
|
|
className={`p-2 rounded-lg transition-colors ${
|
|
viewMode === 'list'
|
|
? 'theme-accent-bg text-white'
|
|
: 'theme-card theme-text hover:bg-opacity-80'
|
|
}`}
|
|
aria-label="List view"
|
|
>
|
|
☰
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sort and Tag Filters */}
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
{/* Sort Options */}
|
|
<div className="flex items-center gap-2">
|
|
<label className="theme-text font-medium text-sm">Sort by:</label>
|
|
<select
|
|
value={sortOption}
|
|
onChange={(e) => handleSortChange(e.target.value as SortOption)}
|
|
className="px-3 py-1 rounded-lg theme-card theme-text theme-border border focus:outline-none focus:ring-2 focus:ring-theme-accent"
|
|
>
|
|
<option value="createdAt">Date Added</option>
|
|
<option value="title">Title</option>
|
|
<option value="authorName">Author</option>
|
|
<option value="rating">Rating</option>
|
|
<option value="wordCount">Word Count</option>
|
|
<option value="lastRead">Last Read</option>
|
|
</select>
|
|
|
|
{/* Sort Direction Toggle */}
|
|
<button
|
|
onClick={toggleSortDirection}
|
|
className="p-2 rounded-lg theme-card theme-text hover:bg-opacity-80 transition-colors border theme-border"
|
|
title={`Sort ${sortDirection === 'asc' ? 'Ascending' : 'Descending'}`}
|
|
aria-label={`Toggle sort direction - currently ${sortDirection === 'asc' ? 'ascending' : 'descending'}`}
|
|
>
|
|
{sortDirection === 'asc' ? '↑' : '↓'}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Clear Filters */}
|
|
{(searchQuery || selectedTags.length > 0) && (
|
|
<Button variant="ghost" size="sm" onClick={clearFilters}>
|
|
Clear Filters
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Tag Filter */}
|
|
<TagFilter
|
|
tags={tags}
|
|
selectedTags={selectedTags}
|
|
onTagToggle={handleTagToggle}
|
|
/>
|
|
</div>
|
|
|
|
{/* Stories Display */}
|
|
{stories.length === 0 && !loading ? (
|
|
<div className="text-center py-20">
|
|
<div className="theme-text text-lg mb-4">
|
|
{searchQuery || selectedTags.length > 0
|
|
? 'No stories match your filters'
|
|
: 'No stories in your library yet'
|
|
}
|
|
</div>
|
|
{searchQuery || selectedTags.length > 0 ? (
|
|
<Button variant="ghost" onClick={clearFilters}>
|
|
Clear Filters
|
|
</Button>
|
|
) : (
|
|
<Button href="/import">
|
|
Add Your First Story
|
|
</Button>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<StoryMultiSelect
|
|
stories={stories}
|
|
viewMode={viewMode}
|
|
onUpdate={handleStoryUpdate}
|
|
allowMultiSelect={true}
|
|
/>
|
|
)}
|
|
|
|
{/* Pagination */}
|
|
{totalPages > 1 && (
|
|
<div className="flex justify-center gap-2 mt-8">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => setPage(page - 1)}
|
|
disabled={page === 0}
|
|
>
|
|
Previous
|
|
</Button>
|
|
|
|
<span className="flex items-center px-4 py-2 theme-text">
|
|
Page {page + 1} of {totalPages}
|
|
</span>
|
|
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => setPage(page + 1)}
|
|
disabled={page >= totalPages - 1}
|
|
>
|
|
Next
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
} |