file size limits, keep active filters in session
This commit is contained in:
@@ -13,6 +13,7 @@ import SidebarLayout from '../../components/library/SidebarLayout';
|
||||
import ToolbarLayout from '../../components/library/ToolbarLayout';
|
||||
import MinimalLayout from '../../components/library/MinimalLayout';
|
||||
import { useLibraryLayout } from '../../hooks/useLibraryLayout';
|
||||
import { useLibraryFilters, clearLibraryFilters } from '../../hooks/useLibraryFilters';
|
||||
|
||||
type ViewMode = 'grid' | 'list';
|
||||
type SortOption = 'createdAt' | 'title' | 'authorName' | 'rating' | 'wordCount' | 'lastReadAt';
|
||||
@@ -26,17 +27,21 @@ export default function LibraryContent() {
|
||||
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>('lastReadAt');
|
||||
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
|
||||
|
||||
// Persisted filter state (survives navigation within session)
|
||||
const [searchQuery, setSearchQuery] = useLibraryFilters<string>('searchQuery', '');
|
||||
const [selectedTags, setSelectedTags] = useLibraryFilters<string[]>('selectedTags', []);
|
||||
const [viewMode, setViewMode] = useLibraryFilters<ViewMode>('viewMode', 'list');
|
||||
const [sortOption, setSortOption] = useLibraryFilters<SortOption>('sortOption', 'lastReadAt');
|
||||
const [sortDirection, setSortDirection] = useLibraryFilters<'asc' | 'desc'>('sortDirection', 'desc');
|
||||
const [advancedFilters, setAdvancedFilters] = useLibraryFilters<AdvancedFilters>('advancedFilters', {});
|
||||
|
||||
// Non-persisted state (resets on navigation)
|
||||
const [page, setPage] = useState(0);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [totalElements, setTotalElements] = useState(0);
|
||||
const [refreshTrigger, setRefreshTrigger] = useState(0);
|
||||
const [urlParamsProcessed, setUrlParamsProcessed] = useState(false);
|
||||
const [advancedFilters, setAdvancedFilters] = useState<AdvancedFilters>({});
|
||||
|
||||
// Initialize filters from URL parameters
|
||||
useEffect(() => {
|
||||
@@ -209,11 +214,15 @@ export default function LibraryContent() {
|
||||
}
|
||||
};
|
||||
|
||||
const clearFilters = () => {
|
||||
const handleClearFilters = () => {
|
||||
// Clear state
|
||||
setSearchQuery('');
|
||||
setSelectedTags([]);
|
||||
setAdvancedFilters({});
|
||||
setPage(0);
|
||||
// Clear sessionStorage
|
||||
clearLibraryFilters();
|
||||
// Trigger refresh
|
||||
setRefreshTrigger(prev => prev + 1);
|
||||
};
|
||||
|
||||
@@ -266,7 +275,7 @@ export default function LibraryContent() {
|
||||
onSortDirectionToggle: handleSortDirectionToggle,
|
||||
onAdvancedFiltersChange: handleAdvancedFiltersChange,
|
||||
onRandomStory: handleRandomStory,
|
||||
onClearFilters: clearFilters,
|
||||
onClearFilters: handleClearFilters,
|
||||
};
|
||||
|
||||
const renderContent = () => {
|
||||
@@ -280,7 +289,7 @@ export default function LibraryContent() {
|
||||
}
|
||||
</p>
|
||||
{searchQuery || selectedTags.length > 0 || Object.values(advancedFilters).some(v => v !== undefined && v !== '' && v !== 'all' && v !== false) ? (
|
||||
<Button variant="ghost" onClick={clearFilters}>
|
||||
<Button variant="ghost" onClick={handleClearFilters}>
|
||||
Clear Filters
|
||||
</Button>
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user