feat: add navigation to carousels and fix data loading
- Fix cache issues in home API route - Add navigation to series/books in MediaRow carousels - Improve Hero section visual with overflow handling - Simplify data structure and API responses
This commit is contained in:
Julien Froidefond
122
src/app/api/komga/home/route.ts
Normal file
122
src/app/api/komga/home/route.ts
Normal file
@@ -0,0 +1,122 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { cookies } from "next/headers";
|
||||
import { redirect } from "next/navigation";
|
||||
import { config } from "@/lib/config";
|
||||
import { cacheService } from "@/lib/services/cache.service";
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
// Récupérer les credentials Komga depuis le cookie
|
||||
const cookieStore = cookies();
|
||||
const configCookie = cookieStore.get("komgaCredentials");
|
||||
console.log("API Home - Cookie komgaCredentials:", configCookie?.value);
|
||||
|
||||
if (!configCookie) {
|
||||
console.log("API Home - Cookie komgaCredentials manquant");
|
||||
return NextResponse.json({ error: "Configuration Komga manquante" }, { status: 401 });
|
||||
}
|
||||
|
||||
let komgaConfig;
|
||||
try {
|
||||
komgaConfig = JSON.parse(atob(configCookie.value));
|
||||
console.log("API Home - Config décodée:", {
|
||||
serverUrl: komgaConfig.serverUrl,
|
||||
hasCredentials: !!komgaConfig.credentials,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("API Home - Erreur de décodage du cookie:", error);
|
||||
return NextResponse.json({ error: "Configuration Komga invalide" }, { status: 401 });
|
||||
}
|
||||
|
||||
if (!komgaConfig.credentials?.username || !komgaConfig.credentials?.password) {
|
||||
console.log("API Home - Credentials manquants dans la config");
|
||||
return NextResponse.json({ error: "Credentials Komga manquants" }, { status: 401 });
|
||||
}
|
||||
|
||||
const auth = Buffer.from(
|
||||
`${komgaConfig.credentials.username}:${komgaConfig.credentials.password}`
|
||||
).toString("base64");
|
||||
|
||||
console.log("API Home - Début des appels API");
|
||||
|
||||
try {
|
||||
// Appels API parallèles
|
||||
const [ongoingResponse, recentlyReadResponse, popularResponse] = await Promise.all([
|
||||
// Séries en cours
|
||||
fetch(
|
||||
`${komgaConfig.serverUrl}/api/v1/series?read_status=IN_PROGRESS&sort=readDate,desc&page=0&size=20&media_status=READY`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Basic ${auth}`,
|
||||
},
|
||||
cache: "no-store", // Désactiver le cache
|
||||
}
|
||||
).catch((error) => {
|
||||
console.error("API Home - Erreur fetch ongoing:", error);
|
||||
throw error;
|
||||
}),
|
||||
// Derniers livres lus
|
||||
fetch(
|
||||
`${komgaConfig.serverUrl}/api/v1/books?read_status=READ&sort=readDate,desc&page=0&size=20`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Basic ${auth}`,
|
||||
},
|
||||
cache: "no-store", // Désactiver le cache
|
||||
}
|
||||
).catch((error) => {
|
||||
console.error("API Home - Erreur fetch recently read:", error);
|
||||
throw error;
|
||||
}),
|
||||
// Séries populaires
|
||||
fetch(
|
||||
`${komgaConfig.serverUrl}/api/v1/series?page=0&size=20&sort=metadata.titleSort,asc&media_status=READY`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Basic ${auth}`,
|
||||
},
|
||||
cache: "no-store", // Désactiver le cache
|
||||
}
|
||||
).catch((error) => {
|
||||
console.error("API Home - Erreur fetch popular:", error);
|
||||
throw error;
|
||||
}),
|
||||
]);
|
||||
|
||||
console.log("API Home - Status des réponses:", {
|
||||
ongoing: ongoingResponse.status,
|
||||
recentlyRead: recentlyReadResponse.status,
|
||||
popular: popularResponse.status,
|
||||
});
|
||||
|
||||
// Vérifier les réponses et récupérer les données
|
||||
const [ongoing, recentlyRead, popular] = await Promise.all([
|
||||
ongoingResponse.json(),
|
||||
recentlyReadResponse.json(),
|
||||
popularResponse.json(),
|
||||
]);
|
||||
|
||||
console.log("API Home - Données récupérées:", {
|
||||
ongoingCount: ongoing.content?.length || 0,
|
||||
recentlyReadCount: recentlyRead.content?.length || 0,
|
||||
popularCount: popular.content?.length || 0,
|
||||
});
|
||||
|
||||
// Retourner les données
|
||||
return NextResponse.json({
|
||||
ongoing: ongoing.content || [],
|
||||
recentlyRead: recentlyRead.content || [],
|
||||
popular: popular.content || [],
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("API Home - Erreur lors de la récupération des données:", error);
|
||||
throw error;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("API Home - Erreur générale:", error);
|
||||
return NextResponse.json(
|
||||
{ error: "Erreur lors de la récupération des données" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
109
src/app/page.tsx
109
src/app/page.tsx
@@ -1,37 +1,80 @@
|
||||
"use client";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Bienvenue sur Paniels</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Votre lecteur Komga moderne pour lire vos BD, mangas et comics préférés.
|
||||
</p>
|
||||
</div>
|
||||
import { HomeContent } from "@/components/home/HomeContent";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { KomgaBook, KomgaSeries } from "@/types/komga";
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div className="rounded-lg border bg-card text-card-foreground shadow-sm p-6">
|
||||
<h2 className="font-semibold mb-2">Bibliothèques</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Accédez à vos bibliothèques Komga et parcourez vos collections.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border bg-card text-card-foreground shadow-sm p-6">
|
||||
<h2 className="font-semibold mb-2">Collections</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Organisez vos lectures en collections thématiques.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border bg-card text-card-foreground shadow-sm p-6">
|
||||
<h2 className="font-semibold mb-2">Lecture</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Profitez d'une expérience de lecture fluide et confortable.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
interface HomeData {
|
||||
onGoingSeries: KomgaSeries[];
|
||||
recentlyRead: KomgaBook[];
|
||||
popularSeries: KomgaSeries[];
|
||||
}
|
||||
|
||||
export default function HomePage() {
|
||||
const router = useRouter();
|
||||
const [data, setData] = useState<HomeData | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchHomeData = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/komga/home");
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || `Erreur ${response.status}`);
|
||||
}
|
||||
|
||||
const jsonData = await response.json();
|
||||
// Transformer les données pour correspondre à l'interface HomeData
|
||||
setData({
|
||||
onGoingSeries: jsonData.ongoing || [],
|
||||
recentlyRead: jsonData.recentlyRead || [],
|
||||
popularSeries: jsonData.popular || [],
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Erreur lors de la récupération des données:", error);
|
||||
setError(error instanceof Error ? error.message : "Une erreur est survenue");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchHomeData();
|
||||
}, []);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<main className="container mx-auto px-4 py-8 space-y-12">
|
||||
<div className="h-[500px] -mx-4 sm:-mx-8 lg:-mx-14 bg-muted animate-pulse" />
|
||||
<div className="space-y-12">
|
||||
{[...Array(3)].map((_, i) => (
|
||||
<div key={i} className="space-y-4">
|
||||
<div className="h-8 w-48 bg-muted rounded animate-pulse" />
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
||||
{[...Array(6)].map((_, j) => (
|
||||
<div key={j} className="aspect-[2/3] bg-muted rounded animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<main className="container mx-auto px-4 py-8 space-y-12">
|
||||
<div className="rounded-md bg-destructive/15 p-4">
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) return null;
|
||||
|
||||
return <HomeContent data={data} />;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user