feat: Implémentation de la pagination et mise à jour du devbook
- Ajout de la pagination pour les séries et les livres - Indicateurs de chargement pendant la navigation - Animations de transition entre les pages - Mise à jour du devbook pour refléter les fonctionnalités complétées - Amélioration de l'affichage des états de chargement (skeletons, spinners) - Optimisation des transitions de page
This commit is contained in:
Julien Froidefond
@@ -4,7 +4,7 @@ import { cookies } from "next/headers";
|
||||
export async function GET(request: Request, { params }: { params: { seriesId: string } }) {
|
||||
try {
|
||||
// Récupérer les credentials Komga depuis le cookie
|
||||
const configCookie = cookies().get("komga_credentials");
|
||||
const configCookie = cookies().get("komgaCredentials");
|
||||
if (!configCookie) {
|
||||
return NextResponse.json({ error: "Configuration Komga manquante" }, { status: 401 });
|
||||
}
|
||||
@@ -24,6 +24,11 @@ export async function GET(request: Request, { params }: { params: { seriesId: st
|
||||
`${config.credentials.username}:${config.credentials.password}`
|
||||
).toString("base64");
|
||||
|
||||
// Récupérer les paramètres de pagination depuis l'URL
|
||||
const { searchParams } = new URL(request.url);
|
||||
const page = searchParams.get("page") || "0";
|
||||
const size = searchParams.get("size") || "24";
|
||||
|
||||
// Appel à l'API Komga pour récupérer les détails de la série
|
||||
const [seriesResponse, booksResponse] = await Promise.all([
|
||||
// Détails de la série
|
||||
@@ -32,9 +37,9 @@ export async function GET(request: Request, { params }: { params: { seriesId: st
|
||||
Authorization: `Basic ${auth}`,
|
||||
},
|
||||
}),
|
||||
// Liste des tomes (on récupère tous les tomes avec size=1000)
|
||||
// Liste des tomes avec pagination
|
||||
fetch(
|
||||
`${config.serverUrl}/api/v1/series/${params.seriesId}/books?page=0&size=1000&unpaged=true&sort=metadata.numberSort,asc`,
|
||||
`${config.serverUrl}/api/v1/series/${params.seriesId}/books?page=${page}&size=${size}&sort=metadata.numberSort,asc`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Basic ${auth}`,
|
||||
@@ -55,10 +60,7 @@ export async function GET(request: Request, { params }: { params: { seriesId: st
|
||||
);
|
||||
}
|
||||
|
||||
const [series, booksData] = await Promise.all([seriesResponse.json(), booksResponse.json()]);
|
||||
|
||||
// On extrait la liste des tomes de la réponse paginée
|
||||
const books = booksData.content;
|
||||
const [series, books] = await Promise.all([seriesResponse.json(), booksResponse.json()]);
|
||||
|
||||
return NextResponse.json({ series, books });
|
||||
} catch (error) {
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
import { cookies } from "next/headers";
|
||||
import { SeriesGrid } from "@/components/library/SeriesGrid";
|
||||
import { KomgaSeries } from "@/types/komga";
|
||||
import { PaginatedSeriesGrid } from "@/components/library/PaginatedSeriesGrid";
|
||||
|
||||
async function getLibrarySeries(libraryId: string) {
|
||||
interface PageProps {
|
||||
params: { libraryId: string };
|
||||
searchParams: { page?: string };
|
||||
}
|
||||
|
||||
const PAGE_SIZE = 20;
|
||||
|
||||
async function getLibrarySeries(libraryId: string, page: number = 1) {
|
||||
const configCookie = cookies().get("komgaCredentials");
|
||||
|
||||
if (!configCookie) {
|
||||
@@ -16,14 +22,10 @@ async function getLibrarySeries(libraryId: string) {
|
||||
throw new Error("Configuration Komga invalide ou incomplète");
|
||||
}
|
||||
|
||||
console.log("Config:", {
|
||||
serverUrl: config.serverUrl,
|
||||
hasCredentials: !!config.credentials,
|
||||
username: config.credentials.username,
|
||||
});
|
||||
// Paramètres de pagination
|
||||
const pageIndex = page - 1; // L'API Komga utilise un index base 0
|
||||
|
||||
const url = `${config.serverUrl}/api/v1/series?library_id=${libraryId}&page=0&size=100`;
|
||||
console.log("URL de l'API:", url);
|
||||
const url = `${config.serverUrl}/api/v1/series?library_id=${libraryId}&page=${pageIndex}&size=${PAGE_SIZE}`;
|
||||
|
||||
const credentials = `${config.credentials.username}:${config.credentials.password}`;
|
||||
const auth = Buffer.from(credentials).toString("base64");
|
||||
@@ -33,46 +35,44 @@ async function getLibrarySeries(libraryId: string) {
|
||||
Authorization: `Basic ${auth}`,
|
||||
Accept: "application/json",
|
||||
},
|
||||
cache: "no-store", // Désactiver le cache pour le debug
|
||||
next: { revalidate: 300 }, // Cache de 5 minutes
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
console.error("Réponse de l'API non valide:", {
|
||||
status: response.status,
|
||||
statusText: response.statusText,
|
||||
headers: Object.fromEntries(response.headers.entries()),
|
||||
body: errorText,
|
||||
});
|
||||
throw new Error(`Erreur HTTP: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log("Données reçues:", {
|
||||
totalElements: data.totalElements,
|
||||
totalPages: data.totalPages,
|
||||
numberOfElements: data.numberOfElements,
|
||||
});
|
||||
|
||||
return { data, serverUrl: config.serverUrl };
|
||||
} catch (error) {
|
||||
console.error("Erreur détaillée:", {
|
||||
message: error instanceof Error ? error.message : "Erreur inconnue",
|
||||
stack: error instanceof Error ? error.stack : undefined,
|
||||
error,
|
||||
});
|
||||
throw error instanceof Error ? error : new Error("Erreur lors de la récupération des séries");
|
||||
}
|
||||
}
|
||||
|
||||
export default async function LibraryPage({ params }: { params: { libraryId: string } }) {
|
||||
export default async function LibraryPage({ params, searchParams }: PageProps) {
|
||||
const currentPage = searchParams.page ? parseInt(searchParams.page) : 1;
|
||||
|
||||
try {
|
||||
const { data: series, serverUrl } = await getLibrarySeries(params.libraryId);
|
||||
const { data: series, serverUrl } = await getLibrarySeries(params.libraryId, currentPage);
|
||||
|
||||
return (
|
||||
<div className="container py-8 space-y-8">
|
||||
<h1 className="text-3xl font-bold">Séries</h1>
|
||||
<SeriesGrid series={series.content || []} serverUrl={serverUrl} />
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-3xl font-bold">Séries</h1>
|
||||
{series.totalElements > 0 && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{series.totalElements} série{series.totalElements > 1 ? "s" : ""}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<PaginatedSeriesGrid
|
||||
series={series.content || []}
|
||||
serverUrl={serverUrl}
|
||||
currentPage={currentPage}
|
||||
totalPages={series.totalPages}
|
||||
totalElements={series.totalElements}
|
||||
pageSize={PAGE_SIZE}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} catch (error) {
|
||||
|
||||
@@ -4,25 +4,44 @@ import { useRouter } from "next/navigation";
|
||||
import { KomgaSeries, KomgaBook } from "@/types/komga";
|
||||
import { useEffect, useState } from "react";
|
||||
import { BookGrid } from "@/components/series/BookGrid";
|
||||
import { ImageOff } from "lucide-react";
|
||||
import { ImageOff, Loader2 } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { Pagination } from "@/components/ui/Pagination";
|
||||
import { useSearchParams, usePathname } from "next/navigation";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface SeriesData {
|
||||
series: KomgaSeries;
|
||||
books: KomgaBook[];
|
||||
books: {
|
||||
content: KomgaBook[];
|
||||
totalElements: number;
|
||||
totalPages: number;
|
||||
number: number;
|
||||
size: number;
|
||||
};
|
||||
}
|
||||
|
||||
const PAGE_SIZE = 24; // 6 colonnes x 4 lignes pour un affichage optimal
|
||||
|
||||
export default function SeriesPage({ params }: { params: { seriesId: string } }) {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const currentPage = searchParams.get("page") ? parseInt(searchParams.get("page")!) : 1;
|
||||
|
||||
const [data, setData] = useState<SeriesData | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isChangingPage, setIsChangingPage] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [imageError, setImageError] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSeriesData = async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/komga/series/${params.seriesId}`);
|
||||
setIsChangingPage(true);
|
||||
const response = await fetch(
|
||||
`/api/komga/series/${params.seriesId}?page=${currentPage - 1}&size=${PAGE_SIZE}`
|
||||
);
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
throw new Error(data.error || "Erreur lors de la récupération de la série");
|
||||
@@ -34,16 +53,22 @@ export default function SeriesPage({ params }: { params: { seriesId: string } })
|
||||
setError(error instanceof Error ? error.message : "Une erreur est survenue");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setIsChangingPage(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchSeriesData();
|
||||
}, [params.seriesId]);
|
||||
}, [params.seriesId, currentPage]);
|
||||
|
||||
const handleBookClick = (book: KomgaBook) => {
|
||||
router.push(`/books/${book.id}`);
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setIsChangingPage(true);
|
||||
router.push(`/series/${params.seriesId}?page=${page}`);
|
||||
};
|
||||
|
||||
const getBookThumbnailUrl = (bookId: string) => {
|
||||
return `/api/komga/images/books/${bookId}/thumbnail`;
|
||||
};
|
||||
@@ -88,6 +113,8 @@ export default function SeriesPage({ params }: { params: { seriesId: string } })
|
||||
}
|
||||
|
||||
const { series, books } = data;
|
||||
const startIndex = (currentPage - 1) * PAGE_SIZE + 1;
|
||||
const endIndex = Math.min(currentPage * PAGE_SIZE, books.totalElements);
|
||||
|
||||
return (
|
||||
<div className="container py-8 space-y-8">
|
||||
@@ -178,14 +205,60 @@ export default function SeriesPage({ params }: { params: { seriesId: string } })
|
||||
|
||||
{/* Grille des tomes */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-2xl font-semibold">
|
||||
Tomes <span className="text-muted-foreground">({books.length})</span>
|
||||
</h2>
|
||||
<BookGrid
|
||||
books={books}
|
||||
onBookClick={handleBookClick}
|
||||
getBookThumbnailUrl={getBookThumbnailUrl}
|
||||
/>
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-2xl font-semibold">
|
||||
Tomes <span className="text-muted-foreground">({books.totalElements})</span>
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{books.totalElements > 0 ? (
|
||||
<>
|
||||
Affichage des tomes <span className="font-medium">{startIndex}</span> à{" "}
|
||||
<span className="font-medium">{endIndex}</span> sur{" "}
|
||||
<span className="font-medium">{books.totalElements}</span>
|
||||
</>
|
||||
) : (
|
||||
"Aucun tome disponible"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
{/* Indicateur de chargement */}
|
||||
{isChangingPage && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-background/50 backdrop-blur-sm z-10">
|
||||
<div className="flex items-center gap-2 px-4 py-2 rounded-full bg-background border shadow-sm">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span className="text-sm">Chargement...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Grille avec animation de transition */}
|
||||
<div
|
||||
className={cn(
|
||||
"transition-opacity duration-200",
|
||||
isChangingPage ? "opacity-25" : "opacity-100"
|
||||
)}
|
||||
>
|
||||
<BookGrid
|
||||
books={books.content}
|
||||
onBookClick={handleBookClick}
|
||||
getBookThumbnailUrl={getBookThumbnailUrl}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-between">
|
||||
<p className="text-sm text-muted-foreground order-2 sm:order-1">
|
||||
Page {currentPage} sur {books.totalPages}
|
||||
</p>
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={books.totalPages}
|
||||
onPageChange={handlePageChange}
|
||||
className="order-1 sm:order-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user