julienfroidefond/stripstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: simplify HomePage and LibraryPage components by integrating ClientHomePage and ClientLibraryPage, enhancing data fetching and error handling

Browse Source
This commit is contained in:
Julien Froidefond
2025-10-17 08:46:19 +02:00
parent bf94c29bc6
commit e396503ddb
9 changed files with 523 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/app/libraries/[libraryId]/ClientLibraryPage.tsx
View File

@@ -1,46 +1,138 @@
"use client";
import { useEffect, useState } from "react";
import { PaginatedSeriesGrid } from "@/components/library/PaginatedSeriesGrid";
import { RefreshButton } from "@/components/library/RefreshButton";
import { ErrorMessage } from "@/components/ui/ErrorMessage";
import { useTranslate } from "@/hooks/useTranslate";
import { OptimizedSkeleton } from "@/components/skeletons/OptimizedSkeletons";
import { LibraryService } from "@/lib/services/library.service";
import type { LibraryResponse } from "@/types/library";
import type { KomgaSeries, KomgaLibrary } from "@/types/komga";
import type { UserPreferences } from "@/types/preferences";
interface ClientLibraryPageProps {
library: KomgaLibrary | null;
series: LibraryResponse<KomgaSeries> | null;
currentPage: number;
libraryId: string;
refreshLibrary: (libraryId: string) => Promise<{ success: boolean; error?: string }>;
preferences: UserPreferences;
unreadOnly: boolean;
errorCode?: string;
search?: string;
pageSize?: number;
}
const DEFAULT_PAGE_SIZE = 20;
export function ClientLibraryPage({
library,
series,
currentPage,
libraryId,
refreshLibrary,
preferences,
unreadOnly,
errorCode,
search,
pageSize,
}: ClientLibraryPageProps) {
const { t } = useTranslate();
const [library, setLibrary] = useState<KomgaLibrary | null>(null);
const [series, setSeries] = useState<LibraryResponse<KomgaSeries> | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
if (errorCode) {
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),
});
if (search) {
params.append("search", search);
}
const response = await fetch(`/api/komga/libraries/${libraryId}/series?${params}`);
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error?.code || "SERIES_FETCH_ERROR");
}
const data = await response.json();
setLibrary(data.library);
setSeries(data.series);
} catch (err) {
console.error("Error fetching library series:", err);
setError(err instanceof Error ? err.message : "SERIES_FETCH_ERROR");
} finally {
setLoading(false);
}
};
fetchData();
}, [libraryId, currentPage, unreadOnly, search, effectivePageSize]);
const handleRefresh = async (libraryId: string) => {
try {
await LibraryService.invalidateLibrarySeriesCache(libraryId);
// Recharger les données
const params = new URLSearchParams({
page: String(currentPage - 1),
size: String(effectivePageSize),
unread: String(unreadOnly),
});
if (search) {
params.append("search", search);
}
const response = await fetch(`/api/komga/libraries/${libraryId}/series?${params}`);
if (!response.ok) {
throw new Error("Error refreshing library");
}
const data = await response.json();
setLibrary(data.library);
setSeries(data.series);
return { success: true };
} catch (error) {
console.error("Error during refresh:", error);
return { success: false, error: "Error refreshing library" };
}
};
if (loading) {
return (
<div className="container py-8 space-y-8">
<div className="flex items-center justify-between">
<OptimizedSkeleton className="h-10 w-64" />
<OptimizedSkeleton className="h-10 w-10 rounded-full" />
</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">
<div className="flex items-center justify-between">
<h1 className="text-3xl font-bold">
{library?.name || t("series.empty")}
</h1>
<RefreshButton libraryId={libraryId} refreshLibrary={refreshLibrary} />
<RefreshButton libraryId={libraryId} refreshLibrary={handleRefresh} />
</div>
<ErrorMessage errorCode={errorCode} />
<ErrorMessage errorCode={error} />
</div>
);
}
@@ -61,13 +153,13 @@ export function ClientLibraryPage({
{series.totalElements > 0 && (
<p className="text-sm text-muted-foreground">
{t("series.display.showing", {
start: ((currentPage - 1) * (preferences.displayMode?.itemsPerPage || 20)) + 1,
end: Math.min(currentPage * (preferences.displayMode?.itemsPerPage || 20), series.totalElements),
start: ((currentPage - 1) * effectivePageSize) + 1,
end: Math.min(currentPage * effectivePageSize, series.totalElements),
total: series.totalElements,
})}
</p>
)}
<RefreshButton libraryId={libraryId} refreshLibrary={refreshLibrary} />
<RefreshButton libraryId={libraryId} refreshLibrary={handleRefresh} />
</div>
</div>
<PaginatedSeriesGrid

107
src/app/libraries/[libraryId]/page.tsx
View File

@@ -1,57 +1,13 @@
import { LibraryService } from "@/lib/services/library.service";
import { PreferencesService } from "@/lib/services/preferences.service";
import { revalidatePath } from "next/cache";
import { withPageTiming } from "@/lib/hoc/withPageTiming";
import type { LibraryResponse } from "@/types/library";
import type { KomgaSeries, KomgaLibrary } from "@/types/komga";
import type { UserPreferences } from "@/types/preferences";
import { ERROR_CODES } from "@/constants/errorCodes";
import { AppError } from "@/utils/errors";
import { ClientLibraryPage } from "./ClientLibraryPage";
import type { UserPreferences } from "@/types/preferences";
interface PageProps {
params: { libraryId: string };
searchParams: { page?: string; unread?: string; search?: string; size?: string };
}
const DEFAULT_PAGE_SIZE = 20;
async function refreshLibrary(libraryId: string) {
"use server";
try {
await LibraryService.invalidateLibrarySeriesCache(libraryId);
revalidatePath(`/libraries/${libraryId}`);
return { success: true };
} catch (error) {
console.error("Error during refresh:", error);
return { success: false, error: "Error refreshing library" };
}
}
async function getLibrarySeries(
libraryId: string,
page: number = 1,
unreadOnly: boolean = false,
search?: string,
size: number = DEFAULT_PAGE_SIZE
) {
try {
const pageIndex = page - 1;
const [series, library] = await Promise.all([
LibraryService.getLibrarySeries(libraryId, pageIndex, size, unreadOnly, search),
LibraryService.getLibrary(libraryId)
]);
return { data: series, library };
} catch (error) {
throw error instanceof Error ? error : new AppError(ERROR_CODES.SERIES.FETCH_ERROR, {}, error);
}
}
async function LibraryPage({ params, searchParams }: PageProps) {
export default async function LibraryPage({ params, searchParams }: PageProps) {
const libraryId = (await params).libraryId;
const unread = (await searchParams).unread;
const search = (await searchParams).search;
@@ -63,54 +19,15 @@ async function LibraryPage({ 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 valeur par défaut
const pageSize = size
? parseInt(size)
: preferences.displayMode?.itemsPerPage || DEFAULT_PAGE_SIZE;
try {
const { data: series, library }: { data: LibraryResponse<KomgaSeries>; library: KomgaLibrary } =
await getLibrarySeries(libraryId, currentPage, unreadOnly, search, pageSize);
return (
<ClientLibraryPage
library={library}
series={series}
currentPage={currentPage}
libraryId={libraryId}
refreshLibrary={refreshLibrary}
preferences={preferences}
unreadOnly={unreadOnly}
/>
);
} catch (error) {
if (error instanceof AppError) {
return (
<ClientLibraryPage
library={null}
series={null}
currentPage={currentPage}
libraryId={libraryId}
refreshLibrary={refreshLibrary}
preferences={preferences}
unreadOnly={unreadOnly}
errorCode={error.code}
/>
);
}
return (
<ClientLibraryPage
library={null}
series={null}
currentPage={currentPage}
libraryId={libraryId}
refreshLibrary={refreshLibrary}
preferences={preferences}
unreadOnly={unreadOnly}
errorCode={ERROR_CODES.SERIES.FETCH_ERROR}
/>
);
}
return (
<ClientLibraryPage
currentPage={currentPage}
libraryId={libraryId}
preferences={preferences}
unreadOnly={unreadOnly}
search={search}
pageSize={size ? parseInt(size) : undefined}
/>
);
}
export default withPageTiming("LibraryPage", LibraryPage);