refactor: simplify HomePage and LibraryPage components by integrating ClientHomePage and ClientLibraryPage, enhancing data fetching and error handling
This commit is contained in:
Julien Froidefond
148
src/app/series/[seriesId]/ClientSeriesPage.tsx
Normal file
148
src/app/series/[seriesId]/ClientSeriesPage.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { PaginatedBookGrid } from "@/components/series/PaginatedBookGrid";
|
||||
import { SeriesHeader } from "@/components/series/SeriesHeader";
|
||||
import { SeriesService } from "@/lib/services/series.service";
|
||||
import { ErrorMessage } from "@/components/ui/ErrorMessage";
|
||||
import { OptimizedSkeleton } from "@/components/skeletons/OptimizedSkeletons";
|
||||
import type { LibraryResponse } from "@/types/library";
|
||||
import type { KomgaBook, KomgaSeries } from "@/types/komga";
|
||||
import type { UserPreferences } from "@/types/preferences";
|
||||
import { ERROR_CODES } from "@/constants/errorCodes";
|
||||
|
||||
interface ClientSeriesPageProps {
|
||||
seriesId: string;
|
||||
currentPage: number;
|
||||
preferences: UserPreferences;
|
||||
unreadOnly: boolean;
|
||||
pageSize?: number;
|
||||
}
|
||||
|
||||
const DEFAULT_PAGE_SIZE = 20;
|
||||
|
||||
export function ClientSeriesPage({
|
||||
seriesId,
|
||||
currentPage,
|
||||
preferences,
|
||||
unreadOnly,
|
||||
pageSize,
|
||||
}: ClientSeriesPageProps) {
|
||||
const [series, setSeries] = useState<KomgaSeries | null>(null);
|
||||
const [books, setBooks] = useState<LibraryResponse<KomgaBook> | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const effectivePageSize = pageSize || preferences.displayMode?.itemsPerPage || DEFAULT_PAGE_SIZE;
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
page: String(currentPage - 1),
|
||||
size: String(effectivePageSize),
|
||||
unread: String(unreadOnly),
|
||||
});
|
||||
|
||||
const response = await fetch(`/api/komga/series/${seriesId}/books?${params}`);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error?.code || ERROR_CODES.BOOK.PAGES_FETCH_ERROR);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setSeries(data.series);
|
||||
setBooks(data.books);
|
||||
} catch (err) {
|
||||
console.error("Error fetching series books:", err);
|
||||
setError(err instanceof Error ? err.message : ERROR_CODES.BOOK.PAGES_FETCH_ERROR);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [seriesId, currentPage, unreadOnly, effectivePageSize]);
|
||||
|
||||
const handleRefresh = async (seriesId: string) => {
|
||||
try {
|
||||
await SeriesService.invalidateSeriesBooksCache(seriesId);
|
||||
await SeriesService.invalidateSeriesCache(seriesId);
|
||||
|
||||
// Recharger les données
|
||||
const params = new URLSearchParams({
|
||||
page: String(currentPage - 1),
|
||||
size: String(effectivePageSize),
|
||||
unread: String(unreadOnly),
|
||||
});
|
||||
|
||||
const response = await fetch(`/api/komga/series/${seriesId}/books?${params}`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Erreur lors du rafraîchissement de la série");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setSeries(data.series);
|
||||
setBooks(data.books);
|
||||
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
console.error("Erreur lors du rafraîchissement:", error);
|
||||
return { success: false, error: "Erreur lors du rafraîchissement de la série" };
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="container py-8 space-y-8">
|
||||
<div className="space-y-4">
|
||||
<OptimizedSkeleton className="h-64 w-full rounded" />
|
||||
<OptimizedSkeleton className="h-10 w-64" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
||||
{Array.from({ length: effectivePageSize }).map((_, i) => (
|
||||
<OptimizedSkeleton key={i} className="aspect-[3/4] w-full rounded" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="container py-8 space-y-8">
|
||||
<h1 className="text-3xl font-bold">Série</h1>
|
||||
<ErrorMessage errorCode={error} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!series || !books) {
|
||||
return (
|
||||
<div className="container py-8 space-y-8">
|
||||
<h1 className="text-3xl font-bold">Série</h1>
|
||||
<ErrorMessage errorCode={ERROR_CODES.SERIES.FETCH_ERROR} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<SeriesHeader series={series} refreshSeries={handleRefresh} />
|
||||
<PaginatedBookGrid
|
||||
books={books.content || []}
|
||||
currentPage={currentPage}
|
||||
totalPages={books.totalPages}
|
||||
totalElements={books.totalElements}
|
||||
defaultShowOnlyUnread={preferences.showOnlyUnread}
|
||||
showOnlyUnread={unreadOnly}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,58 +1,13 @@
|
||||
import { PaginatedBookGrid } from "@/components/series/PaginatedBookGrid";
|
||||
import { SeriesHeader } from "@/components/series/SeriesHeader";
|
||||
import { SeriesService } from "@/lib/services/series.service";
|
||||
import { PreferencesService } from "@/lib/services/preferences.service";
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { withPageTiming } from "@/lib/hoc/withPageTiming";
|
||||
import { ErrorMessage } from "@/components/ui/ErrorMessage";
|
||||
import type { LibraryResponse } from "@/types/library";
|
||||
import type { KomgaBook, KomgaSeries } from "@/types/komga";
|
||||
import { ClientSeriesPage } from "./ClientSeriesPage";
|
||||
import type { UserPreferences } from "@/types/preferences";
|
||||
import { ERROR_CODES } from "@/constants/errorCodes";
|
||||
import { AppError } from "@/utils/errors";
|
||||
|
||||
interface PageProps {
|
||||
params: { seriesId: string };
|
||||
searchParams: { page?: string; unread?: string; size?: string };
|
||||
}
|
||||
|
||||
const DEFAULT_PAGE_SIZE = 20;
|
||||
|
||||
async function getSeriesBooks(
|
||||
seriesId: string,
|
||||
page: number = 1,
|
||||
unreadOnly: boolean = false,
|
||||
size: number = DEFAULT_PAGE_SIZE
|
||||
) {
|
||||
try {
|
||||
const pageIndex = page - 1;
|
||||
|
||||
const [books, series] = await Promise.all([
|
||||
SeriesService.getSeriesBooks(seriesId, pageIndex, size, unreadOnly),
|
||||
SeriesService.getSeries(seriesId)
|
||||
]);
|
||||
|
||||
return { data: books, series };
|
||||
} catch (error) {
|
||||
throw error instanceof AppError ? error : new AppError(ERROR_CODES.BOOK.PAGES_FETCH_ERROR);
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshSeries(seriesId: string) {
|
||||
"use server";
|
||||
|
||||
try {
|
||||
await SeriesService.invalidateSeriesBooksCache(seriesId);
|
||||
await SeriesService.invalidateSeriesCache(seriesId);
|
||||
revalidatePath(`/series/${seriesId}`);
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
console.error("Erreur lors du rafraîchissement:", error);
|
||||
return { success: false, error: "Erreur lors du rafraîchissement de la série" };
|
||||
}
|
||||
}
|
||||
|
||||
async function SeriesPage({ params, searchParams }: PageProps) {
|
||||
export default async function SeriesPage({ params, searchParams }: PageProps) {
|
||||
const seriesId = (await params).seriesId;
|
||||
const page = (await searchParams).page;
|
||||
const unread = (await searchParams).unread;
|
||||
@@ -63,43 +18,14 @@ async function SeriesPage({ params, searchParams }: PageProps) {
|
||||
|
||||
// Utiliser le paramètre d'URL s'il existe, sinon utiliser la préférence utilisateur
|
||||
const unreadOnly = unread !== undefined ? unread === "true" : preferences.showOnlyUnread;
|
||||
// Utiliser le paramètre de pageSize s'il existe, sinon utiliser la préférence utilisateur
|
||||
const pageSize = size
|
||||
? parseInt(size)
|
||||
: preferences.displayMode?.itemsPerPage || DEFAULT_PAGE_SIZE;
|
||||
|
||||
try {
|
||||
const { data: books, series }: { data: LibraryResponse<KomgaBook>; series: KomgaSeries } =
|
||||
await getSeriesBooks(seriesId, currentPage, unreadOnly, pageSize);
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<SeriesHeader series={series} refreshSeries={refreshSeries} />
|
||||
<PaginatedBookGrid
|
||||
books={books.content || []}
|
||||
currentPage={currentPage}
|
||||
totalPages={books.totalPages}
|
||||
totalElements={books.totalElements}
|
||||
defaultShowOnlyUnread={preferences.showOnlyUnread}
|
||||
showOnlyUnread={unreadOnly}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} catch (error) {
|
||||
if (error instanceof AppError) {
|
||||
return (
|
||||
<div className="container py-8 space-y-8">
|
||||
<ErrorMessage errorCode={error.code} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="container py-8 space-y-8">
|
||||
<h1 className="text-3xl font-bold">Série</h1>
|
||||
<ErrorMessage errorCode={ERROR_CODES.SERIES.FETCH_ERROR} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<ClientSeriesPage
|
||||
seriesId={seriesId}
|
||||
currentPage={currentPage}
|
||||
preferences={preferences}
|
||||
unreadOnly={unreadOnly}
|
||||
pageSize={size ? parseInt(size) : undefined}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default withPageTiming("SeriesPage", SeriesPage);
|
||||
|
||||
Reference in New Issue
Block a user